vue2.0 语法

1、v-else

0.5”>
Now you see me

div v-else

Now you don’t

div

e-else 元素必须紧紧的跟在v-if或者v-else-if元素的后面，否则它将不会被识别。

另一个新加的指令

v-else-if

div v-if=”type ===a”

a

div

div v-else-if=”type===b”

b

div

div v-else-if=”type ===c”

c

div

div v-else

not a not b and not c

div

2、没有被添加key值的标签会被高效的复用。

3、v-show

h1 v-show=”ok” hello h1

在vue中，一个组件本质是一个拥有预定义选项的一个Vue实例，在Vue中注册组件：

Vue.component(‘todo-item’,{

template: ‘
这是个代办项
’

})

每个Vue.js应用都是通过构造函数Vue 创建的一个Vue的根实例启动的：

var vm = new Vue({

})

还可以扩展Vue构造器，从而使用预定义的选项创建可复用的组件构造器：

var MyComponent = Vue.extend({

//扩展选项

})

var myComponentInstance = new MyComponent() // 这样所有的MyComponent实例都会以预定义的扩展选项被创建。

每个Vue实例都会代理其data对象里所有的属性。只有被代理的属性是响应的，如果在实例创建之后添加新的属性到实例撒花姑娘

它是不会触发视图的更新的。

除了data属性，Vue实例暴露了一些有用的实例的属性和方法，这些属性或者方法都有前缀$,以便与代理的

data属性区分。

var data = {a:1}

var vm = new Vue({

el: ‘#example’,

data: data

})

vm.data===data//truevm.el === document.getElementById(‘example’) // true

vm.$watch(‘a’,function(newVal,oldVal){

// 这个回调会在vm.a改变后调用。

})

注意： 注意，不要在实例属性或者回调函数中（如 vm.$watch(‘a’, newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法

Message: {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：

This will never change: {{ msg }}

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元

Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}

{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。不应该在模板表达式中试图访问用户定义的全局变量

指令： 指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

Now you see me

这里， v-if 指令将根据表达式 seen 的值的真假来移除/插入 元素。

指令的参数： 一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

指令的修饰符： 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

# 用key管理可以复用的元素。

Vue会尽可能高效的渲染元素，通常会复用已经存在的元素而不是从头开始渲染。 例如：

Username

Email

例如，如果你允许用户在不同的登录方式之间切换:
那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素， 不会被替换掉——仅仅是替换了它的的 placeholder。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

Username

Email

这样的话 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show 是另一个根据条件展示元素的选项。

用法；

Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

注意： v-show不支持语法，也不支持v-else

v-if VS v-show

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块

相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换.

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if 与v-for 一起使用，当这两个指令一起使用的时候，v-for具有比v-if更高的优先级。

列表渲染： v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

{{ item.message }}

var example1 = new Vue({
el: ‘#example-1’,
data: {
items: [
{message: ‘Foo’ },
{message: ‘Bar’ }
]
}
})

在 v-for 块中，我们拥有对父作用域属性的完全访问权限.

v-for 还支持一个可选的第二个参数为当前项的索引。

{{ parentMessage }} - {{ index }} - {{ item.message }}

纯html

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

被插入的内容都会被当做 HTML —— 数据绑定会被忽略

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

意味着可以使用JavaScript表达式。

{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }}

这些都是合法的。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}

{{ if (ok) { return message } }}

Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

对象语法：

我们可以传给v-bind:class 一个对象，来动态的切换class。

上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。如下模板: