vue常用内置指令

来源：互联网发布：迅雷淘宝充值卡号密码编辑：程序博客网时间：2024/06/04 19:29
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>vue常用内置指令</title>        <style>        </style>    </head>    <body>    <!--数据绑定-->        <div id="app">{{msg}}<div v-text='msg'></div>  <!--数据绑定--><div v-html='msg'></div>  <!--数据绑定 能读取html标签--></div><!-- 双向数据绑定 --><div id="app1"><input type="text" v-model='msg' placeholder="edit me" /> <p>Message is: {{ msg }}</p></div><div id='app2'><!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- class 绑定 表达式成立则显示这个class或属性--><div :class="{ red: isRed }">v-bind</div><div :class="[classA, classB]">v-bind</div><!-- 传递类名--><div :class="[classA, { classC: isB, classD: isC }]"></div></div><div id='app3'><div v-if="type === 'A'"> A </div> <!-- 原理：创建标签; --><div v-else-if="type === 'B'"> B </div><div v-else-if="type === 'C'"> C </div><div v-else> Not A/B/C </div><div v-show='false'>asdasdasd</div> <!-- 原理：display: none; --><div v-if="type === 'A'"> A </div> <!-- 原理：创建标签; --><div v-else> B </div></div><div id='app4'><div v-for="item in items1">  {{ item.name }}{{ item.age }}</div><div v-for="(val, key) in items2">  {{ key }}：{{ val  }}</div></div><div id="app5"><button v-on:click="greet">vue_click</button><button @click="greet">uve_click_缩写</button><button v-on:click="doSomeing('hello', $event)">vue_click_内连</button><!-- 停止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><a href="www.baidu.com" @click.prevent="doThis">a标签</a><!-- 阻止默认行为，没有表达式 --><form @submit.prevent>阻止默认行为</form><!--  串联修饰符 --><button @click.stop.prevent="doThis"></button><!-- 键修饰符，键别名 --><input @keyup.enter="onEnter"><!-- 键修饰符，键代码 --><input @keyup.13="onEnter"></div>    </body>    <script src="js/vue.js"></script>    <script>       var app = new Vue({       el:'#app',       data:{       msg:'vue数据绑定！ <h1>h1标签</h1>'       }       })              var app1 = new Vue({       el:'#app1',       data:{       msg:''       }       })              var app2 = new Vue({       el:'#app2',       data:{       imageSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490188766664&di=a146b957af864d76c3d27c7bbad4eabf&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20110505%2Fbki-20110505023143-2085807902.jpg',       isRed:true,       classA:'class1',       classB:'calss2',       isB:true,       isC:false       }       })              var app3 = new Vue({       el:'#app3',       data:{       type:'AA'       }       })              var app4 = new Vue({       el:'#app4',       data:{       items1:[{'name':'张飞','age':19},{'name':'马超','age':10},{'name':'刘备','age':18}],       items2:['曹操','关于','张飞']       }       })              var app5 = new Vue({       el:'#app5',       data: {       name:'vue.js'       },       methods: {       greet: function (event){       alert('hello'+this.name);       alert(event.target.tagName);       },       doSomeing: function(vel,event){       alert(vel);       alert(event.target.tagName);       },       doThis:function(){       alert('什么都不干');       }       }       })                  </script></html>
0 0