一、Vue实例
- 语法 ：new Vue()
- 实例在
<script>中写 - 创建Vue实例时，需要传入一个选项对象，传在（）里，（{…}），数据、方法、组件生命周期钩子。
- 每个程序至少要创建一个Vue实例
- 实例可以赋值给变量，
var vm = new vue({......}) - 实例挂载：通过el属性绑定要渲染的view，
el： ‘#app’ 表示该实例挂载到前面的HTML标签语句中。
data：{...} 数据对象，放所有的数据
vm.$mount("#app")方法手动挂载Vue实例 ，返回实例本身
el是在()里挂载，$mount是在（）外挂载
var vm=new Vue({...}).$mount("app")
二、插值（数据绑定）
- （模板文本中的绑定）对于
<html>里的标签之间的文本值，需要调用写在<script>里的实例里的属性值，使用文本插值，即Mustache语法（双花括号）：<p>{{message}}</p>
· 如果值是一段HTML代码，{{HTML}}并不会执行这段HTML代码，只会原样输出（顾名思义，文本插值，只传递文本进去）：<p>{{html}}</p>
· 使用v-html指令可以输出执行HTML语句后的结果：<p v-html="html"></p> - （HTML元素属性值的绑定）对于HTML元素的属性值，也即标签的属性值，如
<a href=?>{{...}}</a> ，?处不能用{{}}，要传值的话需要使用v-bind指令：<a v-bind:href="url">{{...}}</a>
· 对所有的数据绑定，提供完全的JavaScript支持，如<p>{{message.tuUpperCase()}}</p>
tuUpperCase()会把传进来的文本变为全大写字母
例： 1、 {{a+b}}
2、{{isLogin？username：‘not login’}}
3、{{message.split(' ').reverse().join('')}} //反转句子
4、<div v-bind:id="'list-' + id"></div>·
这些表达式会先在Vue实例的数据作用域下作为JavaScript被解析。
注意：每个表达式只能包含单个表达式，不能是语句或if语句，如
{{var a = 1}}
{{if (OK) {return message} }}
三、指令
指令是带有v-前缀的特殊属性，其值限定为单个表达式（可以是值，也可以支持JavaScript表达式）
当<script>中Vue实例里的属性值发生改变，<html>中与之绑定的标签的属性值也会跟着改变。
一些常用指令及用法：
- v-if指令
<p v-if = "show">能看到吗</p>
一些指令可以带有参数，在名称后用冒号表示，如：
-
v-bind指令：<a v-bind:herf= "url"></a> //用于响应式地更新HTML属性
简写语法：<a :herf= "url"></a> -
v-on指令： <button v-on:click="sayGreat"></button> //用于监听DOM事件
简写语法：<button @click="sayGreat"></button>
指令的参数可以是动态参数
-
语法：指令:[JavaScript表达式]
如：<a v-bind:[attribute]= "url"></a> attribute：在Vue实例中有一个对象属性为attribute，值为href，就相当于v-bind:herf；若值为null，绑定就会被移除，相当于<a></a>
注意1：在DOM中使用模板时（之间在HTML文件里写模板），需要避免使用大写字符命名动态参数，因为浏览器会把元素的属性名全部强制转换为小写。
也就是<html>里的动态参数名改成小写了，但是<script>里与之对应的名不会改成小写，就会找不到动态参数对应的数据对象。
注意2：动态参数不要使用复杂的表达式。因为HTML元素的属性命名有规范，不能有引号或空格。
错误示范：<a v-bind:['foo' + bar]= "value"></a>
|