vue 语法

v-show 显示 / 隐藏
v-if 类似 条件满足组件挂载 / 组件的卸载
获取元素目标 let target = event.currentTarget

绑定变量

<div>{{obj.name}}</div>

1. v-text 绑定为元素的文本值
   <div v-text="innerText"></div>
2. v-html 绑定元素的html内容，解析里面的标签
   <div v-html="innerHtml"></div>

循环渲染数组类型的数据v-for

arr=[
{id:1,name:'trankle',hobby: ["篮球", "乒乓球"]},
{id:2,name:'robby',hobby: ["篮球", "乒乓球"]},
{id:3,name:'mark',hobby: ["篮球", "乒乓球","游泳"]}
]
<li v-for:"(val,ind) in arr" :key="ind">
	我是第{{(ind+1)}}个，我的名字是{{val.name}},我的爱好有
	<span v-for:"(val2,ind2) in val.hobby" :key="ind2">{{(ind1+1)+". "+val2}}</span>
</li>

if 判断 v-if="!item.isfinish

绑定属性v-bind

<button v-bind:title="title">按钮</button>
<button :title="title">按钮</button>

类名称

<button class="btn" ></button>

1. 动态类
   :class="动态classname"
2. 绑定多个类名称
   <div :class="{'add':true,'addcolor':false}></div>"
3. 绑定样式
   <div :style="{'width':w+px,'height':h+'px','background-color':'red'}></div>"

事件 @click=

v-οnclick=‘fn’ <button v-on:click="clickbtn">按钮</button>
@click=‘fn’ <button @click="clickbtn2">按钮2</button>

1. 事件的修饰符
   @click.once 事件一次行为
   @click.self 自身触发行为
   @click.capture 事件捕获行为 // 委托
   @click.stop 阻止冒泡行为
   @click.prevent 阻止事件默认行为
   @click.passive 永远阻止事件默认行为
2. this指针
   事件里面的this 指当前vue-component 组件
3. event执行参数
   和js 里面的事件参数是一致的
4. 点击的目标元素
   e.target e.srcElement

双向数据 v-model MVVM(model view)

<input type='text' @change='fn' v-model='username />'
单项数据 :value=
<input type="text" @change="changeName" :value="username" />

获取JS对象 ref

ref获取DOM元素节点:虚拟DOM
<button @click="getDom" refs='refele'> <button/>
let refs=this.$refs.refele;// 原生js dom

获取 jQuery对象

	安装jquery  cnpm install jquery --save-dev 安装到  devDependencies
	安装    cnpm install jquery --save  安装到dependencies
	script引用   import $ from 'jquery'

$(refs)

事件的委托

    <!-- 事件的委托 -->
    <ul @click="navmethod">
      <li>我是第一个li</li>
      <li>我是第二个li</li>
      <li>我是第三个li</li>
    </ul>
navmethod(e) {
      // 事件的委托 父元素事件委托给子元素执行
      let node = e.target;
      if (node.nodeName.toLowerCase() == "li") {
        console.log(node);
      }