Vue.js 官方文档-学习小记（抄录-基础篇）

介绍

原文引自 Vue 官方教程 ：https://cn.vuejs.org/v2/guide/

Vue.js 是什么？

Vue.js 是一套构建用户界面的渐进式框架。采用的是自底向上增量开发的设计（与其他重量级框架不同点）。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。

起步

# helloword

• 注意：不能将id = ‘app’写在body或者html中

<script src = './vue.js'><script>
<div id = 'app>
    <p> {{ message }} </p>
</div>
<script>
var app = new Vue({
    el: '#app',
    message: 'helloword!!!'
})
<script>

• 现在的数据和DOM已经绑定在一起了,所有的元素都是响应式
• 文本插值:从控制台输入app.message = '新信息' ,可以修改DOM相应的更新
• 元素属性:通过v-bind绑定 例如v-bind:title="哈哈哈"

条件循环

• v-if (文本到数据) 提供了一个强大的过渡效果系统,可以在Vue插入/删除/更新时自动应用过渡系统
• v-for (结构到数据)

处理用户输入

• v-on 指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法
  • v-on:click = "Add"
• v-model 实现表单输入和应用状态之间的双向绑定

实例中的参数

• el: 'id' //el就是 vue 程序的解析入口
• data: { 数据 } //data就是ViewModel
• methods: { 函数 } //函数中的this指向该应用中data的数据
• computed: { 声明一个计算属性函数 }
  • 例子

  computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
  }
  

• filters: { 过滤器函数 }

组件化应用构建

在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例

Vue实例

构造器

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

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

• 没有完全遵循MVVM模式
• 可以扩展Vue构造器,从而用预定义选项创建可复用的组件构造器
• 所有的 Vue.js 组件其实都是被扩展的 Vue 实例

属性和方法

• 每个Vue实例都会代理其data对象里所有的属性
• 除了data属性外，Vue实例还会暴露了一些有用的实例属性和方法，都带前缀$，以便与代理的data属性区分
• 不要在实例属性和回调函数中箭头函数，因为箭头函数绑定父上下文，this不会像预想的一样是Vue实例

实例生命周期

• Vue.js 是否有“控制器”的概念？答案是，没有。

语法模板

• 在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态发生改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
• 也可以不用模板，直接写渲染（render）函数，使用可选的JSX语法

插值

# 文本

• 数据绑定最常见的形式就是使用“Mustache”（双大括号）的文本插值
• 使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

# 纯HTML

• 双大括号会将数据解析成纯文本，而非HTML。为了输出真正的HTML，需要使用v-html指令
• 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

# 属性

• Mustache不能在HTML属性中使用，应使用v-bind指令
• 对id，布尔值的属性有效

# 使用Javascript表达式

• 例子
  • {{ number + 1 }}
  • {{ ok ? 'YES' : 'NO' }}
  • {{ message.split('').reverse().join('') }}
• 表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

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

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

指令

• 是带有v-前缀的特殊属性

# 参数

• 一个指令能接受一个参数，在指令后面以冒号指明

# 修饰符

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

<form v-on:submit.prevent="onSubmit"></form>

过滤器

• Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，用在两个地方：mustache插值和v-bind表达式

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

• 过滤器函数
  • 可以串联
  • 可以接受参数

# 缩写

• v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

• v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

计算属性

计算属性

# 基础例子

# 计算缓存 vs methods

• 计算属性:是基于它们依赖进行缓存的(因依赖改变而重新求值);Date.now()不是响应式依赖
• methods:只要发生重新渲染, method调用总会调用执行该函数

# Computed属性 vs Watched 属性

• Watched 属性: 观察和响应Vue实例上的数据变动
• 缺点:命令式和重复式。更多选择 computed 属性

# 计算 setter

• 计算属性默认只有getter，根据需求也可以提供一个setter

观察 Watchers

Class 与 Style 绑定

绑定 HTML Class

# 对象语法

• v-bind:class={ 键：值 }；可以与普通的class属性共存
• 也可以绑定数据里的一个对象 v-bind:class=“classObject”
• 也可以绑定一个计算属性

# 数组语法

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

# 用在组件上

绑定内联样式

# 对象语法

• v-bind:style 的对象语法十分直观，看着非常像CSS，本质是一个 JavaScript 对象，属性名可以用驼峰式或者短横分隔命名
• 直接绑定到一个样式对象

# 数组语法

<div v-bind:style="[baseStyles, overridingStyles]">

# Vue会自动判断并添加前缀

• 当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

条件渲染

v-if

# 中 v-if 条件组

• v-if 是一个指令，只能添加到一个元素上，如果像切换到多个元素，需要