Vue2教程
视频地址
vue2+3全套教程 https://www.bilibili.com/video/BV1Zy4y1K7SH
vue2官方文档
https://v2.cn.vuejs.org/v2/guide/文档
基础
插值语法：{{}}
单项绑定 v-bind 简写:
双向绑定 v-model
MVVM模型：M 模型 对应data中数据
V: 视图 模板
VM: 视图模型 Vue实例对象事件
事件处理:
1.v-on 或者 @ 后面跟事件名
2.事件回调需要配置在methods对象里
事件修饰符:
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
事件的基本使用:
[按钮事件]
<button @click="info2($event,66)">按钮2</button>
methods:
info2(event,num){
console.log(event);
console.log(num);
}
[链接-屏蔽默认行为]
<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>
[显示按键及keyCode]
<input type="text" @keyup="showKey" placeholder="按下按键响应" />
showKey(e){
console.log(e.key,e.keyCode);
}
[修饰符可以连续嵌套]
@keyup.enter.prevent="showKey"
@keyup.ctrl.y="showKey"
计算属性
computed计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
姓名: {{fullName}}
computed:{
fullName:{
// 读取调用
get() {
return this.xing + "-" + this.ming
},
// 修改调用
set(value) {
console.log(value);
const arr = value.split('-')
this.xing = arr[0]
this.ming = arr[1]
}
}
}
[简写形式]
computed:{
fullName(){
console.log("读取了fullName");
return this.xing + "-" + this.ming
}
}
监视属性
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
watch:{
isHot:{
deep: true, //深度监视，用于对象
immediate:: true, //初始化调用监视一次
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
},
// 简写形式
isHot2(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
}绑定样式
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
1. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
条件渲染
v-show
v-if
v-else-if
v-else1.v-if
写法：
(1).v-if="表达式"
(2).v-else-if="表达式"
(3).v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
列表渲染
v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
列表过滤
<body>
<div id="app">
<h2>人员名单</h2>
<input type="text" placeholder="输入用户关键词" v-model="keyWord"/>
<div v-for="(item,index) in filPerson">
{{index}} - {{item.name}}
</div>
</div>
<script>
var App = new Vue({
el: "#app",
data: {
peopleArr:[
{id: 01,name: "张三"},
{id: 02,name: "李四"},
{id: 03,name: "王吴"},
{id: 04,name: "张七"},
{id: 05,name: "王八"},
],
keyWord: ''
},
computed:{
// 计算函数
filPerson(){
// 返回过滤后的数组
return this.peopleArr.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
});
</script>
</body>数据监视
Vue监视数据的原理：
- vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)- 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
增加对象性别信息
<div id="app">
<button @click="changeUser">增加性别信息</button>
<div>{{student.name}}</div>
<div>{{student.age}}</div>
<div>{{student.id}}</div>
<div v-if="student.sex">{{student.sex}}</div>
</div>
<script>
var App = new Vue({
el: "#app",
data: {
student:{
name: "小张",
age: 18,
id: 12
}
},
methods: {
changeUser(){
// 增加对象元素
Vue.set(this.student,"sex","男")
}
}
});
</script>收集表单
<body>
<div id="app">
<form @submit.prevent="showInfo">
账号: <input type="text" v-model="userInfo.accout" /><br /><br />
密码: <input type="password" v-model="userInfo.password"/><br /><br />
性别:
男<input type="radio" name="sex" value="0" v-model="userInfo.sex"/>
女<input type="radio" name="sex" value="1" v-model="userInfo.sex"/><br /><br />
爱好:
学习<input type="checkbox" v-model="userInfo.hobby" value="study" />
唱歌<input type="checkbox" v-model="userInfo.hobby" value="song"/>
健身<input type="checkbox" v-model="userInfo.hobby" value="jiangshen" /><br /><br />
家庭位置:
<select v-model="userInfo.city">
<option value="">请选择省份</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="fujian">福建</option>
</select>
<br /><br />
其他信息:
<textarea v-model="userInfo.other"></textarea><br /><br />
<input type="checkbox" v-model="userInfo.ok"/> 阅读并接受<a href="http://baidu.com">《用户协议》</a><br /><br />
<button>提交</button>
</form>
</div>
<script>
var App = new Vue({
el: "#app",
data: {
userInfo:{
accout: "",
password: "",
sex: '',
hobby:[],
city: '',
other: '',
ok: false
}
},
methods: {
showInfo(){
console.log(JSON.stringify(this.userInfo));
}
},
});
</script>
</body>过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
案例: 格式化时间
<body>
<div id="app">
<h2>格式化时间</h2>
<h3>现在是: {{fmtTime}}</h3>
<h3>过滤器实现: {{time | fmt2Time}} </h3>
<h3>过滤器实现(嵌套过滤器): {{time | fmt2Time | fmtYear}} </h3>
</div>
<script>
var App = new Vue({
el: "#app",
data: {
time: 1755194293664
},
methods: {
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
filters:{
fmt2Time(value){
return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
},
fmtYear(value){
return value.slice(0,4)
}
}
});
</script>
</body>内置指令
v-text 向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html 向指定节点中渲染包含html结构的内容
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构。严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak指令（没有值）
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once指令
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令
一、定义语法：
(1).局部指令：
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
生命周期
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。