vue笔记-1

1.什么是Vue.js

Vue，是一套用于构建用户见面的渐进式框架，可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能偶为复杂的单页应用提供驱动。

---

2.Vue实例

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的

var vm=new Vue({ //选项 }）

一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的，可复用的组件树组成，所有的Vue组件都是Vue实例，举例，一个todo应用的组件树可以是这样的：

根实例 └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics

---

4.数据与方法

当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值

// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 获得这个实例上的属性 // 返回源数据中对应的字段 vm.a == data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3

注意：只有当实例被创建时data中存在的属性才是响应式的 这里唯一的例外是使用Object.freeze().这会阻止修改现有的属性，也意味着响应系统无法再追踪变化

var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) <div id="app"> <p>{{ foo }}</p> <!-- 这里的 `foo` 不会更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div>

---

5.指令

带有v-前缀的特殊特性指令特性的值预期是单个JS表达式（v-for是例外）指令的指责是当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

例如

<p v-if="seen">现在你看到我了</p>

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

---

6.使用JS表达式

对所有的数据绑定，Vuw,js都提供了完全的Js表达式支持

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

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

<!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}

---

7.参数

一些指令能够接受一个“参数”，在指令名称之后以 冒号表示 例如，v-bind指令剋有同于响应式地跟新HTML特性

<a v-bind:href="url">...<a/>

在这里href是参数，告知v-bind指令该指令将元素的href特性与表达式url的值绑定 v-on指令同于监听DOM事件

<a v-on:click="doSomthing">...</a>

---

8.动态参数

从2.6.0开始，可以用方括号括号括起来的JS表达式作为指令的参数

<a v-bind:[attributeName]="url"> ... </a>

如果你的Vue实例有一个data属性attributeName，其值为"href"， 那么这个绑定等价于v-bind:href 同样的，可以使用动态参数为一个动态的事件名绑定函数处理

<a v-on:[eventName]="doSomething"> ... </a>

---

9.计算属性

什么是计算属性 模板内的表达式非常便利，但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 计算属性的用法 在一个计算属性里面可以完成各种复杂的逻辑，包括运算，函数调用等，只要最终返回一个结果就可以。 ?计算属性的详解

---

10.条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染

<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no ?</h1>

带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素地CSS属性 注意：v-show不支持< template >元素，也不支持v-else

---

11.变异方法

Vue包含一组 观察数据的变异方法，所以它们也将会触发视图更新

push()pop()shift()unshift()splice()sort()reverse()

非变异方法,这些不会改变原始数组，但总是返回一个新数组，当使用非变异方法时，可以用新数组替换旧数组

filter()contacat()slice()

---

12.由于JS的限制，Vue不能做的事

由于JS限制，Vue不能检测以下变动的数组

1.当你利用索引直接设置一个项时，例如 vm.items[indexOfItem] = newValue2.当你修改数组的长度时，例如 vm.items.length = newLength