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
}
)
