1. VUE的模板语法
(1) 引入Vue.js文件
(2) 创建Vue对象
el: 指定用vue来管理页面的哪个标签区域data: 初始化数据(页面可以访问)(3) 双向数据绑定： v-model
(4) 使用大括号表达式，向页面输出数据, 可以调用对象的方法. {{exp}}
(5) 理解vue的MVVM实现
M - Model 模型， 数据对象(data)
V - View 视图， 模板页面
VM - viewModel 视图模型(Vue的实例)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue基本使用</title></head><body><div id="app"> <input type="text" v-model="message"> <p>hello {{message}}</p></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { message: 'aaa' } })</script></body></html>效果展示：hello xxx可随着输入框内容的变化而变化
模板的理解:
* 动态的html页面* 包含了一些js语法代码* 大括号表达式* 指令(以v-开头的自定义标签属性)大括号表达式
* 语法： {{exp}}* 功能： 向页面输出数据，可以调用对象的方法举例1：大括号表达式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大括号表达式</title></head><body><div id="app"> <h5>大括号表达式</h5> <p>{{message}}</p> <p>{{message.toUpperCase()}}</p><!--调对象的方法--></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { message: 'I will back ' } })</script></body></html>结果：
举例2：
v-text 将内容理解为文本， 即使内容是标签
v-html 将内容理解为标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大括号表达式</title></head><body><div id="app"> <p v-text="message"></p><!--相当于textContent--> <p v-html="message"></p><!--相当于innerHTML--></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { message: '<a href="http:/www.baidu.com">I will back</a>' } })</script></body></html>结果：
强制数据绑定
功能：指定变化的属性值
完整写法：
v-bind:xxx='yyy' //yyy会作为表达式来解析执行
简洁写法：
:xxx='yyy'
举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>强制数据绑定</title></head><body><div id="app"> <h5>强制数据绑定</h5> <img src="imgUrl"> <img v-bind:src="imgUrl"> <img :src="imgUrl"><!--简写形式--></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { imgUrl: 'img1.png' } })</script></body></html>结果：<img src="imgUrl">将属性值当作常量imgUrl, 未找到图片，则不显示。如果使用强制绑定，则src的属性值当作表达式解析
绑定事件监听
功能： 绑定指定事件名的回调函数
完整写法:
v-on:事件名 = 'xxx'
简洁写法:
@事件名='xxx'
举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绑定事件监听</title></head><body><div id="app"> <h4>绑定事件监听</h4> <button v-on:click="test">点击</button> <button v-on:click="test1('abc')">点击1</button></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript"> new Vue({ el: '#app', data: { }, methods: { test(){ alert('hello') }, test1(content){ alert(content) } } })</script></body></html>结果：
使用methods属性，属性值为事件绑定的构造函数。根据需要，可传参，可不传参。