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