## Vue初体验
新建一个空的项目,引入vue.js文件。写如下代码:
```html
Title
{{name}}
```
显示效果:
20180313_0955.png
如果我们在控制台输入`myVue.data+='123'`,页面会**自动更新**name的值。
## Vue的系统指令
### v-on:注册事件
```html
Title
{{name}}
```
上方代码中,我们给button按钮绑定了点击事件。注意,这个button标签要写在div区域里(否则点击事件不生效),因为下方的View module接管的是div区域。
### 插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:
```html
Message: {{ msg }}
```
Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。
无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会**自动更新**。
`{{}}`对JavaScript 表达式支持,例如:
```javascript
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ name == 'smyhvae' ? 'true' : 'false' }}
{{ message.split('').reverse().join('') }}
```
但是有个限制就是,每个绑定都**只能包含单个表达式**,如下表达式无效:
```html
{{ var a = 1 }}
{{ if (ok) { return message } }}
```
### v-text
v-text可以将一个变量的值渲染到指定的元素中。例如:
```html
Title
```
结果:
20180313_1645.png
### v-html
`v-text`是纯文本,而`v-html`会被解析成html元素。
注意:使用v-html渲染数据可能会非常危险,因为它很容易导致 XSS(跨站脚本) 攻击,使用的时候请谨慎,能够使用{{}}或者v-text实现的不要使用v-html。
### v-cloak
`v-cloak`:保持和元素实例的关联,直到结束编译后自动消失。
这个指令和CSS 规则一起用的时候,可以隐藏未编译的标签直到实例准备完毕。比如说,在网络很慢的情况下,通过`v-cloak`隐藏元素,当加载完毕后,再显示出来。
```html
Title
{{name}}
```
### v-bind
`v-bind`:给html元素或者组件**动态绑定**一个或多个特性,例如动态绑定style和class。
比如说:
```html
```
上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
上面两行代码可以简写成:
```html
```
**举例:**
```html
Title
```
效果:
20180313_1745.png