欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

学习笔记Vue(二)—— 常用指令

程序员文章站 2022-05-16 14:57:58
...

1.v-pre

让标签中的html模板不进行编译,就是两个花括号中的内容不再当作一个变量,而是整体就看做是一个字符串。

	<!-- v-pre 不编译两个花括号中的内容 -->
	<span v-pre>{{'a'}}</span>

2.v-cloak

有的时候可能由于网络原因,vue加载的比较慢,最开始html里绑定的数据是不存在的,等待vue加载完毕后才显示出来,这样就会有一个“闪现”行为,可以使用v-cloak解决
css中设置v-cloak 为display:none

[v-cloak]{
            display: none;
        }
    <!-- 防止改变元素值时 “闪现” -->
    <span v-cloak>{{name}}</span>

3.v-once

v-once 控制该标签内的html模板,只显示第一次的值,不会再被改变

<body>
	<!-- 始终显示第一次的值,不再更改 -->
  	<span v-once>{{name}}</span>
	<script>
	    var vm = new Vue({
	        el: '#app',
	        data: {
	            name: 'grandma',
	        }
	    });
	    vm.name = 'kkk';  //虽然改成了kkk,但span里仍显示 grandma
    </script>
</body>

4.v-html

绑定含有html的字符串,但要注意XSS攻击
XSS攻击:别人恶意的把你的html字符串修改成他的版本,渲染到界面执行

<body>
	<!-- 绑定html字符串   注意XSS攻击-->
    <span v-html = 'dom'></span>
    <script>
	    var vm = new Vue({
	        el: '#app',
	        data: {
	            dom: '<div><h4>Hello World</h4></div>',
	        }
	    });
    </script>
</body>

5.v-text

绑定text,会覆盖标签里的全部内容

6.v-if

v-if等于一个布尔值,可以是变量或者函数的返回值,true则增加这段dom,false则移除,
注意与v-show区分,v-show是dom本来就存在,只是没有显示,v-if是不存在,后添加上的dom
使用template标签,控制多个标签的显示和隐藏会更好,template标签不会出现在dom结构里

<body>
	<!-- v-if  同 ng-if -->
    <template v-if='isTrue'>
            <div>
                <h1>用template控制多个标签的显示和隐藏</h1>
                <span>hahahhhahahahha</span>
            </div>
    </template>
    <script>
	    var vm = new Vue({
	        el: '#app',
	        data: {
	            isTrue :true
	        }
	    });
    </script>
</body>

7.v-else

v-else 必须和v-if搭配使用,中间不能有“第三者”,当if里的值为false时,v-else执行

8.v-show

用法和v-if相似,但在template标签上v-show不生效

9.v-bind

v-bind是一个强大的指令,他可以绑定属性的值,使这个属性的值可以由你改编成任何你想要的值。
简写: :class=’’ :src=’’
比如:

<body>
    <div id="app">
        <img v-bind:src="imgUrl" />
        <!-- v-bind 简写  只剩一个:   绑定多个class值,要写在数组里 -->
        <img :src="imgUrl" alt="" :class="[redClass, blueClass]"/>
        <!-- flag为true,则有yellow类名,否则没有 -->
        <div :class="{yellow: flag}"></div>
        <div :style="{color:color,background:'blue',width:'100px',height:'100px'}">redword</div>
	</div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
             	imgUrl:"http://pic.58pic.com/58pic/13/93/09/83F58PICUiG_1024.jpg",
                redClass: "red",
                blueClass: "blue",
                flag: true,
                color: 'red',
                divColor:'red'
            }
        })

10.v-on

v-on 给标签绑定事件,如click事件
简写,@click = “fun()”

<body>
    <div id="app">
        <button v-on:click="change('red')">red</button>
        <button v-on:click="change('green')">green</button>
        <button @click="change('blue')">blue</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                imgUrl:"http://pic.58pic.com/58pic/13/93/09/83F58PICUiG_1024.jpg",
                redClass: "red",
                blueClass: "blue",
                flag: true,
                color: 'red',
                divColor:'red'
            },
            methods: {
                change(color){
                    // this 相当于vm    如果写箭头函数,this就是window了! 不要随便用箭头函数
                    this.divColor = color;
                }
            }
        })
    </script>
</body>

11.v-for

类似angular的v-repeat,可以循环生成很多相同结构的html标签
可以绑定一个key值,key值必须唯一
但如果使用template标签,template标签上不能使用key值

<body>
    <!-- v-for  同 ng-repeat-->
    <!-- key值必须是唯一的 -->
    <div id="app">
        <div v-for="(item, index) in personArr" :key="item.id">{{item.name}}</div>
        <div v-for="(value,key) in person">{{value}}</div>
        <div v-for="v in 8">{{v}}</div>
        <div v-for="v in 'abscdsd'">{{v}}</div>

        <!-- template 不能写key值 -->
        <template v-for="(item, index) in arr"> 
            
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                arr:[1, 2, 3],
                personArr:[
                    {
                        id: '12321',
                        name: 'cg'
                    },
                    {
                        id: '22321',
                        name: 'ctg'
                    },
                    {
                        id:'11111',
                        name: 'dg'
                    }
                ],
                person: {
                    name:'zml',
                    age:'18',
                    height:'175'
                }
            }
        });

    </script>
</body>

12.v-model (双向数据绑定)

视图改变,vue中变量的值也改变,
变量值改变,视图也会改变

<body>
    <!-- v-model 双向数据绑定 value 和 input的语法糖 -->
    <div id="app">
        <input type="text" v-model="content">
        <span>{{content}}</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                content: 'abcdef'
            }
        });
    </script>
相关标签: Vue JavaScript