第4章 Vue.js语法简介（读书笔记）
程序员文章站
2022-06-06 19:06:41
...
<!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="vue.js"></script>
<script>
var vm = new Vue({ //这句话是创建Vue实例实际上是ViewModel
el: '#app', //el属性绑定要渲染的View
data: { //data属性是指定一个Model，数据定义在这
message: "Hello Vue.js",
url: "http://www.sina.com.cn/",
spanHtml: "<span style='color: red'>HTML元素，以红色字体显示</span>",
}
})
vm.$mount("#app"); //也可以使用这句话挂载Vue实例，和el差不多
</script>
</body>
</html>4.1实例
<script>
var vm = new Vue({ //这句话是创建Vue实例实际上是ViewModel
el: '#app', //el属性绑定要渲染的View
data: { //data属性是指定一个Model，数据定义在这
message: "Hello Vue.js",
url: "http://www.sina.com.cn/",
}
})
vm.$mount("#app"); //也可以使用这句话挂载Vue实例，和el差不多
</script>
</body>
4.2插值
<!--View-->
<div id="app">
<!--简单的文本插值-->
<p>{{message}}</p>
<!--使用 JavaScript 表达式-->
<p>{{message.toUpperCase()}}</p>
<!--HTML代码将以普通文本的方式输出，
渲染时会被替换为<span style='color: red'>HTML元素，以红色字体显示</span>-->
<p>{{spanHtml}}</p>
<!--输出HTML代码，以便浏览器能够真正常解析-->
<p v-html="spanHtml"></p>
<!--使用v-bind指令对HTML元素的属性进行绑定-->
<a v-bind:href="url">新浪网</a>
</div>注意：
插值语法中也可以使用JS表达式，但是只能包含单个表达式
4.3指令
指令是带有v-前缀的特殊属性，其值限定为单个表达式
作用：当表达式的值发生改变时，这个变化将反映到DOM上，
＜ｐ ｖ－ｉｆ＝＂ｓｈｏｗ＂＞你能看见我吗＜／ｐ＞
／／v-if将会根据ｓｈｏｗ的值决定是否显示这个ｐ标签
＜ａ ｖ－ｂｉｎｄ：ｈｒｅｆ＝＂ｕｒｌ＂＞新浪网＜／ａ＞
＜ｂｕｔｔｏｎ ｖ－ｏｎ：ｃｌｉｃｋ＝＂ｓａｙＧｒｅｅｔ＂＞Ｇｒｅｅｔ＜／ｂｕｔｔｏｎ＞
／／v-bind用于响应式地更新HTML（这个是 监测数据的改变也就是model）
／／Ｖ－ｏｎ用于监听DOM（可能是说这个是监测网页的改变，也就是view）注意：
1、在Dom中使用模板时要避免使用大写字符来命名动态参数，浏览器会把元素的属性名称全部转化为小写<a v-bind:[attrBute]=“url”>新浪网</a>
这种情况下，attrBute就会自动转化成attrbute,然后data里是attrBute，就无法匹配到数据了。
2、不要使用复杂表达，名称中不能有空格或者引号
上一篇： 清时期的区域是怎么划分的？一个五品知府如何管理500多万人口？
下一篇： Vue钩子动画