Vue.js — 声明式渲染

Z时代
2024-01-10
分类：综合

vue

1.模板语法

1.1 双大括号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">		
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div >
			<p>{{message}}</p>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			});
		</script>
	</body>
</html>

解释：上面的{{message}}被渲染为Vue实例的data属性的message属性值。

1.2 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">		
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div >
			<p v-text="msg1"></p>
			<p v-text="msg2"></p>
			<p v-html="msg1"></p>
			<p v-html="msg2"></p>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					msg1: 'Hello Vue!',
					msg2: '<a href="https://cn.vuejs.org">Vue.js</a>'
				}
			});
		</script>
	</body>
</html>

解释：Vue指令带有v-前缀。v-text将内容渲染为文本，v-html将内容渲染为HTML。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<a href="url">Vue.js</a><br/><br/>
            <a v-bind:href="url">Vue.js</a><br/><br/>
			<a :href="url">Vue.js</a>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https://cn.vuejs.org'
                }
            });
        </script>
    </body>
</html>

解释：这里通过指令v-bind绑定表达式，url就会被渲染为Vue实例data属性的url属性值。注意v-bind是可以省略的，即<a v-bind:href="url">Vue.js</a>可写成<a :href="url">Vue.js</a>。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<button v-on:click="test">点我</button>
			<button @click="test">点我</button>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                },
				methods: {
					test(){
						console.log('点击！');
					}
				}
            });
        </script>
    </body>
</html>

解释：通过v-on:click绑定事件监听，注意v-on:click可写成@click。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<input type="text" v-model="msg"><br/>
			<p>{{msg}}</p>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    msg: 'hello'
                }
            });
        </script>
    </body>
</html>

解释：通过指令v-model可以实现双向数据绑定。

1.3 表达式

双大括号和指令中都可以使用JavaScript 表达式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			{{number+1}}
			{{ ok ? 'YES' : 'NO' }}
			{{ message.split('').reverse().join('') }}
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    number: 0,
					ok: true,
					message: 'hello'
                }
            });
        </script>
    </body>
</html>

1.4 过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<p>{{ message | capitalize }}</p>
        </div>
        <script>
			// 全局过滤器
			Vue.filter('capitalize', function(value){
				if(!value) return '';
				value = value.toString()
				return value.charAt(0).toUpperCase() + value.slice(1)
			});
            var vm = new Vue({
                el: '#app',
                data: {
					message: 'hello'
                },
				/*
				// 局部过滤器
				filters: {
					capitalize: function(value){
						if(!value) return '';
						value = value.toString()
						return value.charAt(0).toUpperCase() + value.slice(1)
					}
				}
				*/
            });
        </script>
    </body>
</html>

解释：上面的{{ message | capitalize }}表示将message作为过滤函数capitalize的第一个参数，得到过滤函数capitalize返回的值。
过滤器可以串联，可以接收多个参数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<p>{{ message | capitalize | otherMessage('Vue') }}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					message: 'hello'
                },
				filters: {
					capitalize: function(value){
						if(!value) return '';
						value = value.toString()
						return value.charAt(0).toUpperCase() + value.slice(1)
					},
					otherMessage: function(value, param1){
						if(!value) return '';
						value = value.toString()
						return value + ' ' + param1 + '!'
					}
				}
            });
        </script>
    </body>
</html>