<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue - 模板语法 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body >
<div id="app">
<span>Message: {{ msg + "hello"}}</span><!-- 只支持一句话表达式，单个表达式 如果是变量的话只允许vm对象里面的变量 例如外部全局变量会出现undefined -->
<span v-once>这个将不会改变: {{ msg }}</span>
<input v-model="msg">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<input v-bind:value="value">
<!-- <input id={{id}}> 错误的 mustache 语法不能使用再标签的属性上，需要通过bind来实现 -->
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">v-bind 绑定属性</a>
<br>
<a v-bind:[attr]="dynamic">动态属性</a>
</div>
<!--
v-bind:href :href
v-on:click @click
-->
</body>
</html>
<script>
vm = new Vue({
el : '#app',
data : {
value : '你好漂亮',
msg : '1',
rawHtml : '<h1>Hi{{msg}}</h1>',
seen : 'true',
url : 'https://www.baidu.com',
attr : 'href', /* 文档中的attributeName 应该被保留了 请不要用这个字符串作为变量key */
dynamic : '这是一个动态属性'
},
});
</script>