qinshan.top

Appearance

第4章 Vue.js模板语法 ​

vue
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello Vue.js</title>
	</head>
	<body>
		<!--View-->
		<div id="app">
			<!--简单的文本插值-->
			<p>{{message}}</p>
			<!--使用 JavaScript 表达式-->
			<p>{{message.toUpperCase()}}</p>
			<!--HTML代码将以普通文本的方式输出-->
			<p>{{spanHtml}}</p>
			<!--输出HTML代码-->
			<p v-html="spanHtml"></p>
			<!--使用v-bind指令对HTML元素的属性进行绑定-->
			<a v-bind:href="url">新浪网</a>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const App = {
			  data(){
			    return {
			        message: "Hello Vue.js",
			  	    url: "http://www.sina.com.cn/",
			  	    spanHtml: `
			  	       <span style='color: red'>
			  	            HTML元素，以红色字体显示
			  	       </span>`
			    }
			  }
			};
			const app = Vue.createApp(App);
			const vm = app.mount('#app');
		</script>
	</body>
</html>

4.1 应用程序实例 ​

javascript
// 根据根组件选项对象，创建VUE实例，挂载到DOM元素上。'var vm =' 不是必须的，只是为了通过浏览器console调试方便。
var vm = Vue.createApp(App).mount("#app");

4.2 插值 ​

使用mustache语法，即双花括号的胡须语法。mustache语法只用于html元素内，不能用于元素的属性。vm.$data.message与vm.$data.message等价。

html
<p>{{ message }}</p>
<p>{{ message.toLowerCase() }}</p>
<p>{{ htmlContent }}</p>
<p v-html="htmlContent"></p>
<a v-bind:href="url" target="_blank">百度</a>

4.3 指令 ​

指定是带v-前缀的特殊属性，其值限定为单个表达式。

指定可以不带参数，如v-if。指令也可以带参数，如v-bind、v-on。参数是冒号:之后的内容。

v-bind用响应式更新html属性，v-on用于监听dom事件，两者均有简写形式，示例如下：

html
<a v-bind:href="url" target="_blank">百度</a><br />
<a :href="url" target="_blank">百度</a><br />
<button v-on:click="sayHello()">SayHello</button>
<button @click="sayHello()">SayHello</button>
<a v-bind:[ATTRibutename]='url2'>珊瑚</a>
javascript
const App = {
    data() {
        return {
            attributename: 'href',
            url: 'http://baidu.com'
        }
    },

    methods: {
        sayHello() {
            alert('Hello!');
        }
    }
};

特别需要注意的是，直接在HTML里编写模板时，不要使用大写字母命名动态参数，因为浏览器会全部强制转为小写。示例：

vue
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue.js</title>
    </head>
    <body>
        <!--View-->
        <div id="app">
            <a v-bind:[attributeName]="url">新浪网</a>
        </div>
    
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            var vm = Vue.createApp({
                  data(){
                    return{
                      attributeName: "href",
                      url: "http://www.sina.com.cn/"  
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>