vuejs

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-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

  # v-else-if 指令充当 v-if 的“else-if块”

• 类似于 v-else,，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

  # 用 key 管理可复用的元素

• 高效渲染元素，对复用已有元素不受从头渲染。

• 还有别的好处，见官网

  v-show

• v-show 是简单地切换元素地 CSS 属性 display。

• 注意： 不支持

• v-if 是真正地条件渲染(条件块内的所有适当地被销毁和重建)；同时也是惰性地；更高地切换开销

• v-show：不管初始条件是什么，元素始终会被渲染；更高地初始渲染开销

  v-if 与 v-for 一起使用

• v-for 具有比 v-if 更高地优先级

  列表渲染

  v-for

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

  <li v-for="(item, index) in items">

• 可以用 of 替代 in。
• Template v-for
• 对象迭代 v-for
  • 通过一个对象地属性来迭代

  • <li v-for="value in object">
    

    　　

  • 提供第二个的参数为键名
  • 第三个参数为索引
  • 注意：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

• 整数迭代 v-for

   <span v-for="n in 10">{{ n }}</span>
  

  　　

• 组件和 v-for

  + <my-component v-for="item in items"></my-component>

  key

• 重用和重新排序现有元素，每项提供一个唯一的 key 属性，需要用 v-bind 来绑定动态值。理想的 key 值是每项都有唯一的id。

  <div v-for="item in items" :key="item.id">
    <!-- 内容 -->
  </div>
  

  　　

• 建议尽可能使用 v-for 来提供 key。

• key 并不特别与 v-for 关联，key 还有其他用途

  数组检查更新

• 变异方法
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
• 重塑数组(非变异方法)
  • filter()
  • concat()
  • slice()
  • 不会改变原始数组，总是返回一个新数组
• 注意事项
  • 不能检测变动的数组
    1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

    2. 当你修改数组的长度时，例如： vm.items.length = newLength

       显示过滤/排序结果

• 如果想要显示一个数组的顾虑或者排序的副本，而不是实际改变或重置原始数据。=>创建返回过滤或排序数组的计算属性

  事件处理器

  监听事件

• v-on

  v-on:click="counter += 1"

  方法事件处理器

• 在处理比较复杂的逻辑，直接把 Javascript 代码写在 v-on 是不可行的，可以用 v-on 接受一个定义的方法来调用

  v-on:click="greet"

  内联处理器方法

  v-on:click="say('hi')"

  事件修饰符

• .stop() 阻止单击事件冒泡
• .prevent() 提交事件不再重载页面
• .capture() 添加事件侦听器时使用事件捕获模式
• .self() 事件只在该元素本身（而不是子元素）触发时触发回调

• .once() 点击事件将只会触发一次

  按键修饰符

• 监听常见的键值

• Vue 为 v-on 在监听键盘事件时添加按键修饰符：

  <input v-on:keyup.13="submit">
  

  　　

• 按键别名

  <input v-on:keyup.enter="submit">
  

  　　

• 全部按键别名
  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

• 通过全局 config.keyCodes 对象 自定义按键修饰符别名：

  Vue.config.keyCode.f1 = 112
  

  　　

• 2.1.0新增
  • .ctrl
  • .alt
  • .shift

  • .meta

    为什么在 HTML 中监听事件？

• 这种事件监听的方式违背了关注点分离传统理念。不必担心，因为所有 Vue.js 事件处理方式和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。v-on 有几个好处：
  • 扫一眼 HTML 模板可以轻松定位到 javascript 代码中对应的方法
  • 因为你无法在Javascript中手动绑定事件，你的ViewModel可以式非常纯粹的逻辑，和DOM完全解耦，便于测试

  • 当一个ViewModel被销毁，所有的时间处理器都会自动被删除，无需担心自己如何清理它们

    表单控件绑定

    基础用法

• v-model 指令在表单控件元素上创建双向数据绑定。负责监听用户的输入事件以更新数据 ，并处理一些极端的例子。

• 注意：v-model 不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

  # 文本

• input type=“text”

  # 多行文本

• textarea

  # 复选框

• input type=checkbox id=“hello”

• label for=“hello”

  # 单选按钮

• input type=“radio” id=“hello”

• label for=“hello”

  # 选择列表

• select

• option

  绑定 value

• v-bind：value=“a”

  修饰符

  # .lazy

