vue2
1.变量
1 <div id="app"> 2 {{msg}} 3 </div> 4 <script> 5 const app = new Vue({ 6 el: '#app', 7 data() { 8 return { 9 msg: 'hello', 10 } 11 }, 12 }); 13 </script>
2.v-if
<div id="app"> <div v-if="isGood" >Good</div> <div v-else>Bad</div> </div> <script> new Vue({ el:'#app', data() { return { isGood: true, } }, }); </script>
v-show
<div id="app"> <div v-show="isOK">ok</div> </div> <script> new Vue({ el:'#app', data() { return { isOK:false, } }, }); </script>
v-for
1 <div id="app"> 2 <ul> 3 <li v-for="(item,index) in items"> 4 {{item}} 5 </li> 6 </ul> 7 <table > 8 <tr ><th>name</th><th>age</th></tr> 9 <tr v-for='stu in students'> 10 <td>{{stu.name}}</td><td>{{stu.age}}</td> 11 </tr> 12 </table> 13 </div> 14 <script> 15 new Vue({ 16 el:"#app", 17 data() { 18 return { 19 items: [20,23,18,65,32], 20 students:[ 21 {name:'jspang',age:32}, 22 {name:'Panda',age:30}, 23 {name:'PanPaN',age:21}], 24 } 25 }, 26 }); 27 </script>
v-text & v-html
1 <div id='app'> 2 <span>{{msg}}</span> =<div v-text="msg">1</div> 3 <div v-html="msgHtml"></div> 4 </div> 5 <script> 6 new Vue({ 7 el:'#app', 8 data() { 9 return { 10 msg: "hello", 11 msgHtml:'<h1 style="color:red;">Html</h1>' 12 } 13 }, 14 }); 15 </script>
v-on
1 <div id='app'> 2 得分:{{count}}<br> 3 <button class="btn btn-sm btn-danger" @click="add">+</button> 4 <button class="btn btn-sm btn-danger" @click="sub">-</button> 5 <input type='text' @keyup.enter="finish" v-model="num"> 6 </div> 7 <script> 8 new Vue({ 9 el:'#app', 10 data() { 11 return { 12 count: 0, 13 num:0, 14 } 15 }, 16 methods: { 17 add(){ this.count+=1; }, 18 sub(){ this.count-=1; }, 19 finish(){//回车时转换成Int赋值 20 this.count=parseInt(this.num); 21 } 22 }, 23 }); 24 </script>
v-model 双向绑定
1 <div id="app"> 2 <div class='input-group mb-3'> 3 <input type="text" class="form-control " v-model="msg"> 4 正常双向绑定:{{msg}} 5 </div> 6 <div class='input-group mb-3'> 7 <input type="text" class="form-control " v-model.lazy="msg"> 8 回车显示双向绑定:{{msg}} 9 </div> 10 <div class='input-group mb-3'> 11 <input type="text" class="form-control " v-model.trim="msg"> 12 前后去空格双向绑定:{{msg}} 13 </div> 14 文本域:<textarea cols="3" rows="2" class="form-control" v-model="msg"></textarea> 15 check单选:<br> 16 请选择:<input type="checkbox" v-model="isTrue"> 17 {{isTrue}}<br> 18 check多选:<br> 19 上海:<input type="checkbox" v-model="city" value="上海"> 20 北京:<input type="checkbox" v-model="city" value="北京"> 21 {{city}}<br> 22 单选框:<br> 23 男:<input type="radio" v-model="sex" value="男"> 24 女:<input type="radio" v-model="sex" value="女"> 25 {{sex}} 26 </div> 27 <script> 28 new Vue({ 29 el:'#app', 30 data() { 31 return { 32 msg: '666', 33 isTrue:false, 34 city:[], 35 sex:'', 36 } 37 }, 38 }); 39 </script>
v-bind
1 <div id='app'> 2 <img :src="vbind_src" > 3 <a :href="vbind_href" :style="vbind_css" >naver</a> 4 </div> 5 <script> 6 new Vue({ 7 el:'#app', 8 data() { 9 return { 10 vbind_src: "vue.jpg", 11 vbind_href:'www.naver.com', 12 vbind_css:'color:red', 13 } 14 }, 15 }); 16 </script>
v-pre & v-cloak & v-once
1 <div id="app"> 2 <!--v-pre:不渲染,直接输出原始值--> 3 <div v-pre>{{msg}}</div> 4 <!--DOM渲染完显示--> 5 <div v-cloak>{{msg}}</div> 6 7 <div v-once>只有初次DOM渲染完显示{{msg}}</div> 8 <input type="text" class="form-control" v-model="msg"> 9 </div> 10 <script> 11 new Vue({ 12 el:'#app', 13 data() { 14 return { 15 msg: 'hello', 16 } 17 }, 18 }); 19 </script>
