Vue-基础

v-text 绑定为元素的文本值	<div v-text="innerText"></div>
v-html 绑定元素的html内容，解析里面的标签	<div v-html="innerHtml"></div>
事件	@click=
v-οnclick=‘fn’	<button v-on:click="clickbtn">按钮</button>
@click=‘fn’	<button @click="clickbtn2">按钮2</button>
if 判断	v-if="!item.isfinish
绑定属性v-bind	<button v-bind:title="title">按钮</button> / <button :title="title">按钮</button>
动态类	:class="动态classname"
绑定多个类名称	<div :class="{'add':true,'addcolor':false}></div>"
绑定样式	<div :style="{'width':w+px,'height':h+'px','background-color':'red'}></div>"
双向数据 v-model	<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
–	–

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

v-for 指令循环
    item 当前的遍历值
    index 当前值的索引
    :key  绑定唯一键
    -->
    <ul>
      <li v-for="(item,index) in object" :key="index">
        <b>索引：{{index}}</b>
        <b>名称：{{item.name}}</b>
        <b>性别：{{item.sex}}</b>
        <b>年龄：{{item.age}}</b>
        <b>
          爱好：
          <span v-for="(hob,cindex) in item.hobby" :key="cindex">{{cindex+1+"."+hob}}</span>
        </b>
      </li>
    </ul>

<!-- class类名称的动态绑定 v-bind -->
<div :class="defaultstyle"></div>
<!-- 绑定多个类名称   里面使用{}-->
<div :class="{'add':true,'addcolor':isadd,'changecolor':!isadd}"></div>
<!-- 直接绑定样式 -->
<div :style="{'width':sw+'px','height':sh+'px','background-color':'red'}"></div>