Vue基本指令和事件

1.差值表达式 {{ }}

使用双大括号（Mustache) 语法: "{{ }}" 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来,在初识vue.js中的入门案例就是这种方式
在{{}}差值表达式中除了可以绑定vue对象的属性值之外还可以进行简单的运算。


  {{number/10}}
  {{ok?'好':'坏'}}
  {{name}}

2.问题

{{ }}差值表达式的方式可能会出现闪烁的问题，用户体验不好
解决方案：

采用 v-cloak 配合 [v-cloak]{display:none}
采用 v-text 方式

区别：v-text会替换掉要展示数据位置的内容，差值表达式只会替换掉{{}}位置的内容

  
            {{message}}

3.v-html

v-html顾名思义，主要是为了将Vue对象中带有html标签的数据，注入到挂载目标中

4.v-bind

v-bind可以通过vue绑定设置html标签的属性值，简写方式为:+属性值


        百度
        京东

5.v-if

v-if可以根据vue的属性值决定标签的显示隐藏



 显示这段文本

6.v-show

v-show可以根据vue的属性值决定标签的显示隐藏



 显示这段文本

7.v-show和v-if的区别

v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做，直到条件第一次为真的时候才会开始渲染条件块。
相比之下,v-show 就简单得多，不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点。

8.v-for

v-for是用来将vue对象中的数据通过遍历的方式在挂载目标中填充
:key 对应类型是能是number或者string


        {{ item}}
        
        {{item.name}}

9.v-model 只适用于表当元素

v-model可以实现vue对象和挂载目标的双向数据绑定,这里的示例是修改输入框的内容，下面的值也会随之改变


        
        {{name}}

10.v-bind:class和v-bind:style(:class和:style)

v-bind:class="head"可以实现动态的决定挂载目标中是否需要样式
同时class的绑定支持数组的格式
v-bind:class=["head","footer"]

v-bind:style可以实现内联样式的绑定


 文本<／div>

大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写上面的示例：


 文本<／div>

11.filters(过滤器)

Vue. 支持在{{}}插值的尾部添加一小管道符 "|" 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置





    
    
    
    Document
    




    
    
        {{ date | formatDate}}

过滤器也可以串联，而且可以接收参数，例如：


{ { message | filterA | filterB } } 

 {{ message | filterA （ 'argl '，' arg2 ')}}

12.computed(计算属性)

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，计算属性就是为解决这个问题的

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要计算的值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。


 {{getResult}}

13.vue中的事件

在vue对象中，通过methods声名方法的集合，内部可以包含多个方法，在挂载目标中可以通过v-on:事件名称或者简写方式@事件名称来指向methods中的方法实现绑定

14.事件修饰符

.stop防止事件冒泡行为

.prevent 阻止默认行为事件修饰符

.self 私有事件修饰符

只有在元素本身触发时才触发事件





    
    
    
    Document

.capture 捕获事件修饰符





    
    
    
    Document

.once:只触发一次的事件修饰符





    
    
    
    Document

生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使用过 jQuery，一定知道它的 ready（）方法，比如以下示例：

$( document).ready (function() {
 // DOM 加载完后，会执行这里的代码 
}

来一张官网的图片

图片.png

Vue 的生命周期钩子与之类似，比较常用的有：
• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用．
• mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它的 Vue 实例：

var app =new Vue({
el : '#app',
mounted: function () {
     //vue挂载成功后执行
 },
beforeDestroy() {
     //vue销毁之前执行
}

Vue.js 只支持单个表达式，不支持语句和流程控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用 Vue 白名单内的全局变量，例如 Math 和 Date。以下是一些无效的示例：


 {{var book = 'Vue.js'}} 

{{ if (ok) return msg }}