首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906，下载后在html中引入：
一 内容绑定
(1)v-text：会替换掉html的内容
eg:
(2){{}}：插值表达式占位内容，放在html中
eg:
{{username}}
(3)v-html：可将html内容渲染到页面，v-text和{{}}不支持
eg:
const vm=new Vue({
el:"#app",
data:{
username:"张三",
}
})
二 属性绑定
注意：插值表达式不能用在属性绑定
v-bind绑定属性值，可简写为英文冒号:，当需要与字符串动态拼接时需要加单引号，否则会识别为data里的变量值
eg:
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('')}}
const vm=new Vue({
el:"#app",
data:{
number:3,
ok:true,
message:"wangbo"
}
})
四 事件绑定
v-on可简写为@
eg:
const vm=new Vue({
el:"#app",
methods:{
add(){
alert("+1");
},
sub(){
alert("+1");
}
}
})
五 指令与过滤器
常用的有以下五种，这里解释一下事件冒泡，比如父div嵌套子div都有click事件，点击子div的click事件时，先触发小div在触发大的div
eg：两种写法
（1）
跳转到首页：(不传递参数时$event可省略)
const vm=new Vue({
el:"#app",
data:{
},
methods:{
show(e){
e.preventDefault();
console.log("wangbo");
}
}
})
（2）
六 按键修饰符
键盘按键触发事件：
（1）
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自动将用户的输入值转为数值类型：
.trim自动过滤用户输入的首位空白符：
.lazy在change时而非input更新：
eg:
+
=
{{n1+n2}}
const vm=new Vue({
el:"#app",
data:{
username:"张三",
option:"2",
n1:1,
n2:2
}
})
八 条件渲染指令
v-if动态创建或移除元素，初始状态不需要展示并且后期也可能不展示使用
v-show添加display=none的属性值，频繁切换时使用
eg:
v-if控制
v-show控制
九 列表渲染指令
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:
| id | 姓名 |
|---|---|
| {{item.id}} | {{item.name}} |
const vm=new Vue({
el:"#app",
data:{
userList:[
{"id":1,"name":"张三"},
{"id":2,"name":"李四"}
]
}