整体结构
let vm = new Vue({
el:'#', // 需要操作的元素区域
data:{
msg:"需要显示到页面的数据",
msg1:"<h1>数据2</h1>",
msg2:"这是一个标签属性",
list:[1,2,3,4,5],
list2:[
id:1,name:'zs',
id:2,name:'ze',
id:3,name:'zi'
]
list3:{
id :1,
name: 'tom'
}
},
methods:{ // 这个属性定义了当前Vue实例中所有可用的方法
show(){ alert ('hi')},
divv(){},
btnn(){}
}
})
指令
v-cloak 解决插值表达式闪烁问题
<p v-clock>{{ msg ]}</p>
v-text 会覆盖元素中原本的内容， 但是插值表达式只会替换占位符
<p v-text="msg"></p>
v-html 可以输出html格式
<div v-html="msg1"></div>
v-bind 可以绑定html属性，只能实现单向绑定 model=>view 简写 :
<input type="button" value="按钮" v-bind:title="msg2"></input>
还可以直接在数据名后添加想要的属性值，例如
<input type="button" value="按钮" v-bind:title="msg2 + 'xxx'"></input>
v-on 绑定事件 简写 @
<input type="button" value="按钮" v-on:click="show"></input>
v-model 唯一的实现数据双向绑定的指令
input(radio text address emali) select checkbox textarec
<input type="button" v-model="msg" ></input>
v-for 循环数组 + key
<p v-for="item in list">{{ item }}</p>
对象数组
<p v-for="item in list2" :key="item">{{ item }}</p>
对象 在遍历键值队的时候 除了有 val key 还有 index索引
<p v-for="(val key index) in list3">{{ val }}--{{ key }}--{{ index }}</p>
迭代数字 ，起始值是1
<p v-for="count in 10">循环多少次</p>
v-if 每次都会重新删除或者创建元素，有较高的切换性能消耗 频繁切换 不要用
<p v-if="msg"></p>
v-show 只是切换了元素的display:none属性，有较高的初始渲染消耗 永远都不会显示给用户 不要用
<p v-show="msg"></p>
事件修饰符
html 整体结构
<div class="parent" @click="divv">
<input type="button" value="按钮" @click="btnn"></input>
</div>
.stop阻止冒泡
<input type="button" value="按钮" @click.stop="btnn"></input>
.prevent 阻止默认行为
<a href="网址" @click.prevent="方法"></a>
.captrue 触发事件捕获机制
<div class="parent" @click.capture="divv">
<input type="button" value="按钮" @click="btnn"></input>
</div>
.self 实现只有点击当前元素的时候才会触发事件处理函数
<div class="parent" @click.self="divv">
<input type="button" value="按钮" @click="btnn"></input>
</div>
.once 事件只触发一次行为
<a href="网址" @click.prevent.once="方法"></a>
在Vue中使用样式
使用class样式 + 内联
数组
<h1 class="['red','thin']"></h1>
数组+三元表达式
<h1 class="['red','thin'?'act': ' ']"></h1>
数组嵌套对象
<h1 class="['red','thin',{ 'act':xxx}]"></h1>
直接使用对象
<h1 class="{a:b,c:d}"></h1>
