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 钩子函数
扫一扫
2634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
