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] = newValue
• 2.当你修改数组的长度时，例如
  vm.items.length = newLength