1. vue指令
(0). vue文本渲染三种方法 {{}}、v-text、v-html
- {{ }}将元素当成纯文本输出
- v-html
v-html会将元素当成HTML标签解析后输出 - v-text
v-text会将元素当成纯文本输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue文本渲染三种方法</title>
</head>
<body>
<div id="app">
/*{{}}和v-text不能解析html元素,只会照样输出*/
<p>{{hello}}</p>
<p v-text = 'hello'></p>
<p v-html = 'hello'></p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:'<span>hello world</span>'
}
})
</script>
</html>
//*********结果**************************
//<span>hello world</span>
//<span>hello world</span>
//hello world
(1). 单向绑定数据----v-bind
v-bind用于绑定元素属性(任何属性)和data里的数据,它的简写就是一个冒号(:)
//例:
<div class="app">
//绑定vue中data的数据
<a v-bind:href="url">click me</a>
<a :href="url">click me</a>
</div>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
}
});
(2). 双向绑定数据----v-model(❗)
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<input type="text" :value="searchMap.keyWord">
<p>您要查询的是:{{searchMap.keyWord}}</p>
data: {
searchMap:{
keyWord: '素小暖'
}
}
-
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
- v-bind绑定数据
- v-on给当前元素绑定事件
-
v-model在input的下拉框、单选按钮、复选框中的应用
<!--下拉框--> <div id="app"> <select v-model="selected"> <option value="A被选">A</option> <option value="B被选">B</option> <option value="C被选">C</option> </select> <span>Selected: {{ selected }}</span> </div> //------------------------------------------------------------------------------- <script> new Vue({ el: '#app', data: { selected: '' } }); </script> //**************************************************************************** //**************************************************************************** <!--单选按钮--> <!--同一组单选按钮,需要将属性name设置为一样值--> <div id="app"> <input type="radio" name="size" id="small" value="small_value" v-model="picked"> <label for="small">small</label> <br> <input type="radio" name="size" id="big" value="big_value" v-model="picked"> <label for="big">big</label> <br> <span>Picked: {{ picked }}</span> </div> //------------------------------------------------------------------------------- <script> new Vue({ el: '#app', data: { picked: '' } }) </script> //**************************************************************************** //**************************************************************************** <!--复选框--> <div id="app"> <input type="checkbox" id="one" value="value_one" v-model="checkedNames"> <label for="one">选项一</label> <input type="checkbox" id="two" value="value_two" v-model="checkedNames"> <label for="two">选项二</label> <input type="checkbox" id="three" value="value_three" v-model="checkedNames"> <label for="three">选项三</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> //------------------------------------------------------------------------------- <script> new Vue({ el: '#app', data: { checkedNames: [] } }) </script>
-
v-model修饰符
【修饰符:修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():即阻止事件原本的默认行为,比如冒泡事件】v-model也可以和.lazy、.trim和.number这些修饰符一起使用。
<!-- 在每次 input 事件触发后将输入框的值与数据进行同步,添加 lazy 修饰符,从而转变为使用 change 事件,当焦点移出input时才会触发事件,输入框的值与数据才变成相同的 --> <input v-model.lazy="msg" > <!--去除字符串首尾的空格--> <input v-model.trim="msg"> <!--将数据转化为值类型--> <input v-model.number="age" type="number">
.lazy相当于一个延迟加载的过程。在上面我们讲过< input v-model=“test”>相当于一个语法糖< input :value=“test” @input=“test = $event.target.value”>,而< input v-model.lazy=“msg” >则相当将input的实时更新改为一个change事件,v-model.lazy只有当焦点移除input时才会触发事件。
(3). 条件渲染指令----v-if / v-show
<body>
<div id="app">
<input type="checkbox" v-model="checked">
<p v-if="checked">{{checked}}</p>
<p v-show="checked">{{checked}}</p>
</div>
<script type="text/javascript">
/*
v-if 语法
v-if = '表达式 ture 元素显示 false 元素不存在页面上
根据表达式的值的真假条件渲染元素和移出元素
v-show 语法 显示隐藏切换推荐使用
v-show = '表达式' ture 元素显示 false 元素display:none
根据表达式的值得真假,切换元素css display属性
*/
let vm = new Vue({
el:'#app',
data:{
checked:true
}
})
</script>
</body>
v-if和v-show的区别:
- v-if是动态的向DOM树中添加或删除DOM元素,当初始条件不成立时,v-if不会渲染DOM元素;不管初始条件是什么,v-show总会渲染元素,但是只是简单地基于 CSS 的display:none进行切换,设置当前DOM的显示和隐藏。
- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
(4). 列表循环指令----v-for
<template>
<div id="list">
<ul>
<!-- 注意:key的取值必须是number 或 string,不能是对象 -->
<!-- 而且使用 v-for 循环的每一项的值,都要保证唯一性 -->
<li v-for="(item,index) in list" :key="item.id">
{{index}}---{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:'list',
data(){
return{
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' },
]
}
}
}
</script>
- 为什么使用Key:
key是每一个vnode的唯一id,可以根据key,更准确, 更快的找到对应的vnode节点,diff算法中通过tag和key来判断是不是sameNode,如果是相同的节点,就不需要再次渲染了,使用key可以减少渲染次数,提升渲染效率。一般使用一个与业务相关的id作为key 值,而不使用 index,因为如果使用index作为key值,以前的数据和重新渲染后的数据随着 key 值的变化从而没法建立正确关联关系,导致 Vue 会复用错误的旧子节点,做很多额外的工作,这就失去了 key 值存在的意义. - v-if和v-for的优先级
v-for优于v-if被解析,如果同时出现,每次渲染都会执行循环再判断条件,无论如何循环都不可避免,浪费了性能
(5). 给元素绑定事件 ---- v-on
v-on用于给元素绑定事件,v-on:事件名 可以简写为 @事件名
<div class="app">
//1. 直接绑定事件
<button v-on:click="myclick">click me</button>
<!-- $event是vue里面的事件对象,vue能认识 -->
<button @click="second($event)">click me</button>
//2. 绑定事件类
<button v-on="{click:myclick,hover:second($event)}">click me</button>
</div>
<script>
var app = new Vue({
el:'.app',
data:{
},
methods:{
myclick:function(){
console.log(111111);
},
second:function(e){
e.preventDefault();
//阻止浏览器的默认行为
console.log(222222);
}
}
});
</script>
v-on的事件修饰符
- stop:停止冒泡
<div @click="upthis"> aaa <!-- 阻止事件冒泡 --> <div v-on:click.stop="doThis">bbb</div> </div>
- prevent:阻止默认行为
<form action='baidu'> <!-- 提交事件不再重载页面(不会跳转页面) --> <input @click.prevent="doThat"> </form>
- capture
<!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>
- once:只会触发一次
<!-- 点击事件将只会触发一次,防止重复提交 --> <a v-on:click.once="doThis"></a>
- 监听某个键盘的键帽
<!-- 键修饰符,键别名 --> <input @keydown.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keydown.13="onEnter">
- 修饰符可以串联
<!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>
2. computed / watch
对于Computed:
- computed的值会默认走缓存,只有依赖的数据发生了变化,才会重新计算。
- computed不支持异步,当Computed中有异步操作时,无法监听数据的变化。
- computed默认第一次加载的时候就会执行
- computed默认深度监听
- 当一个属性受多个属性影响的时候建议使用computed
对于Watch:
- Watch不支持缓存,监听数据变化时,就会触发相应的操作
- Watch支持异步监听
- wtach默认第一次加载的时候不做监听,需要设置immediate
- watch想要进行深度监听,需要设置deep。
- 当一条数据影响多条数据的时候建议使用watch
总结:
- computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
- watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
运用场景:
- 当需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算。
- 当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作 ( 访问一个 API ),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
Vue中的watch如何深度监听某个对象
watch除了监听data里的属性,也可以监听计算属性或者一个函数的计算结果。
- 深度监听对象的两种方式:
-
字符串嵌套方式
export default { data () { return { a: { b: { c :'张三' } } } }, watch: { //想监听 c 此时数据比较深 深度监听 "a.b.c": function (newValue, oldValue) { } } }
-
启用深度监听方式
export default { data () { return { a: { b: { c :'张三' } } } }, watch: { a: { // deep 为true //意味着开启了深度监听 //a对象里面任何数据变化都会触发handler函数 deep: true , handler(){ // handler是一个固定写法 } } } }
3. vue组件化
- 组件中的data为什么是一个函数?
一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同实例之间的data不冲突,data必须是一个函数。
组件之间通信的方法:
1.父子组件通信
(1). 父组件向子组件传值 ------ props,props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改父组件的状态。
例:
子组件
父组件
(2). 子组件向父组件传值 ------ $emit()自定义事件
例:
子组件
父组件
2. 使用$refs 获取实例组件,进行数据获取
3. 利用浏览器本地缓存
例如localStorage
4. 利用发布订阅模式
使用eventBus : $emit()和 $on进行跨组件传值 进而传递数据
$on : 监听当前实例上的自定义事件(此处当前实例为 bus,自定义事件是userDefinedEvent ) 。 事件由 $emit触发,回调函数会接收所有传入事件触发函数( $emit)的参数。
5. vuex
4. vue生命周期
vue生命周期是指vue实例对象从创建之初到销毁的过程
◾详细描述:
- beforeCreate: vue初始化开始,此时还不能访问到data、methods、computed、watch里面的数据和方法。
- created: vue实例创建完成,已经完成数据和方法的初始化,此时可以访问到data、methods、computed、watch里面的数据和方法了;
- beforeMount:模板已经在内存中编译好了,但尚未挂载到页面中去。
- mounted:DOM渲染完成,实例挂载到DOM上,此时可以获取到DOM节点并对其进行操做了。
- beforeUpdate: data中的数据是最新的,但页面还是旧的,页面尚未和数据保持同步;
- updated: 页面和data中的数据同步了,都是最新的。
- beforeDestroy: vue实例进入销毁阶段,但还没有真正执行销毁的过程,此时实力上所有的数据和方法等都还处于可用状态,该过程常用于销毁定时器、解绑全局事件、销毁插件对象等操作;
- destroyed:vue实例已被销毁,该vue示例中的所有东西都不可用了;
◾考虑父子组件的生命周期执行顺序:
- 实例初始化过程: 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程: 父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程 父beforeUpdate->父updated
- 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
◾keep-alive 独有的生命周期,分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数