Vue

Vue概述

　　是一套用于构建用户界面的渐进式框架

　　基本使用

　　

 模板语法

　　v-cloak：防止页面加载时出现闪烁问题

　　　　　　原理：先隐藏，替换好值之后再显示最终值

　　v-text：填充纯文本

　　v-text：填充HTML片段

　　v-pre：填充原始信息

　　v-once：执行一次性的插值

　　v-model：双向数据绑定

　　　　　　 原理：通过v-bind和v-on实现

　　v-on：用来绑定事件的

　　　　   如：v-on:click='num++'，可以缩写为@click='num++'

　　　　   也可以通过调用函数的方式使用，如@click='函数名'，@click='函数名()'，如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

　　　　　如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event，@click='函数名(参数一，参数二，$event)'
                  事件修饰符：为v-on提供事件操作以避免操作DOM节点

　　　　　　　　　　　<a v-on:click.stop="method"></a>，.stop可以阻止冒泡

　　　　　　　　　　　<a v-on:click.prevent="method"></a>，.stop可以阻止默认行为

　　　　　按键修饰符：.enter 回车键，<input v-on:keyup.enter='submit'>

　　　　　　　　　　　.delete删除键，<input v-on:keyup.delete='handle'>

　　　　　自定义按键修饰符：全局config.keyCodes对象

　　　　　　　　　　　　　　Vue.config.keyCodes.f1 = 112

　　v-bind：属性绑定

　　　　　　　　<a v-bind:href='url'>跳转</a>，可以动态绑定href属性

　　　　　　　　缩写，<a :href='url'>跳转</a>

　　　　　　样式绑定

　　　　　　　　绑定class

　　　　　　　　对象语法：<div v-bind:class="{active:isActive}"></div>，active为样式选择器，isActive为布尔类型，表示是否展示

　　　　　　　　数组语法：<div v-bind:class="[activeClass，errorClass]"></div>，activeClass及errorClass在data中绑定样式，数组绑定和对象绑定可以结合使用

　　　　　　　　绑定style

　　　　　　　　对象语法：<div v-bind:style="styleObject">绑定样式对象</div>

　　　　　　　　数组语法：<div v-bind:style="[styleObj1, styleObj2]"></div>

　　　分支结构

　　　　　v-if：多个元素 通过条件判断展示或者隐藏某个元素

　　　　　　　<span v-if="flag">
          　　　　　　 如果flag为true则显示,false不显示!
        　　　　  </span>

　　　　   v-show：<div v-show='flag'></div>，flag=true则显示，否则不显示

　　　　   v-show 和 v-if的区别：

 　　　　　　v-show本质就是标签display设置为none，控制隐藏
  　　　　　  v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
　　　　　    v-if是动态的向DOM树内添加或者删除DOM元素
   　　　　　 v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

　　　　循环结构

　　　　　　v-for遍历数组：

　　　　　　　　<li v-for='item in list'>{{item}}</li>

　　　　　　　　<li v-for='(item,index) in list'>{{ item + '---' + index}}</li>

　　　　　　　　Key的作用：帮助Vue区分不同的元素，从而提高性能

　　　　　　　　<li :key='item.id' v-for='item in list'>

　　　　　　v-for遍历对象：

　　　　　　　　<div v-for='(value, key, index) in object' ></div>

　　　　　　　　v-if和v-for结合使用：<div v-if='value==12' v-for='(value,key,index) in object'></div>

常用特性

　　表单修饰符

　　　　.number：自动将用户的输入值转为数值类型，<input v-model.number="age" type="number">

　　　　.trim：自动过滤用户输入的首尾空白字符，<input v-model.trim="msg">　　

　　　　.lazy：将input事件切换成change事件，在“change”时而非“input”时更新，<input v-model.lazy="msg" >

　　自定义指令

　　　　(无参)

　　　　Vue.directive('focus', {
      　　　　// 当绑定元素插入到 DOM 中。 其中 el为dom元素
     　　　　 inserted: function (el) {
            　　// 聚焦元素
            　　el.focus();
     　　　　}
　　　　});

　　　　<input type="text" v-focus>

　　　　(有参)

　　　　Vue.directive('color', {
　　　　　　bind: function(el, binding){
　　　　　　　　el.style.backgroundColor = binding.value.color;
　　　　　　　　}
　　　　});

　　　　<input type="text" v-color='msg'>

　　　　局部指令只需要在Vue实例中定义即可

　　计算属性

　　　　表达式的逻辑计算可能比较复杂，使用计算属性可以使模板内容更加简洁

　　　　计算属性用法：

　　　　computed: {

　　　　　　reverseString: function(){
　　　　　　return this.msg.split('').reverse().join('');
　　　　　　　　}
　　　　}

　　　　计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存

　　监听器

　　　　使用watch来响应数据的变化

　　　　一般用于异步或者开销较大的操作

　　　　watch 中的属性 一定是data 中 已经存在的数据

　　　　当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

　　　　watch: {

　　　　　　 //当firstName发生改变的时候，会触发watch

　　　　　　 firstName: function(val) {}

　　　　}

　　　　使用场景：验证用户名是否已经被使用

　　过滤器

　　　　Vue.js允许自定义过滤器，可被用于一些常见的文本格式化

　　　　过滤器可以用在两个地方：双花括号插值和v-bind表达式

　　　　过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

　　　　全局过滤器：

　　　　Vue.filter('lower', function(val) {
     　　　　 return val.charAt(0).toLowerCase() + val.slice(1);
    　　　});

　　　　局部过滤器：

　　　　filters: {
       　　　　 upper: function(val) {
         　　　　　　 return val.charAt(0).toUpperCase() + val.slice(1);
        　　　　}
     　　   }

　　Vue生命周期

　　　　beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了

　　　　created：在实例创建完成后被立即调用此时data 和 methods已经可以使用  但是页面还没有渲染出来

　　　　beforeMount：在挂载开始之前被调用   此时页面上还看不到真实数据 只是一个模板页面而已

　　　　mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子，数据已经真实渲染到页面上  在这个钩子函数里面我们可以使用一些第三方的插件

　　　　beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前，页面上数据还是旧的

　　　　updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，页面上数据已经替换成最新的

　　　　beforeDestroy：实例销毁之前调用

　　　　destroyed：实例销毁后调用

组件

　　概念及作用

　　　　组件 (Component) 是 Vue.js 最强大的功能之一

　　　　组件可以扩展 HTML 元素，封装可重用的代码

　　组件注意事项

　　　　组件参数的data值必须是函数同时这个函数要求返回一个对象

　　　　组件模板必须是单个根元素

　　　　组件模板的内容可以是模板字符串

　　组件命名方式

　　　　短横线：Vue.component('my-component',{})

　　　　驼峰式：Vue.component('MyComponent',{})

　　组件注册

　　　　全局注册：任何**vue实例**都可以用

　　　　　　Vue.component(组件名称, {
　　　　　　　　data: 组件数据
　　　　　　 　   template: 组件模板内容
　　　　　　})

　　　　　　使用：以组件名称作为标签使用

　　　　局部组件：只能在当前注册它的vue实例中使用

　　　　　　在components中使用

　　组件间传值

　　　　父组件向子组件传值

　　　　　　父组件发送的形式是以属性的形式绑定值到子组件身上

　　　　　　然后子组件用属性props接收

　　　　　　在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

　　　　子组件向父组件传值

　　　　　　 子组件用`$emit()`触发事件

　　　　　　`$emit()`：第一个参数为 自定义的事件名称，第二个参数为需要传递的数据

　　　　　　父组件用v-on 监听子组件的事件

　　　　兄弟组件传值

　　　　　　兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据  ，提供事件中心    var hub = new Vue()

　　　　　　传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)

　　　　　　接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名

　　　　　　销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

　　　　组件插槽

　　　　　　父组件向子组件传递模板内容，通过组件插槽，可以提高组件的可复用能力

　　　　具名插槽

　　　　　　具有名字的插槽 

　　　　　　使用 <slot> 中的 "name" 属性绑定元素

　　　　作用域插槽

　　　　　　父组件对子组件加工处理

　　　　　　既可以复用子组件的slot，又可以使slot内容不一致

　　　　路由

　　　　　　路由的本质就是一种对应关系，即根据url地址去访问对应的资源

　　　　　　前端路由是基于hash值的变化进行实现的，核心实现依靠一个事件，即监听hash值变化的事件

Vue Router

　　概念　

　　　　它是一个Vue.js官方提供的路由管理器，是一个功能更加强大的前端路由器

　　基本使用

　　　　1.导入js文件

　　　　

　　　　2. 添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签

　　　　　to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

　　　　

　　　　3.添加路由填充位（路由占位符）

 　　　　

 　　　　4.定义路由组件

　　　　

　　　　5.配置路由规则并创建路由实例

　　　　

　　　　6.将路由挂载到Vue实例中

　　　　

　　嵌套路由

　　　　当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容

　　　　实现：在父级组件的模板代码中，定义子级路由链路及子级路由占位符

　　动态路由匹配

　　　　使用$route.params.id来传递参数（不够灵活）

　　　　使用props来传递参数