new Vue({ el: "#box", // element(元素) 当前作用域 id="box" data(){ return { //用return返回对象 msg: "122" } } })
v-model 表单控件双向绑定数据
<input type="text" v-model="msg"/>{{msg}} <!--取数据-->
v-for循环
<div id="box"> <ul> <!--ng-repeat--> <li v-for="item in arr"> <span>{{item.name}}</span> <span>{{item.age}}</span> </li> </ul> </div> <script type="text/javascript"> new Vue({ el:'#box', data(){ return{ // arr:['module','views','controlle','aaaaa'] arr:[ {"name":"xiaohong1","age":12}, {"name":"xiaohong2","age":12}, {"name":"xiaohong3","age":12}, {"name":"xiaohong4","age":12} ] } } }) </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-bind 用于绑定 html 属性 缩写 :value=""
<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-text 读取文本不能读取html标签
<div id="box"> <div v-text="msg"> </div> <script> new Vue({ el: "#box", data(){ return {msg:"11111"} }, 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-bind:class 类名
<div id="box"> <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div> </div> 当isred = true时class的值是red new Vue({ el: "#box", data(){ return { isred:false } } })