Vue生命周期_Vue指令

Vue声明式基本实例

<script src="js/vue.js"></script>
<div class="box">
{{msg}}
</div>
<script>
    window.onload=function () {
        var v=new Vue({
            el:".box",//选择器   关联元素
            data:{//数据
            msg:"Hello Vue"
            }
        });
    }
</script>

首先引入vue.js文件，通过new的方式创建Vue对象，其中el表示element也是就元素，通过选择器关联元素。data是对象格式，用于存放数据，数据的作用域范围在所关联的元素之内可用。

vue实例化对象中传参对象中可用的参数

• el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
• data vue实例的数据对象
• methods vue实例的方法集合，
• watch 对变量进行监测

vue指令

1. v-model 和angular的ng-model一样

2. v-for 类似angular中的ng-repeat

   <div v-for="(item, index) in items"></div>
   <div v-for="(val, key) in object"></div>
   <div v-for="(val, key, index) in object"></div>
   

3. v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式，缩写：
4. v-text 绑定元素的innerText内容，和{{data}}一样
5. v-html 绑定的innerHTML内容
6. v-show 根据表达式之真假值，切换元素的 display CSS 属性。
7. v-if,v-else,v-else-if 根据表达式的值的真假条件渲染元素，例子可以官网API

8. v-on 给元素绑定事件,缩写@，修饰符用法可参考官网API

   1. 修饰符

      .stop - 调用 event.stopPropagation()。
      .prevent - 调用 event.preventDefault()。
      .capture - 添加事件侦听器时使用 capture 模式。
      .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
      .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
      .native - 监听组件根元素的原生事件。
      .once - 只触发一次回调。
      .left - (2.2.0) 只当点击鼠标左键时触发。
      .right - (2.2.0) 只当点击鼠标右键时触发。
      .middle - (2.2.0) 只当点击鼠标中键时触发。
      .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
      

9. v-pre 跳过这个元素和它子元素的编译过程

10. v-cloak 当元素结束编译指令则无效。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
11. v-once 只渲染元素和组件一次

vue生命周期

• beforeCreate 组件实例刚被创建，data属性还未初始化
• created 组件实例创建完成，DOM还未生成
• beforeMount 挂载之前
• mounted 挂载完成
• beforeUpdate 组件更新之前
• updated 更新之后
• beforeDestroy 在组件销毁之前调用
• destroyed 组件销毁后调用