主要参考的VUE基础教程（模版语法）：https://cn.vuejs.org/v2/guide/syntax.html
模版的理解：动态的HTML的页面，包含了一些JS语法代码
大括号表达式指令(以v-开头的自定义标签属性) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_模板语法</title> </head> <body> <div id="app"> <!-- 双大括号表达式 语法: {{exp}} 或 {{{exp}}} 功能: 向页面输出数据 可以调用对象的方法 --> <h2>1. 双大括号表达式:针对textContent</h2> <p>{{userName}}</p> <p>{{userName.toUpperCase()}}</p> <p>{{userName.toUpperCase().length}}</p> <p>{{userName+':胖先森'}}</p> <p v-text="url"></p> <p v-html="url"></p><!-- innerHTML --> <!-- 功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法: :xxx='yyy' --> <h2>2. 指令一: 强制数据绑定</h2> <input type="text" :value="bool?userName:'死鬼'"> <img src="imgSrc" style="width: 100px;"><br/><!-- 就是HTML语法，无法显示图片 --> <img v-bind:src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 --> <img :src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 --> <!-- 功能: 绑定指定事件名的回调函数 完整写法: v-on:click='xxx' 简洁写法: @click='xxx' --> <h2>3. 指令二: 绑定事件监听</h2> <a href="javascript:;" v-on:click="test01">测试回调函数</a><br/> <a href="javascript:;" @click="test02">简写方式</a><br/> <button @click="test03('悟空')">事件传递参数-1</button><br/> <button @click="test03(userName)">事件传递参数-2</button><br/> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> window.onload=function (){ const vm = new Vue({ el:"#app", data:{ userName:"pang sir", url:"<a href='http://www.baidu.com'>百度一下</a>", imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png", bool:false }, methods:{ test01:function(){ console.log(Math.random()); }, test02(){//注意写法 alert("Hello World");//ECMAScript6语法 }, test03:function(content){ console.log(content); } } }) }; </script> </body> </html>可以完成表达式的计算，查看官方文档，其实实话说写多了VUE是不是可能会造成JavaScript能力的减弱？
