第4章 Vue.js语法简介（读书笔记）_第四章 vue.js语法简介(54-57页),完成例4-1 syntax.html示例代码,并且认真-CSDN博客

本文链接：https://blog.csdn.net/weixin_43894901/article/details/109594379

<!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、不要使用复杂表达，名称中不能有空格或者引号