什么是Vue？
Vue是一套用于构建用户界面的前端渐进式框架
用户界面：用vue往html页面中填充数据，非常的方便。
框架：框架是一套现成的解决方案，可以根据框架的规范编写功能。
vue的特性
- 数据驱动视图：数据的变化会驱动视图的自动更新
好处：只需要维护好数据，页面结构会别vue自动渲染。
数据驱动视图是单向的数据绑定
- 双向数据绑定：在网页中form表单负责采集数据，ajax负责提交数据
好处：开发者不再需要手动操作DOM元素，来获取表单最新的值。
注意：数据驱动视图和双向数据绑定的底层原理是MVVM(Mode数据源、View视图、ViewMode就是vue的实例)
Vue的指令
1. 内容渲染指令
(1) v-text指令的缺点：会覆盖元素中原有内容,很少使用
//把username对应的值，渲染到一个p标签中
<p v-text="username"></p>
//如果标签里面有默认文本“年龄”，会被age的值覆盖
<p v-text="age">18</p>
(2) {{}}语法，名称是插值表达式(Mustache)，只能用在内容节点中
//将对应的值渲染到元素的内容节点中，同时保留自身的默认值
<p>姓名：{{username}}</p>
<p>年龄：{{age}}</p>
(3) v-html 把包含html标签的字符串渲染为页面的HTML元素，v-text指令和插值表达式只能渲染纯文本内容。
//如果data中定义了一个包含HTML标签的字符串
<p v-html='el'></p>
const app = Vue.createApp({
data() {
retuen {
el:'<h5 style="color:red;">消息</h5>'
}
}
}).mount(#app)
2. 属性绑定指令
(1) v-bind:指令，可以为元素的属性动态绑定属性值(简写形式英文的（:） )
//如果data中定义了input和imgsrc
const app = Vue.createApp({
data() {
retuen {
input:'请输入内容'，
imgsrc:'https://cn.vue.js.org/images/logo.png'
}
}
}).mount(#app)
//使用v-bind：指令，为input的placeholder动态绑定属性值
<inpu type="text" v-bind:placeholder="input" />
//使用v-bind：指令，为img的src动态绑定属性
<img v-bind:src="imgsrc" />
(2) v-bind动态改变类，多类名写法
<p :class="{red:isRed,f60:isF60}">{{msg}}</p>
data() {
return: {
msg:'内容'，
red:'red',
f60:'f60',
isRed:true,
isF60:true
}
}
//还可以这样写，不会覆盖掉class属性
<p class="box" :class="{red:isRed,f60:isF60}">{{msg}}</p>
//还有一种数组写法
<p class="[red,f60]">{{msg}}</p>
(3) Vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算
{{number + 1}}
{{ok ? 'yes' : 'no'}}
{{msg.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>
3.事件绑定指令
(1) v-on:事件绑定指令，用来为DOM元素绑定事件监听(简写形式英文的（@） )
<div>count的值为：{{count}}</div>
//语法格式为：v-on:事件名称="事件处理函数名称"
<button v-on:click="fn"></div> //onmousemove等同理
(2) 通过v-on:绑定的事件处理函数，需要在methods节点中进行声明，而且与data平级
const app = Vue.createApp({
data() {
return {
count:0
}
},
methods: {
fn() { //事件处理函数名字
this.count+1 //可以this访问到data中的数据
}
}
})
事件对象event，v-on:指令可以接收到事件对象event
methods: {
fn(e) { //接收事件参数对象event，简写为 e
const bgcolor = e.target.style.backgroundColor
e.target.style.backgroundColor = bgcolor === 'red' ? '' : 'red'
this.count+1
}
}
$event是vue提供的特殊变量，表示原生的事件参数对象event，用来防止event被覆盖
<div v-on:click="fn(2,$event)"></div>
methods: {
fn(x,e) {
const bgcolor = e.target.style.backgroundColor
e.target.style.backgroundColor = bgcolor === 'red' ? '' : 'red'
this.count+x
}
}
(3) 计算属性：computed
<div>{{fullName}}</div>
const app = Vue.createApp({
data() {
return {
firstName:'泰勒'，
lastName:'史薇芙特'
}
},
computed: {
//细节：本质上还是属性，写法如函数，命名如属性
fullName() {
return this.firstName + '・' + this.lastName
}
}
})
(4) 计算属性和函数的区别：
如果需要计算一个复杂数据很多次，用函数会重复计算很多次，而计算属性会缓存属性结果，如果多次调用，如果数据没有发生改变，计算属性只会运算一次，而函数则会调用多少次，就计算多少次
<div id="app">
<p>计算属性</p>
<p>{{fullName}}</p>
<p>{{fullName}}</p>
<p>{{fullName}}</p>
<p>函数</p>
<P>{{msg()}}</P>
<P>{{msg()}}</P>
<P>{{msg()}}</P>
</div>
const app = Vue.createApp({
data() {
return {
firstName: '泰勒',
lastName: '史薇芙特'
}
},
computed: {
//细节：本质上还是属性，写法如函数，命名如属性
fullName() {
console.log("—————fullName()—————") //会打印一次
return this.firstName + '・' + this.lastName
}
},
methods: {
msg() {
console.log("————msg()——————") //会打印三次
return this.firstName + '・' + this.lastName
}
}
}).mount('#app')
事件修饰符
在事件处理函数中调用preventDefault()或stopPropagation()是非常常见的需求。因此Vue提供了修饰符的概念
一、.prevent:阻止默认行为(例如：阻止a链接跳转、阻止表单的提交等)
二、.stop:阻止事件冒泡
三、.capture:以捕获模式触发当前的时间处理函数
四、.once:绑定的事件只触发一次
五、.self:只有在event.target是当前元素自身时触发事件处理函数
调用方法：
//v-on:绑定事件.修饰符=“事件处理函数”
@click.prevent="fn"
按键修饰符
在监听键盘事件时，经常需要判断详细的按键
//当按下enter键的时候，触发submit这个函数，当按下esc触发clearinput
<input @keyup.enter="submit" @keyup.esc="clearinput"/>
4. 双向绑定指令
(1) v-model双向绑定指令，不用操作DOM的前提下，快速获取表单数据
//表单里面会显示用户名，如果在表单里面修改用户名，p标签的用户名也会改变
<p>用户名：{{username}}</p>
<input type="text" v-model="username"/>
//v-model指令只能配合表单元素一起使用
(2) v-model的实现原理
//用v-bind将input绑定msg值
//当往input中输入内容时就会触发@input事件，这时给msg赋值为input的value值，就能双向绑定了
<input type="text" :value="msg" @input=“msg=$event.target.value”/>
<p>{{msg}}</p>
v-model指令的修饰符:
一、.number：自动将用户的输入值转为数值类型
二、.trim: 自动过滤用户输入的首尾空表字符
三、.lazy: 在“change”时而非’input时更新‘
<input v-model.number="age"/>
5. 条件渲染指令
按需控制DOM的显示和隐藏，有两个指令：
(1)v-if
(2)v-show
<button @click="flag=!flag"></button>
<p v-if="flag">被v-if控制</p>
<p v-show="flag">被v-show控制</p>
//如果flag为true时显示元素，如果flag为false时隐藏元素
v-if与v-show的区别：
v-if是动态的创建或移出DOM元素，从而控制元素在页面上的显示与隐藏；
v-show是动态给元素添加或移出style="display或none"；样式。
v-if有更高的切换开销，而v-show有更高的初始渲染开销(如果第一次为false也会创建)。
(3) v-else,可以配合v-if使用，还有v-else-if，就想js中的else if一样
<p v-if="flag">被v-if控制</p>
<p v-else="flag">被v-else控制</p>
//如果flag为true时显示v-if元素，如果flag为false时v-else元素
6. 列表渲染指令
vue提供了v-for指令，基于一个数组来循环渲染相似的UI机构。
v-for指令需要使用item in items的特殊语法：
(1) items 是待循环的数组
(2) item 是当前的循环项
data() {
list: [ //构建数组
{id:1,name:'zs'},
{id:2,name:'ls'}
]
}
<div v-for="item in list">姓名是：{{name:item}}</div>
v-for中的索引：(item,index) in items--给v-for第二个参数就可以拿到数组的索引。
v-for使用key维护列表的状态：
当列表数据改变时，默认情况下，Vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能，但是会导致有状态的列表无法被正确更新。所以需要给每一项提供一个唯一的key属性，保证有状态的列表被正确更新。
<div v-for="user in userlist" key="user.id">{{user.name}}</div>
使用key属性的注意事项：
1 key的值只能是字符串或数字类型；
2 key的值必须具有唯一性(key不能重复)；
3 建议把数据项的id属性的值作为key的值(因为id的属性的值具有唯一性)；
4 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性)；
5 使用v-for指令时一定要指定key的值(即提升性能，又防止列表状态混乱)
其他一些指令
- v-pre: 不会解析，不会产生编译
<p v-pre>不产生编译：{{msg}}</p> //不会解析{{}}语法,会直接返回{{msg}}
- v-cloak：vue实例解析之前，给div标签设置一个v-cloak属性，当数据加载完后，vue会自动删除这个v-cloak。让div数据还没出来的隐藏，防止加载出{{msg}}
//style样式
[v-cloak]{display:none;}
<div v-cloak>{{msg}}</div>
