Vue基本代码结构
1.引入vue.js文件
<script type="text/javascript" src="js/vue.js" ></script>
2.创建Vue对象
el代表选中的区域，data为数据
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123'
}
})
</script>
3.插值表达式与v-cloak
双括号{{msg}}会将数据绑定在对应标签上
<p>{{msg}}</p>
当客户端网速慢时，浏览器会先显示{{msg}}，等到js文件加载完毕才显示对应数据，为了解决闪烁问题使用v-cloak标签
<style>
[v-cloak]{
display: none;
}
</style>
<p v-cloak>{{msg}}</p>
4.v-text 和v-html指令
默认v-text是没有闪烁的，会覆盖元素中的原本内容
v-html会加载数据中的html
<h4 v-text="msg"></h4>
<div v-html="msg2"></div>
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123',
msg2:'<h1> 我是一个h1标签</h1>'
}
})
</script>
image.png
5.v-bind
v-bind是Vue中，提供的用于绑定属性的指令，可以简写为：，在v-bind中可以写合法的js表达式
<input type="button" value="按钮" title="提示信息" />
<input type="button" value="按钮" v-bind:title="msg3" />
<input type="button" value="按钮" :title="msg3+123" />
6.v-on
v-on是事件绑定指令,可以用@简写
<input type="button" value="事件绑定" v-on:click="show" />
<script>
var vm=new Vue({
el: '#app',
data: {
msg:'123',
msg2:'<h1> 我是一个h1标签</h1>',
msg3:'这是提示信息'
},
methods:{
show:function(){
alert('hello')
}
}
})
</script>
7.v-for
v-for可以循环遍历普通属猪。对象数组，对象，迭代数字.key属性只能使用number或者string 且唯一。必须使用v-bind绑定
<p v-for="item in list" v-bind:key="item.name">
<input type="checkbox" />{{item.id}}----{{item.name}}
</p>
8.v-if和v-show
v-if的特点是每次都会重新创建和删除元素，有较高的切换性能消耗，而v-show是对DOM的操作，切换了display:none样式，有较高的初始渲染消耗
