v-model双向绑定数据
<input type="text" v-model="msg"> {{msg}} ###v-on 事件
<div id="box"><button v-on:click="say">按钮</button><button @click="say">按钮</button>
</div>
<script>new Vue({el: "#box",data(){return {}},methods: {say() {alert(111);}}})
</script>
v-html 能读取html标签
<div id="box"><div v-html="msg"></div>
</div><script>new Vue({el: "#box",data(){return {msg:"<h1>121212</h1>"}},methods: {say() {}}})
</script>v-class 类名
<style>.red {background: red;}.blue {width: 100px;height: 100px;background: blue;}</style><div id="box"><div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div><!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式--><!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>--></div><script>new Vue({el: "#box",data(){return {isred:false}}})</script>v-text读取文本不能读取html标签
<div id="box"><div v-text="msg"></div></div><script>new Vue({el: "#box",data(){return {msg:"11111"}},methods: {say() {alert(111);}}})</script> v-show 显示与隐藏
<div id="box"><div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>new Vue({el: "#box",data(){return {show: true}}})
</script>v-if显示与隐藏 （dom元素的删除添加 个人理解）
<div id="box"><div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div><script>new Vue({el: "#box",data(){return {show: true}}})
</script>v-else
<div id="box"><div style="width: 100px;height: 100px;background: black;" v-if="show"></div><div style="width: 300px;height: 300px;background: blue" v-else=""></div></div><script>new Vue({el: "#box",data(){return {show: true}}})</script>v-else-if
<div id="box"><div style="width: 100px;height: 100px;background: black;" v-if="show"></div><div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div><div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div><script>new Vue({el: "#box",data(){return {show: true}}})
</script>v-bind
<div id="box"><input type="text" v-bind:value="msg"><a :href="link">点击</a>
</div><script>new Vue({el: "#box",data(){return {msg: "12222",link:"1、v-model.html"}}})
</script>v-on 事件
<div id="box"><!-- v-on --><button v-on:click="say">按钮</button><!--<button @click="say">按钮</button>-->
</div><script>new Vue({el: "#box",data(){return {}},methods: {say() {alert(111);}}})
</script>v-once执行一次事件
<div id="box"><div v-once>{{msg}}</div>
</div><script type="text/javascript">new Vue({el:"#box",data(){return{msg:"qwdqwdqwd"}}})
</script>v-cloak防闪烁
<div id="box"><div v-cloak="">欢迎--{{msg}}</div>
</div><script>new Vue({el:"#box",data(){return{msg:"111111"}}})
</script>v-pre 把标签内部的元素原位输出
<div id="box"><div v-pre>欢迎--{{msg}}</div>
</div><script>new Vue({el:"#box",data(){return{msg:"111111"}}})
</script>总结
Vue简介
特点： mvvm m=mvc module 模型 v=view 视图 c=controller 控制器mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)vue1 双向数据绑定 vue2 单向数据流单页面应用v-model 数据绑定data 返回对象用 returnv-for 循环 格式 v-for="字段名 in(of) 数组json"v-show 显示 隐藏 传递的值为布尔值 true false 默认为falsev-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为falsev-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作用： 及时对页面的数据进行更改v-on 绑定事件 函数必须写在methods里面@click 快捷方法v-text 解析文本v-html 解析html标签v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'v-once 进入页面时 只渲染一次 不在进行渲染v-cloak 防止闪烁v-pre 把标签内部的元素原位输出原文地址：https://segmentfault.com/a/1190000016779036
更多专业前端知识，请上 【猿2048】www.mk2048.com
)
