Vue 常用指令讲解

举报
达拉崩巴斑得贝迪卜多 发表于 2021/12/24 15:15:57 2021/12/24
【摘要】 Vue 常用指令讲解指令(Directives)是带有 v- 前缀的特殊属性,指令属性的值一般是单个JavaScript表达式(v-for除外)。指令的功能是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。常用的Vue指令有:①:el挂载点1.el是用来设置Vue实例挂载(管理)的元素2.Vue会管理el选项 命中的元素 以及内部的 后代元素3.可以使用其他的选择器,但是...

Vue 常用指令讲解

指令(Directives)是带有 v- 前缀的特殊属性,指令属性的值一般是单个JavaScript表达式(v-for除外)。指令的功能是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
常用的Vue指令有:

①:el挂载点
1.el是用来设置Vue实例挂载(管理)的元素
2.Vue会管理el选项 命中的元素 以及内部的 后代元素
3.可以使用其他的选择器,但是建议使用ID 选择器
4.可以使用其他的 双标签 但是不能使 html 和 body
建议使用 div 因为div没有其他的语义

<div id="app">
		{{msg}}
    <span>{{msg}}</span>
</div>
<script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "第一个vue"
            }
        })
 </script>

②:v-on

v-on指令的作用是为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods 属性中
方法内部通过this关键字可以访问定义在data中的数据

<div id="app"> 
         <input type="button" value="v-on指令" v-on:click="doIt">
         <input type="button" value="@指令" @click="doIt">
         
         <input type="button" value="双击事件" @dblclick="doIt">
         <!-- @click  @dblclick  单击 双击事件  -->
         
         <h2 @click="changeText">{{msg}}</h2>
</div> 
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "你好!",
                info:"世界" ,
                },
            methods:{
                doIt:()=>{
                    alert('我是doIT')
                },
                changeText:function(){
                    this.msg += "点击过后的文本"
                }
            },
        })
    </script>

③:v-show 和 v-if

v-if 根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)
v-show: display:none
v-show根据表达式的真假切换显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容最终会解析为布尔值
如果为true显示元素
如果为false隐藏元素
数据改变之后,数据也会同步更新

<div id="app">
    <input type="button" value="点击切换状态" @click="change()">
    <img src="./1.jpg" v-show="isShow" width="200">

    <img src="./1.jpg" v-show="age>18" width="200">
    <input type="button" value="年龄++" @click="add()">

    <!-- v-if -->
    <input type="button" value="切换" @click="toggleShow()">
    <img src="./1.jpg" v-if="isShow" width="200">
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true,
                age: 17
            },
            methods: {
                change: function () {
                    this.isShow = !this.isShow
                },
                add: function () {
                    this.age++;
                },
                toggleShow: function () {
                    this.isShow = !this.isShow
                }
            },
        })
    </script>

④:v-text 和v-html
区别
v-text="" :更新元素的 textContent 默认替换全部的内容
v-text会替换标签内全部内容
不可以解析html标签,只能解析文本
想局部替换,{{ Mustache }} 用插值
v-html可以解析html标签和文本**

v-text{{}} 表达式渲染数据,不解析标签;

v-html 不仅可以渲染数据,而且可以解析标签;

<div id="app"> 
         <h2 v-text="msg + '新加'">小黑</h2>  
         <h2 v-text="info + 'new'">小黑</h2>
         <h3>{{msg}}局部更新</h3>
         <p v-html="htmlMsg"></p>
</div>
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "你好!",
                info:"世界" ,
                htmlMsg:"<a href='#'>超链接</a>"
            }
        })
    </script>

⑤:v-for

v-for 根据数据生成列表结构
数组经常和v-for使用
语法是(item,index) in 数据
eg: (item,index) in arr ----> (item,index)顺序不能改变
数组长度更新会同步到页面上,是响应式的

<div id="app">
    <input type="button" value="新增" @click="add()">
    <input type="button" value="移除" @click="remove()">
    <ul>
        <li v-for="(item,index) in arr"> 
            {{index +1}} 小鼠标: {{item}}
        </li>
        <li v-for="(item,index) in objArr">
            {{item.name}}
        </li>
    </ul>
</div>
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['滴滴', '哒哒', '叮叮', '咚咚'],
                objArr: [
                    {name: "jack"},
                    {name: "tom"}
                ]
            },
            methods: {
                add:function(){
                    this.objArr.push({name:"小狗"})
                },
                remove:function(){
                    this.objArr.shift();
                }
            }
        })
    </script>

⑥:v-blid
v-bind 是用于绑定数据和元素属性的,例如:
动态增删class 建议使用对象的方式
v-bind:属性名=表达式

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <!-- 简写 -->
    <!--  <img  :src="imgSrc"  :title="imgTitle+'!'" 
     :class="isActive?'active':''" @click="toggleActive()"> <br>-->
    <!-- 使用对象方式 -->
    <img :src="imgSrc" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive()">
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc: "./1.jpg",
                imgTitle: "晚上好",
                isActive: false,
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>

双大括号的模板语法不适用于HTML属性上,如果要把数据绑定到HTML的属性上可以使用 v-bind 指令:

<div v-bind:id="idVal"></div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			idVal: 'app'
		}
	})
</script>

上面代码中,渲染后的HTML代码中,div的id属性值为app。

同一个DOM元素上可以绑定多个属性,例如:

<div class="app">
    <a v-bind:href="url" v-bind:class="class">click me</a>
    <img v-bind:src="imgsrc">
</div>  
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});

v-bind` 除了可以绑定一个简单类型的数据之外,还可以绑定一个对象,例如:

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

上面代码中,对象的名为 active ,表示要添加的类名, isActive 是vue中的数据,表示在什么情况下添加该类名,即在Vue实例的数据对象中对应的值(isActive的值)为真是,才为DOM元素的class中添加 active 的样式。

简写:

v-bind 指令可以简化英文的冒号 : ,示例:

<div class="app">
    <a v-bind:href="url">click me</a>
</div> 

可以简化为:

<div class="app">
    <a :href="url">click me</a>
</div>  

⑦:v- model
v-model 获取和设置表单元素的值(双向数据绑定)
便捷的获取和设置表单元素的值,
绑定的数据和表单元素的值相关,
绑定的数据和表单元素的值是双向绑定的 无论修改哪一个,另外一个跟随改变

    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<div id="app">
    <input type="button" value="修改msg" @click="setM()">
     <input type="text" v-model="msg" @keyup.enter="getMsg">
     <h3 >{{msg}}</h3>
</div>
 <script>
        var app = new Vue({
            el: '#app',
            data: {
               msg:"晚上好"
            },
            methods:{
                getMsg:function(){
                    alert(this.msg);
                },
                setM:function(){
                    this.msg = "修改后的值"
                }
            }
        })
    </script>

⑧:### v-cloak

作用: v-clock 指令主要是解决对插值表达式 {{}} 的渲染前闪烁问题。
简单来说,当网络比较慢时,网页还在加载vue.js,这就会导致Vue来不及渲染,这是页面就会显示Vue源代码。我们就可以使用 v-cloak 指令来解决这一问题。

HTML代码:

<div id="app"  v-cloak>
    {{context}}
</div>

JS代码:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互联网头部玩家钟爱的健身项目'
        }
    });
</script>

CSS代码:

[v-cloak]{
    display: none;
}

在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令了。

⑨:内联处理器中的方法

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

    <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

上面代码运行后,当点击两个按钮时,都会执行 say() 方法。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。