• 转变为在 change 事件中同步

  <input v-model.lazy="msg" >
  

  　　

  # .number

• 将用户的输入值转为 Number 类型

  <input v-model.number="age" type="number">
  

  　　

  # .trim

• 自动过滤用户的首尾空格

  <input v-model.trim="msg">
  

  　　

  v-model 与组件

  组件

  什么是组件

• 组件是Vue.js最强大的功能之一。可以拓展 HTML 元素，可以封装可重用的代码。

• 在较高层面上，组件是自定义元素，Vue.js 编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性拓展

  使用组件

  # 注册

• 创建一个全局组件

  Vue.component('my-component', {
    // 选项
  })
  

  　　

• 确保初始化之前注册组件

  # 局部注册

  new Vue({
    // ...
    components: {
  // <my-component> 将只在父模板可用
  'my-component': Child
    }
  })
  

  　　

  # DOM 模板解析说明

• 限制性元素：

  <u l> ，<o l>，<t a b l e> ，<s e l e c t> 限制了能被它包裹的元素， 而一些像 <o p t i o n> 这样的元素只能出现在某些其它元素内部。解决方案：使用特殊的 is 属性
  <table>
    <tr is="my-row"></tr>
  </table>
  

  　　

• 这些限制不适用：

  + <script type="text/x-template">
  + JavaScript内联模版字符串
  + .vue 组件
  

  　　

  # data 必须是函数

• 多个组件共享同一个 data，增加一个 counter 会影响所有的组件。解决方案：每个组件返回一个全新的 data 对象：

  data: function () {
    return {
  counter: 0
    }
  }
  

  　　

  # 构成组件

• 父子组件：组件 A 在它的模板中使用了组件 B。它们的关系可以总结为 props down，events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

  Prop

  # 使用 Prop 传递数据

• 组件实例的作用域是孤立的。

• 子组件使用父组件的数据，需要通过子组件的 props 选项

  # camelCased(驼峰式) vs. kebab-case(短横线隔开式)命名

  # 动态 Prop

  # 字面量语法 vs 动态语法

  <!-- 传递了一个字符串 "1" -->
  <comp some-prop="1"></comp>
  <!-- 传递实际的 number -->
  <comp v-bind:some-prop="1"></comp>
  

  　　

  # 单向数据流

• prop 是单向绑定的：父组件的属性发生变化时，将传导给子组件，不会反过来。--防止子组件无意修改额父组件的状态。

• prop 作为初始值传入后，子组件想把它当作局部数据来用；解决方法：定义一个局部变量，并用 prop 的值初始化它

  props: ['initialCounter'],
  data: function () {
    return { counter: this.initialCounter }
  }
  

  　　

• prop 作为初始值传入，由子组件处理成其它数据输出，解决方法：定义一个计算属性，处理 prop 的值并返回。

  props: ['size'],
  computed: {
    normalizedSize: function () {
  return this.size.trim().toLowerCase()
    }
  }
  

  　　

• 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

  # Prop 验证

  自定义事件

• 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

  # 使用 v-on 绑定自定义事件

  # 给组件绑定原生事件

• v-on：click.native="doThing"

  # 使用自定义事件的表单输入组件

  # 非父子组件通信

• 在简单的场景夏，可以使用一个空的 Vue 实例作为中央事件总线：

• 在复杂的情况下，我们应该考虑使用专门的状态管理模式

  使用 Slot 分发内容

• 为了让组件可以组合，我们需要一种方式来混合父组件的内容和子组件自己的模板，这个过程叫做内容分发，使用

  # 编译作用域

  # 单个 Slot

  # 具名 Slot

  # 作用域插槽（2.1.0新增）

  动态组件

• keep-alive

  杂项

  # 编写可复用组件

• 编写组件时，记住是否要复用组件有好处。一次性组件和其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
• Vue 组件的 API 来自三个部分 - props，events 和 slots：
  • Props 允许外部环境传递数据给组件
  • Events 允许组件触发外部环境的副作用

  • Slots 允许外部环境将额外的内容组合在组件中。

    # 子组件索引

    # 异步组件

    # 组件命名约定

    # 递归组件

    # 组件间的循环引用

    # 内联模板

    -这在有很多模版或者小的应用中有用，否则应该避免使用，因为它将模版和组件的其他定义隔离了。

    # 对低开销的静态组件使用 v-once