1. Vue基本语法
1. Vue基本语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.Vue基本语法title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>
<body>
<div id="app">{{message}}div>
body>
<script>
const hello = {
data:function(){
return{
message:'Hello Vue'
}
}
}
const app = Vue.createApp(hello)
app.mount('#app')
script>
html>
2.内容渲染指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>
<body>
<div id="app">
<p>name: {{username}}p>
<p>sex: {{gender}}p>
<p>{{desc}}p>
<p v-html="desc">p>
div>
body>
<script>
const vm = {
data:function(){
return{
username: "111",
gender: "男",
desc: '百度'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
script>
html>
3.属性绑定指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
head>
<body>
<div id="app">
<a :href="link">百度a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="" >
div>
body>
<script>
const vm = {
data: function(){
return {
link: "http://www.baidu.com",
inputValue: '请输入内容',
imgSrc: './image/11.jpg',
w: '50px'
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
script>
html>
4.使用JavaScript表达式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./js/vue.global.js">script>
head>
<body>
<div id="app">
<p>{{number + 1}}p>
<p>{{ok? 'True':'False'}}p>
<p>{{message.split('').reverse().join('')}}p>
<p :id="'list-' + id">xxxp>
<p>{{user.name}}p>
div>
body>
<script>
const vm={
data:function(){
return{
number: 9,
ok: false,
message: 'ABC',
id: 3,
user:{
name:'yang',
}
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
script>
html>
5.事件绑定指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./js/vue.global.js">script>
head>
<body>
<div id="app">
<h3>count: {{count}}h3>
<button v-on:click="addCount">+1button>
<button @click="count+=1">+1button>
div>
body>
<script>
const vm = {
data: function(){
return {
count:0,
}
},
methods: {
addCount(){
this.count += 1
}
}
}
const app = Vue.createApp(vm)
app.mount("#app")
script>
html>
6.条件渲染指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./js/vue.global.js">script>
head>
<body>
<div id="app">
<button @click="flag = !flag">按钮button>
<p v-if="flag">v-if控制p>
<p v-show="flag">v-show控制p>
<p v-if="type=='A'">优秀p>
<p v-else-if="type=='B'">良好p>
<p v-else>需要加强p>
div>
body>
<script>
const vm = {
data: function(){
return{
flag: false,
type: 'A'
}
}
}
const app = Vue.createApp(vm)
app.mount("#app")
script>
html>
7.列表渲染指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./js/vue.global.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="name">
<button @click="addUser">添加button>
<ul>
<li v-for="(user, index) in userlist" :key="user.id">
<input type="checkbox">
<div>name: {{user.name}}div>
li>
ul>
div>
body>
<script>
const vm = {
data : function(){
return{
userlist:[
{id:1, name:'111'},
{id:2, name:'222'}
],
nextId: 3,
name: ''
}
},
methods:{
addUser(){
this.userlist.unshift({id:this.nextId, name:this.name})
this.name=''
this.nextId += 1
}
}
}
const app = Vue.createApp(vm)
app.mount("#app")
script>
html>
