Vue
Vue实例生命周期钩子
概念：
实例生命周期钩子就是Vue实例在 " 某一个时间点 " 会自动执行的函数
特点：
- 自动执行，不需要手动调用
- 不需要写在methods配置项里
生命周期函数数量：11
生命周期图示及相关注解
Vue模板语法
概念：
V层中使用的Vue指令语法
所有的以 ' v-' 开头的指令语法，实际上底层都对应着JS表达式，因此能够实现M > V
语法：
实例：通过三种方式实现Vue实例与div元素绑定
<body>
<div id="app">
<div>{{name + 'chazhi'}}</div> //1-插值表达式
<div v-text="name + 'text'"></div> //2-div元素与name绑定
<div v-html="name + 'html'"></div> //3-div元素通过innerHtml与name绑定
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
name:"<h1>Test</h1>",
}
})
</script>
</body>上例效果
由例子：
- 插值表达式与 v-test 的渲染效果相同
- 且由于每一个Vue指令语法都是JS表达式，因此可以通过 字符串拼接 添加内容
实例：由计算属性、方法、监听器三种方式实现div元素渲染及修改
计算属性：
特点：
- 具备缓存(对数据进行存储)
- 不产生冗余
<body>
<div id="app">
<div>{{fullName}}</div> //插值表达式引用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
computed:{ //配置项computed > 计算属性：计算后返回并渲染 具有缓存的特点
fullName:function(){
console.log('re-conputed') //若计算属性依赖的的计算对象无变化的情况下进行第2，3，多次渲染，则不会执行console.log('re-conputed')
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>方法：
相比computed：
- 不具备缓存
<body>
<div id="app">
<div>{{fullName()}}</div> //插值表达式调用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
methods:{ //配置项methods > 方法
fullName:function(){
console.log('re-conputed')
return this.firstName + ' ' + this.lastName; //通过方法属性也能完成上述功能，但它没有缓存特点，性能不如computed
}
}
})
</script>
</body>监听器：
相比computed：
- 产生冗余
- 代码量大
<body>
<div id="app">
<div>{{fullName}}</div> //插值表达式引用
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
fullName:'Dell Lee', //冗余
},
watch:{ //配置项watch > 监听器， 具备缓存特点，但是代码量比computed多
firstName:function(){
console.log('re-conputed')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName:function(){
console.log('re-conputed')
this.fullName = this.firstName + ' ' + this.lastName
},
}
})
</script>
</body>综述3例，在能同时实现相同渲染效果的情况下，配置项computed无疑是首选！
computed getter 和 setter 函数
get > 调用 fullName 时自动执行 get 函数体
set > 当 fullName 所依赖的计算对象发生修改时，自动执行 set 函数体
注！！：computed 会产生' 依赖对象 '，计算属性首次执行后' 依赖对象 '会放入缓存，直至' 依赖对象 '被修改才会重新计算并覆盖缓存
<body>
<div id="app">
<div>{{fullName}}</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
computed:{ //配置项computed > 计算属性：计算后返回并渲染 具有缓存的特点
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName
},
set:function(){
var arr =value.split(' ');
this.firstName =arr[0];
this.lastName =arr[1];
}
}
}
})
</script>
</body>Vue样式绑定
2种绑定方式：
- v-bind:click=" "
- v-bind:click=" 变量 " > 绑定 变量 添加样式
变量值最终要与CSS选择器命名相同
- v-bind:click=" [ key:value,key:value,..] " > 绑定 对象 添加样式
key是字符串，value决定key
- v-bind:style=" " >直接添加样式
- v-bind:style=" 变量 " > 绑定 变量 添加样式
变量及变量，变量值即数据，直接渲染
- v-bind:style=" [ key:value,key:value,..] " > 绑定 对象 添加样式
添加数据直接渲染
样式绑定实例：
方式1：@click=" "
- v-bind:click=" 变量 "
<body>
<div id="app">
<div @click="handleDivClick" :class="activated"> <!-- //div class元素与变量 activated 绑定 -->
hello world
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
activated:'' //定义变量 activated 为空
},
methods:{
函数实现： handleDivClick:function(){
if(this.activated ==='activated'){ //有点冗余
this.activated ='';
}else{
this.activated ='activated';
}
//定义 activated的值为字符串 activated，同时一个类选择器也以字符串 activated 命名
三元运算实现： this.activated = this.activated ==='activated' ? '' : 'activated'
//三元运算 a = b ? c : d > 如果 a等b 则 值为c 否则 值为d
},
}
})
</script>
</body>- v-bind:click=" [ key:value ] "
<body>
<div id="app">
<div @click="handleDivClick" :class="[activated:isActivated]">
<!-- div class元素与 activated 绑定，但activated 能否被绑定取决于isActivated(true/false) -->
hello world
</div> <!-- v-bind:class="[key:value]" > 称为 class 的对象绑定 -->
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
isActivated:false //初始状态为 false
},
methods:{
handleDivClick:function(){
this.isActivated =true
this.isActivated =!this.isActivated //取非，每次点击都取非
}
},
}
})方式2：@style=" "
- v-bind:style=" 变量 "
- v-bind:style=" [ key:value ] "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :style="styleObj" @click="handleDivclick"> <!-- 绑定变量 -->
<!-- 绑定对象 -->
<div :style="[styleObj,{fontSize:'60px'}]" @click="handleDivclick">
hello world
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
styleObj:{
color:'black'
}
},
methods:{
handleDivclick:function(){
this.$data.styleObj.color = this.$data.styleObj.color === 'black' ? 'red' : 'black';
} //三元运算
}
})
</script>
</body>
</html>Vue条件渲染
Vue条件渲染指令：
- v-if=" " > 设置条件语句或变量，若条件成立则执行
- v-else-if=" " > 设置条件语句或变量，若条件成立则执行
- v-else=" " > 设置条件语句或变量，若条件成立则执行
- v-show=" " > 变量的值决定标签是否在页面存在，若值为false，则渲染但不显示，状态为：display =none
综上Vue条件渲染指令，有以下几点规则和特点：
- v-if 与 v-else 或 v-if、v-else-if 与 v-else 成对使用时，标签必须是紧邻的
- 条件语句可以是 逻辑运算、变量
条件渲染实例
- v-if、 v-else-if、v-else
<body>
<div id="app">
<div v-if="show === 'a'">
this is a
</div>
<div v-else-if="show === 'b'">
this is b
</div>
<div v-else> <!-- v-if与v-else 或 v-if v-else-if与v-else 成对使用时，标签必须是紧邻的 -->
this is others
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
show:'a',
massage:"hello world!",
new_massage:"HELLO WORLD!"
}
})
</script>
</body>- v-show、v-if
<body>
<div id="app">
<div v-if="show"> <!-- v-if > 设置变量决定标签是否在页面存在，若值为false，则完全不存在，不渲染 -->
{{massage}}
</div>
<div v-show="show"> <!-- v-if > 设置变量决定标签是否在页面存在，若值为false，则渲染但不显示，状态为：display =none -->
{{massage}}
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
show:true,
massage:"hello world!",
}
})
</script>
</body>Vue 配置项 data 元组数据渲染操作
元组数据渲染操作 ：
由于通过Vue实例对象动态操作数据，将出现数据改变页面不显示等情况，因此掌握一些操作指令与规则是很有必要的！
- 改变 对象 的引用地址 > 通过对 对象 的整体操作修改数据
如下例，data对象中list是data的一个引用，通过对list引用的整体操作即可实现对数据的修改( vm.$data.list ={ 修改数据 } )
data:{
list:{
name:"dall",
age:"25",
gender:"man",
salary:"25000",
}
}- 通过 Vue 提供的数组操作指令修改数据
> push
> shift
> unshift
> splice
> sort
> reverse
小实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item,index) of list"
:key="item.id"> <!-- // :key > 添加唯一特性，它必须唯一 -->
{{item.text}} --- {{index}}
</div>
<template></template> <!-- 模板占位符 > 具有div元素的属性，但不会被渲染至页面上 -->
</div>
<script>
var vm =new Vue({ //元组数据渲染操作
el:'#app', //1：改变list的引用地址 > 通过对list对象的整体操作改变数据内容
data:{ //2：必须用Vue提供的数组操作指令(push,pop,shift,unshift,splice,sort,reverse)来对数组内容进行操作，否则数据变化但页面不显示
list:[{ //在实际项目中，list是后端向前端返回的值，不能被写死，返回值一般应包含内容(text)和标识符(id)
id:'01',
text:'hello'
}, {
id:'02',
text:'a'
}, {
id:'03',
text:'do'
}]
},
})
</script>
</body>
</html>- 通过 Vue.set 指令修改数据
修改数组：
方式1: Vue.set(vm.$data.list,'index','text')
方式2: vm.$set(vm.$data.list,'index','text')修改对象：
方式1: Vue.set(vm.$data.list,'key','value')
方式2: vm.$set(vm.$data.list,'key','value')----------------------------------------------------------小结---------------------------------------------------------------
Vue 配置项 data 元组数据渲染操作:
- Vue.set指令
- Vue实例对象指令
- 改变引用，重新定义
----------------------------------------------------------小结---------------------------------------------------------------
事件绑定及补充
@click="事件"
- v-on:click事件定义时可以传入多个参数，写法为
v-on:click="事件($event,1,2,3)" ,$event 必须写
对应参数接收时，写法为 > 事件：function(e, one, two, three){ }
补充：@keydown="事件"
@keydown="事件" > 监听键盘，绑定键盘事件
- 键盘动作时，触发事件
修饰符
普通修饰符 ：阻止或限制一些默认行为
按键修饰符：监听按键，按键被触发，事件发生
鼠标修饰符：监听鼠标，按键被触发，事件发生
系统修饰符：设置触发事件的前提是 "在系统修饰符持续被按下期间，事件可以被触发"
普通修饰符
- prevent > 修饰符:阻止默认行为，它仍可以写为 @click.prevent="handleClick"
- self > 修饰符:阻止事件冒泡(冒泡：子标签被动作，动作上升到父标签导致事件触发)
- once > 修饰符:事件触发一次后便失效
- capture > 修饰符:使成为捕获机制(外部 > 内部)，事件绑定默认是冒泡机制(内部 > 外部)
- once > 修饰符:事件触发一次后便失效
语法及用法：
<body>
<div id="app">
<form action="/abc" @click.prevent>
<!-- prevent > 修饰符:阻止默认行为，它仍可以写为 @click.prevent="handleClick" -->
<input type="submit"/>
</form>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{},
methods:{
handleClick:function(e){
//表格，文本框等标签添加事件一般会返回事件参数(返回值)
console.log(e);
}
}
})
</script>
</body>按键修饰符
- enter > 修饰符:监听enter(回车键)，enter被触发时，事件才执行
- tab > 监听table(换行键)，table被触发时，事件才执行
- delete > 监听delete，delete被触发时，事件才执行
- esc > 监听esc，esc被触发时，事件才执行
语法及用法：
<body>
<div id="app">
<input @keydown.enter="handleKeydown"/>
<!-- enter > 修饰符:监听enter(回车键)，enter被触发时，事件才执行 -->
</div>
<script>
var vm =new Vue({
el:'#app',
data:{},
methods:{
handleKeydown:function(e){ //表格，文本框等标签添加事件一般会返回事件参数(返回值)
console.log(e.target.value); // e.target > 获取目标 DOM 对象，再value取值
}
}
})
</script>
</body>.target方法 > 获取目标 DOM 对象
鼠标修饰符
- left > 监听鼠标左键，鼠标左键被触发时，事件才执行
- right > 监听鼠标右键，鼠标右键被触发时，事件才执行
- middle > 监听鼠标中键，鼠标中键被触发时，事件才执行
语法及用法：同上
系统修饰符
- ctrl > 监听ctrl，只有当ctrl被(持续)按下时，事件才能发生
- meta > 监听meta，只有当meta被(持续)按下时，事件才能发生
语法及用法：同上
表单绑定修及补充
v-model > 标签元素双向绑定变量
修饰符：
lazy修饰符 > 指针移走时，再动作，能提高表单性能
number修饰符 > 识别数字类型
trim修饰符 > 去除首尾的空格元素
实例：
<body>
<div id="app">
<input type="text" value="te" v-model.number.lazy.trim="value"/> <!--
v-model > 标签元素双向绑定变量
lazy修饰符 > 指针移走时，再动作，能提高表单性能
number修饰符 > 识别数字类型
trim修饰符 > 去除首尾的空格元素
-->
<select v-model="value">
<option disabled>---------------</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
{{value}}
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
value:''
},
methods:{
},
watch:{ //监听器 watch > 监听某些变量
value:function(){
console.log(typeof this.value)
}
},
})
</script>
</body>--------------------------------------------------------小结------------------------------------------------------------------
修饰符的使用可以提高性能
编程上能够链式累加
--------------------------------------------------------小结------------------------------------------------------------------
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
