v-cloak：能够解决插值表达式闪烁的问题
<p v-cloak>{{ msg }}</p>
v-text：会覆盖元素中原本的内容,但是插值表达式 只会替换自己的这个占位符,不会把整个元素的内容清空
<h3 v-text="msg">======</h3>
v-html：可以转化为html页面的形式展示
<h3 v-html="msg2"></h3><br><br><br>data:{<br> msg2:'<h1>h1标签</h1>'<br> }
v-bind：是vue中用于绑定属性的指令
<!--mytitle相当于一个表达式，后面可以跟其他表达式--><br><input type="button" value="button" v-bind:title="mytitle + '123'"><br><br><input type="button" value="我是一个按钮" :title="mytitle + '123'"><br><br>data:{<br> mytitle:'自定义title'<br> }
v-model：双向绑定
<div id="app"><br> <h3>{{msg}}</h3><br> <input type="text" v-model="msg" style="width: 100%"><br></div><br><br><script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> msg:'vue学习之路。。。。'<br> }<br> })<br></script><br>
注意：v-model只能用于表单元素
v-on： vue中，提供v-on指令进行事件绑定
<input type="button" value="鼠标点击事件" v-on:click="show"><br><br><input type="button" value="鼠标移入事件" v-on:mouseover="show"><br><br><input type="button" value="鼠标移入事件" @:mouseover="show">
v-for：迭代普通数组
1.迭代普通数组：
<div id="app"><br> <p v-for="(item,i) in list">索引值是：{{ i }}，元素是：{{item}}</p><br> </div><br> <script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> list:[9,8,7,6,5]<br> }<br> })<br> </script>
2.迭代对象数组：
<div id="app"><br> <p v-for="(item,i) in list">元素id：{{ item.id }}，名字是：{{item.name}}</p><br> </div><br><script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> list:[<br> {id: 1, name: "张三"},<br> {id: 2, name: "李四"},<br> {id: 3, name: "王五"},<br> {id: 4, name: "赵六"},<br> ]<br> }<br> })<br></script>
3.迭代数字
<!-- v-for循环，count从1开始 --><br><div id="app"><br> <p v-for="count in 10">这是第{{count}}次循环</p><br> </div><br> <script><br> var vm = new Vue({<br> el:'#app',<br> data:{}<br> })<br> </script>
4.迭代对象：
<div id="app"><br> <p v-for="(key,value,i) in user">元素key：{{ key }}，值value是：{{ value }}，元素下标：{{i}}</p><br></div><br><script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> user: {<br> id:1,<br> name:"张三",<br> sex:'男'<br> }<br> }<br> })<br></script>
v-if /v-show:
<!-- v-if的特点:每次都会重新删除或创建元素--><br> <!-- v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none 样式--><br> <div id="app"><br> <input type="button" value="点点点" @click="run"><br><br> <!-- v-if有较高的切换性能消耗 --><br> <h3 v-if="flag">这事v-if控制的show</h3><br><br> <!-- v-show有较高的初始渲染消耗--><br> <!-- 如果元素涉及到频繁的切换,最好不要使用v-if, 而是推荐使用v-show --><br> <!--如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if--><br> <h3 v-show="flag">这事v-show控制的</h3><br> </div><br><br> <script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> flag: true<br> },<br> methods:{<br> run(){<br> this.flag = !this.flag<br> }<br> }<br><br> })<br> </script>
.stop 阻止冒泡
<!-- .stop 阻止冒泡 --><br><input type="button" value="事件修饰符" @click.stop="one">
.prevent 阻止默认事件
<!-- .prevent 阻止默认事件 --><br><a href="https://www.baidu.com" @click.prevent="three">去百度</a>
.self实现只有点击当前元素时候,才会触发事件处理函数
.once只触发一次事件处理函数
<br><!-- .self实现只有点击当前元素时候,才会触发事件处理函数 --><br><!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为--><br><div class="bcg" @click.self="two"><br> <input type="button" value="事件修饰符" @click="one"><br><br> <!-- .once只触发一次事件处理函数 --><br> <a href="https://www.baidu.com" @click.once="three">去百度</a><br></div>
el：指定控制的区域
data：是个对象，控制区域内要用到的数据
methods：是个对象，自定义方法
<script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> msg:'学习vue'<br> },<br> methods:{<br> one(){<br> console.log("触发了按钮的点击事件")<br> },<br> two(){<br> console.log("触发了背景颜色事件")<br> },<br> three(){<br> console.log("触发了链接点击事件")<br> }<br> }<br> })<br></script>
注意：在vm实例中，如果访问data里面的数据，或者要访问methdos方法，必须带有 this
<script><br> var vm = new Vue({<br> el:'#app',<br> data:{<br> flag: true<br> },<br> methods:{<br> run(){<br> this.flag = !this.flag<br> }<br> }<br><br> })<br></script>
Original: https://www.cnblogs.com/zdh052286/p/12468343.html
Author: 清酒一杯
Title: vue指令——day01
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581597/
转载文章受原作者版权保护。转载请注明原作者出处！