Vue指令详解：文本渲染、数据绑定与条件渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/acm_cn1234567890/article/details/120695764

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用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind绑定数据
2. v-on给当前元素绑定事件
自定义v-model

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 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 )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

computed是怎么收集依赖的
 对watch的理解

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是一个固定写法
               }
           }
       }    
  }

Vue-给对象新增属性（使用Vue.$set()）

3. vue组件化

组件化

组件中的data为什么是一个函数？
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同实例之间的data不冲突，data必须是一个函数。

组件之间通信的方法：

1.父子组件通信

(1). 父组件向子组件传值 ------ props，props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改父组件的状态。
例：
子组件
在这里插入图片描述
父组件

(2). 子组件向父组件传值 ------ $emit()自定义事件
例：
子组件

父组件

2. 使用$refs 获取实例组件,进行数据获取

3. 利用浏览器本地缓存

例如localStorage

4. 利用发布订阅模式

使用eventBus : $emit()和 $on进行跨组件传值进而传递数据
new
first

second
$on : 监听当前实例上的自定义事件(此处当前实例为 bus，自定义事件是userDefinedEvent ) 。事件由 $emit触发，回调函数会接收所有传入事件触发函数( $emit)的参数。

5. vuex

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 钩子函数