Vue基础

Vue

中文教程：https://v2.cn.vuejs.org/v2/guide/

html中代码直接引入Vue

  <!-- 引入开发板js -->
  <script src="../js/vue.js"></script>

实例对象

 //创建Vue对象
    new Vue(
      {
        el: '#root',//el指定当前Vue实例为哪个容器服务，容器和实例一一对应
        data: {     //data用于存储数据，供指定的容器使用
          name: 'TGU'
        }
      }
    )

数据绑定

普通写法

单项数据绑定<input type="text" v-bind:value="name"><br>
双项数据绑定<input type="text" v-model:value="name">

v-bind应用在单项数据绑定

v-model应用在双向数据绑定，v-model只能应用在表单类元素上（输入类元素）

v-model:value可以简写为v-model

简写写法

单项数据绑定<input type="text" :value="name"><br>
双项数据绑定<input type="text" v-model:"name">

MVVM模型

​ 1.M：模型(Model)：data中的数据

​ 2.V：视图(View):模板代码

​ 3.VM：视图模型(ViewModel):Vue实例

其中：

​ 1.data中所有熟悉，都出现在了vm身上

​ 2.vm身上所有熟悉以及Vue原型的所有熟悉都可以在Vue模板中直接使用

数据代理

数据代理：通过一个对象代理另一个对象中属性的操作

Object.defineProperty

 Object.defineProperty(person,'age', {
           // value: 18,
           // enumerable: true, //此时代表这个属性是可以枚举的
           // writable: true, //代表可以重写该属性(控制属性是否被修改)
           // configurable:true, //控制属性是否可以被删除 默认为false


           //当读取person的age属性时get属性就会被调用，且返回值就是age的值
           //invoke property proxy映射数据代理
           get: function () {
               //测试它的调用情况
               console.log('@@@ GET AGE');
               //此时age的值依赖number的值
               return number
           },
           //当修改person的age属性时set(setter)属性就会被调用，且会收到修改的具体值
           set(v) {
               //测试
               console.log('CHANGE AGE');
               number=v;
           }
       });

vue中如何数据代理？

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

事件绑定

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

事件修饰

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

例如阻止默认事件：（修饰符可以连续写）

 <!--阻止默认事件（常用-->
  <a href="https://www.baidu.com" @click.prevent="showInfo" >点我提示信息</a>

键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

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

        3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
                    (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
                    (2).配合keydown使用：正常触发事件。

        4.也可以使用keyCode去指定具体的按键（不推荐）

        5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

computed: {
        fullName: {
          get() {
            return this.firstName + '-' + this.lastName;
          },
          set(value) {
            arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }
      }

监视属性

监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

 watch: {
     //监视的配置对象
	 //watch不仅能监视data的普通属性，也可以检测计算属性
        isHot: {
          immediate: true,
              //handler 什么时候调用呢
			  //当isHot发生改变就会调用该函数
        	  //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
          handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
          }
        }
      }

 vm.$watch('isHot', {
        immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
        //handler 什么时候调用呢
        //当isHot发生改变就会调用该函数
        //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
        handler(newValue, preValue){
            console.log('ishot 被修改了');
            console.log(`newValue: ${newValue}, preValue: ${preValue}`);
        }
    });

深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以(想让它可以则配置deep:true)！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

watch: {
        isHot: {
          immediate: true,
          handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
          }
        },
        numbers: {
          deep: true,//采用深度监视
          handler() {
            console.log('numbers被修改了');
          }
        }
      }

简写形式：

//完整写法
    // vm.$watch('isHot', {
    //     deep: true,
    //     immediate: true,
    //     handler(newValue, preValue){
    //         console.log(newValue, preValue);
    //     }
    // });
    //简写 (代价就是不能配置其他配置项deep immediate)
    vm.$watch('isHot', function (newValue, preValue){
        //this === vm
        console.log(newValue, preValue);
    })

computed和watch之间的区别：

