Vue学习笔记

vue的基本使用

常用指令

<p>{{ message }}</p>//文本插值
<p>{{ flag? "yes":"no" }}</p>(只能是表达式，不能是js语句)
<p v-html="rawHtml"> </p>
rawHtml:'指令-原始 html <b>加粗</b> <i>斜体</i>'

computed 和 watch

computed会缓存，data不变就不会重新计算

<input v-model="xxx"/> 数据双向绑定

watch深度监听

watch:{
    name(oldval,newVal){
    console.log("watch name",oldval,newval);}//普通监听
    info:{
        handler(oldVal,newVal){
     console.log("watch info",oldVal,newVal);},
        deep:true;//深度监听}
}

class和style

使用动态属性

style使用驼峰式写法

v-if与v-show的区别

v-if是在dom层面决定显示与不显示，性能消耗大，适用于一次性修改或者很少变动的情况

而v-show会渲染对应内容的dom节点，只是通过更改元素的display属性来进行“显示或隐藏”，性能消耗小，适用于频繁修改元素的情况

循环（列表）渲染

<li  v-for="(val,key,index) in listObj" :key="key">

{{index}}-{{key}}-{{val}}

</li>

事件修饰符

阻止单击事件继续传播
<a v-on:click.stop="doThis">  </a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></from>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis"></div>
<div v-on:click.capture="doThat"></div>

按键修饰符

//当ctrl键按下时会触发
<button @click.ctrl="onClick">A</button>

//有且只有ctrl键按下时会触发
<button @click.ctrl.exact="onCtrlClick">A</button>

//没有任何系统修饰符被按下的时候才触发
<button @click.exact="onClick">A</button>

表单

v-model:实现数据双向绑定

常见表单项：textarea，radio，select，checkbox

修饰符：lazy(输入完成以后，值才会变化)

              trim(首尾去掉空格)

              number（自动转化为数字）

Vue父子组件通信方式

父组件向子组件传递数据：props

<子组件   :属性=父传子数据/>

子组件向父组件传递数据

this.$emit(xxx,数据)

<子组件  @xxx="function(数据)"/>

兄弟组件之间的通信

 兄：event.emit('xxx自定义事件'，数据)；

 弟：event.on('xxx自定义事件',function(数据));

Vue生命周期

vue生命周期分为三个阶段：

挂载阶段

更新阶段

销毁阶段

生命周期函数：

beforeCreate（）

Created（）(组件初始化完毕，但是还没有渲染到页面)

beforeMount（）

Mounted（）（组件已经渲染到页面上，渲染完成）

beforeUpdate()

Updated()

beforeDestory()

Destoryed()

Vue知识点

$nextTick()待DOM渲染完再回调

refs可以用来调用元素

<div ref=xxx></div>

let mydiv=this.$refs.xxx;