本文介绍了Vue的基本用法，包括数据绑定、内容渲染指令、属性绑定指令、JavaScript表达式、事件绑定指令、条件渲染指令、列表渲染指令以及v-for中的key的使用。同时，还涉及了v-model指令在表单元素上的双向数据绑定功能。
学习笔记
基本用法
<body>
<div id = "app">
{{message}}
</div>
</body>
<script>
Vue.createApp( {
data: function() {
return {
message:"hello vue!",
};
},
}).mount('#app');
</script>内容渲染指令
<body>
<div id="app">
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<p>{{desc}}</p>
<p v-html="desc"></p>
</div>
</body>
<script>
const app = {
data() {
return {
username: "萧笃",
gender: "男",
desc: "<a href='http://www.baidu.com' >跳转百度</a>",
};
},
};
Vue.createApp(app).mount("#app");
</script>属性绑定指令
<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: "./images/01.jpg",
w: "500px"
}
}
}
const app = Vue.createApp(vm);
app.mount("#app");
</script>- 属性前面加上':'
使用javascript表达式
<body>
<div id = "app">
<p> {{number+1}} </p>
<p> {{ok?true:false}} </p>
<p> {{message.split('').reverse().join('')}} </p>
<p :id="'list-'+id" > xxx </p>
<p> {{user.name}} </p>
</div>
</body>
<script>
const vm = {
data() {
return {
number: 9,
ok: false,
message: 'ABC',
id: 3,
user: {
name: '萧笃',
}
}
}
}
const app = Vue.createApp(vm);
app.mount("#app");
</script>事件绑定指令
<body>
<div id="app">
<h3>count: {{count}}</h3>
<button v-on:click="addcount">+1</button>
<button @click="count+=1">+1</button>
</div>
</body>
<script>
const vm = {
data: function () {
return {
count: 0,
};
},
methods: {
addcount() {
this.count += 1;
},
},
};
const app = Vue.createApp(vm);
app.mount("#app");
</script>- v-on:click=""和@click=""属性一致，之前用on的属性全部改成@就可以了
条件渲染指令
<body>
<div id = "app">
<button @click = "flag = ! flag">转换flag</button>
<p v-if = "flag">我是v-if</p>
<p v-show = "flag">我是v-show</p>
</div>
</body>
<script>
const vm = {
data:function() {
return {
flag: false,
}
}
}
const app = Vue.createApp(vm);
app.mount("#app");
</script>v-show是创建了标签，但是通过css给隐藏了
<p style="display: none;">我是v-show</p>v-if 则是通过条件来创建和删除，所以v-show的效率会更高一点
v-else和v-else-if指令
<body>
<div id="app">
<p v-if="num<0.5" > 随机数小于0.5</p>
<p v-else="num>=0.5"> 随机数大于等于0.5 </p>
<hr>
<p v-if="type==='A'">优秀</p>
<p v-else-if="type==='B'">良好</p>
<p v-else-if="type==='C'">普通</p>
<p v-else>差</p>
<div v-show="a">
测试
</div>
<button @click="a = !a">点击</button>
</div>
</body>
<script>
const vm = {
data() {
return {
num: Math.random(),
type: 'C',
a:false
}
}
}
const app = Vue.createApp(vm);
app.mount("#app");
</script>列表渲染指令
<body>
<div id="app">
<ul>
<li v-for="(user,i) in userlist">索引是{{i}},姓名：{{user.name}}</li>
</ul>
</div>
</body>
<script>
const vm = {
data() {
return {
userlist: [
{
id: 1,
name: "杜嘟",
},
{
id: 2,
name: "杜嘟嘟",
},
{
id: 3,
name: "杜嘟嘟嘟",
},
],
};
},
};
const app = Vue.createApp(vm);
app.mount("#app");
</script>- v-for="(user,i) in userlist"这里边的i是自动生成的下标，从0开始，可以不要
v-for中的key
<body>
<div id="app">
<input type="text" v-model="name">
<button v-on:click="addUser">添加</button>
<ul>
<li v-for = "(user,index) in userlist" :key="user.id">
<input type="checkbox" :value="user.name"> {{user.name}}
</li>
</ul>
</div>
</body>
<script>
const vm = {
data() {
return {
name: '',
userlist: [
{
id:1,
name: '杜嘟'
},
{
id: 2,
name: '杜嘟嘟'
}
],
nextid: 3
}
},
methods: {
addUser() {
this.userlist.unshift({id: this.nextid,name: this.name}),
this.nextid++;
this.name='';
}
}
}
const app = Vue.createApp(vm);
app.mount("#app");
</script>在组件化开发中需要对每个li进行赋值一个key，否则如例子中每次添加一个新用户前选中的目标单选框，在新加入user之后，所选中的就会变成新加入的user。加入key则可以解决这个问题，这个key也不能使用for中自动生成的下标index，因为添加数据的时候下标也会改变，所以用user.id最合适。
<input type="text" v-model="name"> - 属性v-model表示双向数据绑定，的核心指令。v-model 可以在表单元素（如 input、textarea 和 select）上创建双向数据绑定，自动更新数据。