​ 1.computed能完成的功能，watch都可以完成。
​ 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
​ 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
​ 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

异步操作时采用箭头函数，利用箭头函数this无指向，则向上查找，嵌套到vm控制的函数中

条件渲染

条件渲染：表达式为true时，条件可以渲染
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一定可以获取到。

 <template v-if="n === 1">
        <h2>你好</h2>
        <h2>shanghai</h2>
        <h2>shenzhen</h2>
    </template>

列表渲染

v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

 <div id="root">
  
    <ul >
      <li  v-for='(person, index) in persons' :key="index">
        {{index}}----{{person}}
      </li>
    </ul>

  </div>
  <script>
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#root',
      data: {
        persons: [
          { id: 001, name: '张三', age: 18 },
          { id: 002, name: '李四', age: 20 },
          { id: 003, name: '王五', age: 11 }
        ]
      }
    })
  </script>

key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

				1. 虚拟DOM中key的作用：
	key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

				1. 对比规则：
	(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
	①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
	②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​	(2).旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

				3. 用index作为key可能会引发的问题：
									1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
		会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
									1. 如果结构中还包含输入类的DOM：
		会产生错误DOM更新 ==> 界面有问题。

4.开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
使用index作为key是没有问题的。

列表过滤

当computed和watch都可以实现基本功能时优先考虑computed (重要)

监听实现：

//     //watch监听用户输入项keyword的变化
    //     watch:{
    //         keyword: {
    //            immediate: true, //上来就进行监视获得到的newV是''
    //            handler(newV){
    //                // console.log(newV)
    //                //不要修改元数据，这样只会越写越少
    //                //注意一个某个字符串.indexOf('')是0而不是-1(都包含空字符串)
    //      this.filPersons = this.persons.filter(p => p.name.indexOf(newV) !== -1);
    //            }
    //         }
    //     }

计算实现：

computed:{
        filPersons(){
          return this.persons.filter(p=>p.name.indexOf(this.keyword)!==-1)
        }
      }

数据监测：

如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)

Vue没有给数组元素配置get set方法，所以直接对数组元素进行修改，Vm检测不到改变

通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()

收集表单数据

收集表单数据：
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据，用于文本框输入完成后再交互
number：输入字符串转为有效的数字，用于控制文本框输入的交互数据位数值类型
trim：输入首尾空格过滤，用于如用户名去掉前后空格

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

内置指令

v-text指令：
1.作用：向其所在的节点中渲染文本内容。 (纯文本渲染)
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活

v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

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

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

自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结：
一、定义语法：
(1).局部指令：
new Vue({directives:{指令名:配置对象} }) 或 new Vue({directives: {指令名:回调函数}})
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

​ 二、配置对象中常用的3个回调：
​ (1).bind：指令与元素成功绑定时调用。
​ (2).inserted：指令所在元素被插入页面时调用。
​ (3).update：指令所在模板结构被重新解析时调用。

​ 三、备注：
​ 1.指令定义时不加v-，但使用时要加v-；
​ 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

  Vue.directive('fbind', {
        bind(el, binding){
            // console.log('bind')
            el.value = binding.value;
        },
        //指令被插入页面时
        inserted(el, binding){
            // console.log('inserted')
            el.focus();
        },
        //指令所在模版被重新解析时
        update(el, binding){
            // console.log('update');
            el.value = binding.value;
        }
    })

