vue指令使用问题

最新推荐文章于 2023-07-22 13:08:38 发布

X可乐

最新推荐文章于 2023-07-22 13:08:38 发布

阅读量239

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/CS_DGD/article/details/105562172

版权

前言

表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 {{}} 语法，而是需要 指令

在 vue 中，指令是一个带有 v- 前缀的属性.
与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用.
vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令

指令

v-text

作用：更新元素的内容
注意点：v-text会填充整个innerhtml

<span v-text="msg"></span>
<!-- 上下内容一样 -->
<span> {{msg}} </span>

v-html

作用：通过 v-html 可以让内容作为 html 进行解析
注意点：为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的

<p v-html="html"></p>

v-show

作用：根据表达式的具体值(true与false)，改变该元素的display样式
适用于 : 数据的改变比较频繁的

<div v-show="islogin"></div>

v-if

作用：根据表达式的具体值(true与false)，改变的是元素的结构（渲染或者删除）
适用于 : 数据的改变不频繁的

<div v-if="islogin"></div>

v-else-if

注意点：前一兄弟元素必须有 v-if 或者 v-else-if

<div v-else-if="islogin"></div>

v-else

注意点：前一兄弟元素必须有 v-if 或者 v-else-if

<div v-else></div>

上述三个可以链式调用

<p v-if="islogin === 'A'">我是v-if，我是对的就显示我</p>

<p v-else-if="islogin === 'B'">我是v-else-if,我是对的就显示我</p>

<p v-else>我是v-else,上边都错误就显示我</p>

v-for

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

注意点：of 与 in 在这里没有区别

<ul>
	<!-- of 与 in 没有区别 -->
	<li v-for = "user in users" :key="user.id">
		<input type="checkbox">
		{{user.id}} -- {{user.name}}
	</li>
</ul>
<ul>
	<li v-for = "(val,name,index) in object">
	<span>
		索引值:{{index}}
	</span>
	<span>
		属性名：{{name}}，值：{{val}}
	</span>
	</li>
</ul>

拓展 :key

作用：起绑定作用
一般应用较少，举个场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 指令中的循环 -->
    <div id="app">
        <ul>
            <li v-for = "user in users">
                <input type="checkbox">
                {{user.id}} -- {{user.name}}
            </li>
        </ul>
    </div>
	<script>

        let app = new Vue({
            el:"#app",
            data:{
                users:[
                    {id:1,name:"张三"},
                    {id:2,name:"李四"},
                    {id:3,name:"王五"}
                ]
            }
        });

	</script>
</body>
</html>

浏览器反馈
在这里插入图片描述
这是我们选中第二个框后，在控制台输入以下代码

app.users.sort((a,b)=>{
	return Math.random() - .5;
})

浏览器反馈
在这里插入图片描述
我们可以看到，虽然张三、李四、王五位置变了，但是Input框的位置并没有变化
这是因为vue在处理的时候，先把数据传递到VDOM中，处理完成后，有变化的就重新渲染响应，没变化的就保持不变，所以这个input的位置没变。
处理方式也比较简单，我们把这个input所在的li和张三、李四、王五做一个绑定，让他们在发生改变时重新渲染li就可以了

<li v-for = "user in users" :key="user.id">
	<input type="checkbox">
	{{user.id}} -- {{user.name}}
</li>

浏览器反馈
在这里插入图片描述
现在就解决了我们刚才所说的那个问题了

v-bind

绑定数据（表达式）到指定的属性上，<div v-bind:参数=“值/表达式”>，这里的参数就是指定的属性名称

<div v-bind:id="myId"></div>

简写就是

<div :id="myId"></div>

针对样式属性，v-bind值有一些特殊的写法
style
v-bind写法

<div :style="'width: 100px; height: 100px; background: red'"></div>

对象写法

<div :style="style"></div>
<script>
new Vue({
	el: '#app',
	data: {
		style: {
	      width: '200px',
	      height: '200px',
	      background: 'red'
	    }
	}
});
</script>

数组写法

<div :style="[style1, style2]"></div>

<script>
new Vue({
	el: '#app',
	data: {
		style1: {
      width: '100px',
      height: '100px',
      background: 'green'
    }
	},
  style2: {
    border: '1px solid black'
  }
});
</script>

数据流

数据流用来形容走向
举例说明

v-bind 单向数据绑定——数据到视图
v-model 双向数据绑定——数据到视图，视图到数据

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 双向绑定 -->
        <input type="text" v-model="msg">
        <div> {{msg}} </div>
        <br>

        <!-- 单向绑定 -->
        <input type="text" value="msg2">
        <div> {{msg2}} </div>
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:"abc"
            }
        })
    </script>
</body>
</html>

这个页面实现之后，我们第一个input里的值发生改变那第一个div也会跟着变化值
但是第二个input的值发生改变后第二个div里的值并不会发生改变
适用于 表单这种交互性比较强的元素或者组件

v-on

作用：监听DOM事件，并在触发时运行一些javascript代码

代码示例

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    ...
    <div id="app">
        <div id="inx">
            <button v-on:click="counter +=1"> 数值：{{counter}} </button>
        </div>
    </div>
    ...
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                counter:0
            }
        })
    </script>

此时，我们每点击一次button 它里边的数值就会+1
但是，我们在正常的情况下，事件处理逻辑远没有这么简单，所以直接把js代码写在指令中是不行的，因此v-on还可以接受一个需要调用的方法名称

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<div id="app">
        <div id="inx">
            <button v-on:click="counter +=1"> 数值：{{counter}} </button>
            <button v-on:dblclick="greet">Greet</button>
        </div>
    </div>
    
    <script>
       let app = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods:{
                greet:function(){
                    alert("hi");
                }
            }
        })
    </script>

浏览器反馈
在这里插入图片描述
也可以用 JavaScript 直接调用方法

app.greet()	// => hi

我们还可以给函数传递参数

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<div id="app">
        <div id="inx">
            <button v-on:click="counter +=1"> 数值：{{counter}} </button>
            <button v-on:dblclick="greet('abc')">Greet</button>
        </div>
    </div>
    
    <script>
       let app = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods:{
                greet:function(str){
                    alert(str);
                }
            }
        })
    </script>

浏览器反馈
在这里插入图片描述
如果是event事件的话，可以用$event把他传入方法

<button v-on:dblclick="greet('abc',$event)">Greet</button>

v-cloak

不需要表达式

用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。

v-once

不需要表达式

作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>这是只会改变一次的: {{msg}}</span>

X可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue指令使用问题

前言表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 `{{}}` 语法，而是需要 `指令`在 `vue` 中，指令是一个带有 `v-` 前缀的属性.与普通属性不一样的地方在于，指令的值是引号括起来的 `表达式`，不同的指令有不同的作用.`vue` 内置了一些常用的指令，后期我们还可以自定义属于自己的指令指令v-text作用：更新元素的内容注意点：v...
复制链接

扫一扫