常用v-命令

文档：https://cn.vuejs.org/v2/guide/syntax.html
API：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
    <title>LeetCode -baicaihenxiao</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- My Stylesheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baicaihenxiao/js@latest/cserclub-common.css">

    <link rel="shortcut icon" type="image/jpg" href="https://gitee.com/baicaihenxiao/imageDB/raw/master/luxun.jpg">
</head>



<div id="app">

	
    {{msg}}
    

	<p>Using mustaches: {{ rawHtml }}</p>

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

	
    <div v-bind:class="myColor">test...</div>
    <button v-on:click="changeMyColor">changeMyColor</button>

	
    <p>{{ number + 1 }}</p>

	
    <p>{{ ok == 1 ? 'YES' : 'NO' }}</p>

	<p>{{ message.split('').reverse().join('') }}</p>
    
    <div @click="click1">
    	<div @click.stop="click2">
    		click me
    	</div>
    </div>
    

</div>


<script type="text/javascript">

var vm = new Vue({

	el : "#app",

	data : {

		msg : "hi vue",

		rawHtml : '<span style="color:orange">this is should be red</span>',

		myColor:"myColorCSS2",

		number : 10,

		ok : 1,

		message : "vue"

	},
    methods:{
    	changeMyColor : function () {
    		if (this.myColor == "myColorCSS2") {
                this.myColor = "myColorCSS1";
            } else {
                this.myColor = "myColorCSS2";
            }
    	},
        
        click1 : function () {
        	console.log('click1......');
        },
        click2 : function () {
        	console.log('click2......');
        }
    }

});

vm.msg = "hi....";


</script>


<style type="text/css">

.myColorCSS1{color:red;  font-size: 50px;}

.myColorCSS2{color:blue; font-size:100px;}

</style>
 
</body>
</html>

{{}}

显示数据的值

{{ msg }}

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

v-once

该节点里面的data不会因为值的改变而导致视图显示改变。

<span v-once>这个将不会改变: {{ msg }}</span>

v-html

解析成html而不是输出字符串

输出字符串
<p>Using mustaches: {{ rawHtml }}</p>


解析成html
<p v-html="rawHtml"></p>

data: {
    rawHtml : '<span style="color:orange">this is should be red</span>'
}

v-if

根据 seen 的值是 true 还是 false 决定是否显示该 p 元素。

<p v-if="seen">现在你看到我了</p>

自带的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "B",
		ok : false
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

`v-if` vs `v-show`

<h1 v-show="ok">Hello!</h1>

https://cn.vuejs.org/v2/guide/conditional.html
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
v-if 如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind

为 html 标签添加属性。

普通方法是
<a href="https://baidu.com">...</a>

通过改变 dynUrl 的值让 url 可以变动
<a v-bind:href="dynUrl">...</a>

缩写
<a :href="dynUrl">...</a>

<div v-bind:id="dynamicId"></div>
<div v-bind:id="'list-' + id"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

Class & Style

https://cn.vuejs.org/v2/guide/class-and-style.html
将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

这里说的 class 和 style 是这样的：

<p class="check"> aaa </p>

<p style="color:red; font-size:40px;">A red paragraph.</p>

对象语法（大括号包裹，冒号和逗号分隔）：

{ active: isActive, 'text-danger': hasError }

数组语法（中括号包裹，逗号分隔）：

[activeClass, errorClass]

class 总结

<!doctype html>

<html>



    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">

        <title>LeetCode -baicaihenxiao</title>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <!-- My Stylesheets -->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baicaihenxiao/js@latest/cserclub-common.css">



        <link rel="shortcut icon" type="image/jpg" href="https://gitee.com/baicaihenxiao/imageDB/raw/master/luxun.jpg">

    </head>


<!-- css https://github.com/baicaihenxiao/js/blob/master/cserclub-common.css -->



    <div id="app">



        {{ msg }}
        
        <!-- 对象语法 -->
        <!-- 普通用法 -->
        <p :class="{check: isCheck, icon: isIcon}"> 对象语法 </p>
        <!-- 和基本 class 混用 -->
        <p :class="{icon: !isIcon}" class="tips"> 和基本 class 混用 </p>
        <!-- 定义在 data 里 -->
        <p :class="c1Object"> 定义在 data 里 </p>
        <!-- 定义在 computed 里 -->
        <p :class="c2Object">  定义在 computed 里 </p>
        
        
        <!-- 只有 isClassA 能定义为变量，classA 只能是固定的类名，所以这个没用  -->
        <p :class="{classA: isClassA}"> hhhi </p>
        
        
        <!-- 数组语法 -->
        <p :class="[classB, classC]"> 数组语法 </p>
        <p :class="[isClassB ? classB : '', classC]">三元表达式</p>
        
        <!-- 数组语法和对象语法混用 -->
        <p :class="[{icon : isClassB}, classC]"> 数组语法和对象语法混用 </p>





    </div>



    <script type="text/javascript">

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "vue",
                isCheck: true,
                isIcon: false,
                
                classA: "check",
                isClassA: true,
                
                isClassB: true,
                classB: "icon",
                classC: "star",
                
                c1Object: {
                    check: false,
                    icon: true
                },

            },
            computed: {
              c2Object: function () {
                return {
                  notice: this.isCheck && !this.isIcon,
                  icon: this.msg === "vue"
                }
              }
            }



        });

        // vm.msg = "hi....";

    </script>



    </body>

</html>

style 总结

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
        <title>LeetCode -baicaihenxiao</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- My Stylesheets -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/baicaihenxiao/js@latest/cserclub-common.css">

        <link rel="shortcut icon" type="image/jpg" href="https://gitee.com/baicaihenxiao/imageDB/raw/master/luxun.jpg">
    </head>

    <!-- css https://github.com/baicaihenxiao/js/blob/master/cserclub-common.css -->

    <div id="app">


        <!-- 对象语法 -->
        <p class="icon tips" :style="{ color: activeColor, fontSize: fontSize + 'px' }">
            对象语法
        </p>
        <p class="icon tips" :style="styleObject">
            对象语法
        </p>

        <!-- 数组语法 -->
        <p class="icon tips" :style="[styleObject, styleObject2]">
            数组语法
        </p>

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                activeColor: 'red',
                fontSize: 30,
                
                styleObject: {
                    color: 'red',
                    fontSize: '30px'
                },
                styleObject2: {
                    textAlign:' center',
                }
            },
        });
        // vm.msg = "hi....";
    </script>

    </body>
</html>

v-on

添加响应事件

<button v-on:click="changeMyColor">changeMyColor</button>

缩写
<button @click="changeMyColor">changeMyColor</button>


methods:{
	changeMyColor : function () {
		if (this.myColor == "myColorCSS2") {
            this.myColor = "myColorCSS1";
        } else {
            this.myColor = "myColorCSS2";
        }
	}
}

<style type="text/css">
.myColorCSS1{color:red;  font-size: 50px;}
.myColorCSS2{color:blue; font-size:100px;}
</style>

修饰符

不加 .stop 的话点击会先后触发 click2 和 click1，加了之后不会触发 click1。

还有很多其他的例子

    <div @click="click1">
    	<div @click.stop="click2">
    		click me
    	</div>
    </div>
    
    methods:{
        
        click1 : function () {
        	console.log('click1......');
        },
        click2 : function () {
        	console.log('click2......');
        }
    }

动态参数

2.6.0 开始，不仅属性的值可以是动态的，属性本身也可以是动态的。

<a v-bind:[someAttr]="value"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

Previousnew Vue() 实例生命周期钩子 Nextnew Vue() 成员

Last updated 4 years ago

Was this helpful?