学习笔记Vue（二）—— 常用指令

最新推荐文章于 2019-07-14 18:43:51 发布

GRANDMA_Z

最新推荐文章于 2019-07-14 18:43:51 发布

阅读量135

点赞数 1

分类专栏： Vue学习文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_38932377/article/details/94849899

版权

Vue学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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>

GRANDMA_Z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记Vue（二）—— 常用指令

1.v-pre让标签中的html模板不进行编译，就是两个花括号中的内容不再当作一个变量，而是整体就看做是一个字符串。  <span v-pre>{{'a'}}</span>2.v-cloak有的时候可能由于网络原因，vue加载的比较慢，最开始html里绑定的数据是不存在的，等待vue加载完毕后才显...
复制链接

扫一扫