VUE基础（部分）

VUE

1. 概述：Vue是一款前端渐进式框架，可以提高前端开发效率。它是依据MVVM模式进行开发的，所谓MVVM（Model View View-Model）是通过视图与模型的双向绑定，简化前端操作。

2. vue.js的使用：引用时可以引用在线的vue.js，也可以离线下载vue.js并导入到项目中，还可以使用npm包资源管理器下载vue.js。下载命令为npm init -y（初始化环境）、npm install vue --save（下载vue模块）。

3. vue的使用

   • 获取数据：使用插值表达式{{}}来获取数据，可以在插值表达式中调用实例的数据属性和函数

     • 格式：{{定义好的属性名称}}
     • 注意：该表达式支持JS语法，可以调用js内置函数但必须要有返回值

   • 创建vue实例

   • 常用指令

     1. v-text：将内容当做普遍文本输出到元素中
     2. v-html：将内容中出现的html标签进行渲染并展示到页面中
     3. v-model：双向绑定，当标签属性中使用v-model属性并指定了属性名称时，该标签显示的数据发生改变时，获取该属性名称的值随之发生改变，反之亦可。
        • v-model的可使用的元素（input、select、textarea、checkbox、radio、components）
        • 注意：
          1. 多个checkbox对应一个model时，model的类型是一个数组；单个checkbox值是boolean类型的值
          2. radio对应的值是input的value值
          3. input和textarea默认对应的model是字符串
          4. select 单选对应字符串；多选对应数组
     4. v-on：事件处理，令用于给页面元素绑定事件
        • 语法：v-on:事件名="js片段或函数名"或@事件名="js片段或函数名"
        • 事件修饰符：修饰符是由点开头的指令后缀来表示的，常见的事件修饰符如下：
          1. .stop：阻止事件冒泡
          2. .prevent：阻止默认事件发生
          3. .capture：使用事件捕获模式
          4. .self：只有元素自身触发事件时才执行（冒泡或捕获的都不执行）
          5. .once：只执行一次
     5. v-for：对数组或对象进行遍历
        • 遍历数组语法：
          • v-for="item in items"，参数items：要遍历的数组，需要在vue的data中定义好；参数item：循环变量
          • v-for="(item,index) in items"，参数items：要迭代的数组；参数item：迭代得到的数组元素别名；参数index：迭代到的当前元素索引，从0开始
        • 遍历对象语法：
          • v-for="value in object"或v-for="(value,key) in object"或v-for="(value,key,index) in object"
          • 注意：当1个参数时，得到的是对象的值；当2个参数时，第一个是值，第二个是键；当3个参数时，第三个是索引，从0开始。
     6. v-if：条件判断，当得到结果为true时，所在的元素才会被渲染。
        • 语法：v-if="布尔表达式"
        • 注意：
          1. 当v-if和v-for出现在一起时，v-for优先级更高。换言之，会先遍历再判断条件。
          2. 可以使用 v-else 指令来表示 v-if 的else部分。
          3. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
     7. v-show：根据条件展示元素，通过该指令可以实现文本内容的隐藏
     8. v-bind：可以对所有元素的属性设置vue实例的数据
        • 语法：v-bind:属性名="Vue中的变量"或者:属性名='属性值'

   • 计算属性

     • 概念：Vue中提供了计算属性，来替代复杂的表达式。计算属性本质就是方法，但是一定要返回数据，然后页面渲染时，可以把这个方法当成一个变量来使用。
     • 当在html中对日期的毫秒值进行格式化时，若不使用vue将会产生大量的代码，而使用vue时，则需要使用computed计算属性里面的方法进行处理，此时代码量相对于html而言要简单很多。
     • computed计算属性的应用场景：可以应用在插值或者指令表答式复杂的时候，可以将一些属性数据经过方法处理之后返回。

   • watch与深度监控

     • watch可以让我们监控一个值的变化，从而做出相应的反应。若监控的是一个对象，需要进行深度监控，才能监控到对象中属性的变化。

   • 钩子函数：创建vue实例时可以指定模板id、数据和方法。当在实例化、模板渲染的过程中需要执行一些其它操作时就可以使用钩子函数来进行操作。钩子函数会在vue实例的各个生命周期阶段自动调用。

     • 常见的钩子函数：beforeCreate、created、beforeMount、mounted、updated、beforeUpdate、destroyed、beforeDestroy。
     • 注意：created钩子函数常用于初始化数据；钩子函数不能使用箭头函数的方式编写。