Vue.js的指令、生命周期钩子与数据选项

vue.js官网：https://cn.vuejs.org/v2/guide/components-registration.html

一、常用指令

v-if ... v-else：

　　作用：控制元素是否显示（销毁与创建，性能与v-show要低一些）

　　格式：

　　　　<div v-if="isShow" ></div>  //isShow是定义的一个bool值(true/false)

　　　　<div v-else></div>  //v-else要与v-if紧贴，否则无效　

v-show：

　　作用：控制元素是否显示（控制DOM元素的 display 属性，性能优于 v-if）

　　示例：

　　　　<div v-show="isShow"></div> //isShow是定义的一个bool值(true/false)

 

v-for：循环

　　作用：基于源数据多次渲染元素或模板块

　　示例：

　　　　<div v-for="item of items">{{item}}</div>  //items需要是一个可迭代的对象（数组或者对象），item of items  比 item in items 更优，建议使用 of 关键字

 

v-bind（具体使用方式参考Vue API中的指令相关）：

　　作用：绑定一个js表达式，类似单项数据绑定，可以绑定 Style样式、Class 样式类等等（当数据发生变化时会重新渲染）

　　简写：:

　　示例：

　　　　· 绑定 Sytle 样式

<div id='app' :style="divStyle"></div>   
new Vue({
    el:'#app',
    data : { 
        divStyle : { background:red } 
    }
})        

　　　　

v-model：

　　作用：双向数据绑定，当元素的值或者data中的值发生变化时，可以使用属性监听[watch]来做相关的处理）

　　实例：

<input type='text' v-model='content'></div>

new Vue({
　el:"#app,
　watch:{
    　content () {
　　　// 这里是属性发生变化需要处理的内容
　　　}
    }
})

 

v-on:

　　作用：绑定给一个事件，如：<div v-on:click="handleClick"></div>

　　简写：@，如绑定一个click事件可以写为：<div @click="handleClick"></div>

　　示例：

<div id="app"><div @click="handleClick"></div></div>

new Vue({
　 el:"#app,
　 methods:{
        handleClick () {
    　 //这里是div触发的点击事件逻辑
　     }
　　}
})

　　

 

v-html、v-text：

　　作用：

　　　　v-html：用户绑定的内容不做转换，直接输出（更新元素的 innerHTML）

　　　　v-text：所有内容全部转换为字符串

　　注意：不要使用在任何用户输入的组件中使用 v-html（如果用户输入的是html或js代码，则可能会造成XSS攻击，因为不会进行转义）

　　示例：　　

<div id="app"> 
　　<div v-html="inhtml"></div> <!-- v-html：html会被浏览器渲染 -->
　　<div v-text="inhtml"></div> <!-- v-text：直接当做字符串输出 -->
<div>

new Vue({
　el:'#app',　　　
   data : { 
        inhtml:"<div style="width:20px;height:20px;background:red;"></div>" 
    }
})

 

v-once:

　　作用：只渲染模板一次，用于性能优化（当模板需要重新渲染时，认为该元素为静态元素直接跳过）

　　此指令无表达式：<div v-once></div> //会当做静态元素，只渲染一次

 

二、生命周期钩子

　　1> Vue的生命周期钩子示意图

　　

　　2> 使用/引用格式：

html:
<div id="app"></div>

script:
var  vm = new Vue({
   el:"#app",
　　data {},
   beforeCreate () {},
   created () {},
   beforeMount () {},
   mounted () {},
   ...... 
})

　　3> 使用：keep-alive 标签后，会产生两个新的生命周期钩子

　　　　· activated：组件被激活或重新渲染时调用（在某些需要重复加载的情况下，可以替代mounted钩子的作用）

　　　　· deactivated：组件被移除时调用

　　　　注意：使用该标签后，mounted执行一次后，会缓存到页面中不会在执行

 

三、Vue数据定义与接收 （data、prop，【计算属性、属性监听、方法定义未包含在内】） 

　　1. data 数据定义

　　　　·在Vue实例中定义data

var vm = new Vue({
  el:"#app",
  data : {
    data1 : "test"
    data2 : {
      key1:'value1'
    } 
    ......
  }
})

　　　　· 在Vue的子组件中定义data

/* 注册一个全局组件：my-component-name */
Vue.components("my-component-name",{
   /* 组件中定义数据，需要定义一个函数并返回一个对象 */
   data () {
     return {
      /* 在这里定义一些数据 */
    }
  }
})    

　　2. 接收父组件传入的数据（Prop）

html:
    <div id="app">
      <my-component :data1="data1"></my-component>
    </div>

script:
父组件：
       var MyComponent = {
           /* {{data1}}:插值表达式 */
           template : "<div>{{data1}}</div>"
          //props:{ data1:String }  /* 方式1：以对象的方式接收数据，并限制类型必须为String 建议方式1 */
         props:[ 'data1' ]  /* 方式2：以列表的方式接收数据，不限定数据类型 */
       }

        var vm = new Vue(
            el:"#app",
            data : {
              data1:'这是父组件传入的值'
            }
            /* 注册局部组件 */
            components: {
                MyComponent
            }    
        )