VUE：模板语法
一：何为声明式
安装规定的语法，去实现一些效果（不需要管流程）。
二：模板语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1 模板的理解：动态的html页面，包含了一些js语法代码 双大括号表达式 指令（以v-开头的自定义标签属性） 2 双大括号表达式 语法：{{exp}} 或 {{{exp}}} 功能：向页面输出数据 可以调用对象的方法 3 指令一：强制数据绑定 功能：指定变化的属性值 完整写法： v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法： :xxx='yyy' 4 指令二：绑定事件监听 功能：绑定指定事件名的回调函数 完整写法： v-on:click='xxx' 简洁写法： @click='xxx' --> <div id="app"> <h2>1、双大括号表达式</h2> <p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <!--msg是变量，可以写js表达式--> <p v-text="msg2"></p> <!-- 写入文本 value textContent--> <p v-html="msg2"></p> <!-- 转换成html语句 innerHTML--> <h2>2、指令一:强制数据绑定</h2> <img v-bind:src="imgUrl" /> <img :src="imgUrl" /> <h2>3、指令二：绑定事件监听</h2> <button v-on:click="test">点击有惊喜</button> <button @click="test2(msg)">点击还有惊喜</button> <!-- 可以传变量--> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'taosir is studing...', msg2:'<a href="http://www.baidu.com">taosir is here!</a>', imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif' }, methods:{ test(){ alert("意不意外！"); }, test2(m){ alert(m); } } }) </script> </body> </html>