首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906，下载后在html中引入：
一 内容绑定
(1)v-text：会替换掉html的内容
eg:<p v-text="username"></p>
(2){{}}：插值表达式占位内容，放在html中
eg:<p>{{username}}</p>
(3)v-html：可将html内容渲染到页面，v-text和{{}}不支持
eg:<div v-html="username"></div>
const vm=new Vue({
el:"#app",
data:{
username:"张三",
}
})
二 属性绑定
注意：插值表达式不能用在属性绑定
v-bind绑定属性值，可简写为英文冒号:，当需要与字符串动态拼接时需要加单引号，否则会识别为data里的变量值
eg:
<input type="text" v-bind:placeholder="content"/>
<img v-bind:src="photo">
const vm=new Vue({
el:"#app",
data:{
content:"请输入名称",
photo:"https://pic.cnblogs.com/face/2622189/20211106175104.png"
}
})
三 使用js表达式
eg:
{{number+1}}
{{ok?'yes':'no'}}
{{message.split('').reverse().join('')}}
<div :title="'title'+number"></div>
const vm=new Vue({
el:"#app",
data:{
number:3,
ok:true,
message:"wangbo"
}
})
四 事件绑定
v-on可简写为@
eg:
<button v-on:click="add">+1</button>
<button @click="sub">-1</button>
const vm=new Vue({
el:"#app",
methods:{
add(){
alert("+1");
},
sub(){
alert("+1");
}
}
})
五 指令与过滤器
常用的有以下五种，这里解释一下事件冒泡，比如父div嵌套子div都有click事件，点击子div的click事件时，先触发小div在触发大的div
eg：两种写法
（1） <a href="http://www.baidu.com" @click="show($event)">跳转到首页</a>：(不传递参数时$event可省略)
const vm=new Vue({
el:"#app",
data:{
},
methods:{
show(e){
e.preventDefault();
console.log("wangbo");
}
}
})
（2） <a href="http://www.baidu.com" @click.prevent="show">跳转到首页</a>
六 按键修饰符
键盘按键触发事件：
（1） <input @keyup.esc="clearInput"/>
<input @keyup.enter="submit"/>
const vm=new Vue({
el:"#app",
data:{
},
methods:{
clearInput(e){
console.log("清除");
e.target.value="";
},
submit(){
console.log("确认提交");
}
}
})
七 v-model双向绑定
v-bind也可赋值但是不具备双向绑定，常用的绑定标签有input，texteare，select
指令修饰符：
.number自动将用户的输入值转为数值类型：<input type="text" v-model.number="n1"/>
.trim自动过滤用户输入的首位空白符：<input type="text" v-model.trim="username"/>
.lazy在change时而非input更新：<input type="text" v-model.lazy="username"/>
eg:
<input type="text" v-model="username"/>
<hr>
<input type="text" v-bind:value="username"/>
<hr>
<select v-model="option">
<option>请选择</option>
<option value="1">联强国际</option>
<option value="2">华为</option>
<option value="3">启明</option>
</select>
<hr>
<input type="text" v-model.number="n1"/>+
<input type="text" v-model.number="n2"/>=
<span>{{n1+n2}}</span>
<hr>
<input type="text" v-model.trim="username"/>
<hr>
<input type="text" v-model.lazy="username"/>
const vm=new Vue({
el:"#app",
data:{
username:"张三",
option:"2",
n1:1,
n2:2
}
})
八 条件渲染指令
v-if动态创建或移除元素，初始状态不需要展示并且后期也可能不展示使用
v-show添加display=none的属性值，频繁切换时使用
eg:
<p v-if="flag">v-if控制</p>
<p v-show="flag">v-show控制</p>
九 列表渲染指令
v-for,使用item in items形式的特殊语法，也可带上索引(item,index) in items,注意item,index都是形参，可根据需要重新命名
key的注意事项：
1只能是数字或者字符串
2必须具有唯一性
3建议用id作为key
4使用索引index作为key没有意义，不具有唯一性
5建议使用v-for一定要指定key的值（既提升性能，又防止列表状态紊乱）
eg:
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="item in userList" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
const vm=new Vue({
el:"#app",
data:{
userList:[
{"id":1,"name":"张三"},
{"id":2,"name":"李四"}
]
}