directives:{
            /**
             big函数的调用时机:
                    1.指令与元素成功绑定(但注意此时dom元素还没有成功的被弄到页面上去)时会被调用 (首次,类似于dom元素一加载)
                    2.指令所在的模版被重新解析时会被再次调用
            **/
            //两种写法:1.对象(key-value) 2.函数
            // 'big-number'(el,binding){
            //     console.log('big被调用啦！')
            //     //收到两个参数，第一个参数代表真实dom元素，第二个参数是绑定对象，关注该绑定对象中的value属性
            //     // console.log(el,binding);
            //     //原生dom的操作
            //     el.innerText = binding.value * 10;
            // },
            big(el,binding){
                console.log(this); //注意此处this===window vue实例对象此时'不管'你写在指令里面的函数了
                console.log('big被调用啦！')
                //收到两个参数，第一个参数代表真实dom元素，第二个参数是绑定对象，关注该绑定对象中的value属性
                // console.log(el,binding);
                //原生dom的操作
                el.innerText = binding.value * 10;
            },

生命周期

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。(click之类的原生事件依然会被调用)
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

 methods:{
            stop() {
                //只是清除了定时器，响应式仍然存在
                // clearInterval(this.timer);
                //暴力杀
                this.$destroy();
            }
        },

        //mounted
        //vue完成模版的解析并把初始的真实的dom元素挂载完毕就调用mounted函数
        //只调用一次
        mounted(){
            //关键性时刻调用对应的函数 生命周期
            console.log('mounted');
            this.timer = setInterval(() => {
                console.log('inter')
                //剪头函数没有this会从外部作用域寻找 mounted是由vue管理的函数，所以该函数中的this是vm(vue实例对象)
                this.opacity -= 0.01;
                if(this.opacity <= 0) this.opacity = 1;
            },16);
        },

        beforeDestroy() {
            console.log('vm要没了')
            clearInterval(this.timer);
        }
    });

非单文件组件

Vue中使用组件的三大步骤：
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component(‘组件名’,组件)

三、编写组件标签：

<school></school>

const school = Vue.extend({
      template: `

      <div>
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
      </div>

​      `,
​      data() {
​        return {
​          schoolName: '天津工业大学',
​          address: '天津市西青区宾水西道399号'
​        }
​      },
​      methods: {
​        showName() {
​          alert(this.schoolName)
​        }
​      },
​    })

​    //创建student组件
​    const student = Vue.extend({
​      template: `

      <div>
        <h2>学生名字：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2>
      </div>

​      `,
​      //组件定义不要写el配置项，因为最终所有的组件都要被vm所管理，由vm决定服务于哪个容器
​      //这里data必须写成函数形式 避免多次使用组件导致共用data对象导致一个问题
​      data() {
​        return {
​          //注意这里不要写箭头函数
​          studentName: '李金韬',
​          age: '23'
​        }
​      },
​    })
​    const hello = Vue.extend({
​      template: `

       <div>
        <h2>你好世界，我是{{name}}</h2>
      </div>

​      `,
​      data() {
​        return {
​          name: 'lijintao'
​        }
​      },
​    })
​    Vue.component('hello', hello)//全局注册hello 就代表所有的vm都可以用hello组件了
​    new Vue({
​      el: '#root',
​      data: {
​        msg: 'Hello Tgu',
​      },
​      components: {
​        school,
​        student
​      }
​    })
​    new Vue({
​      el: '#root2',
​    })

几个注意点：
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

​ 2.关于组件标签:
​ 第一种写法：

<school></school>

​ 第二种写法：

<school/>

​ 备注：不用使用脚手架时，会导致后续组件不能渲染。

​ 3.一个简写方式：
​ const school = Vue.extend(options) 可简写为：const school = options

创建文件的简写：

 //创建组件的简写 (不需要vue.extend)
    const hello = {
        template: `
          <div>
            <h1>{{ msg }}</h1>
         </div>
        `,
        data(){
            return {
                msg:"hello"
            }
        }
    }

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！注意这一点很重要

4.关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。 vm管理着一个又一个vc，vc可以再
6.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
所以vm与vc属性配置并不是一模一样，尽管vc底层复用了很多vm的逻辑

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！注意这一点很重要

4.关于this指向：
(1).组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。 vm管理着一个又一个vc，vc可以再
6.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
所以vm与vc属性配置并不是一模一样，尽管vc底层复用了很多vm的逻辑

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

[外链图片转存中…(img-0PIkl9gm-1705632178674)]