vue

✍️ Tangxt ⏳ 2020-07-10 🏷️ 组件 API

02-构造选项

★前言

★创建 Vue 实例

Vue 实例 和 原型

  1. 把 Vue 的实例命名为 vm ， vm 对象封装了对视图的所有操作包括数据读写、事件绑定、DOM 更新
  2. vm 的构造函数是Vue，按照ES6的说法， vm 所属的类是Vue
  3. options是new Vue的参数，一般称为选项或构造选项

图中信息的关注顺序： options -> vm -> Vue -> Vue.prototype -> Vue.prototype.__proto__

★new Vue有哪些构造选项？

1）如何知道`options`旗下有哪些属性？

都可以在 API — Vue.js 找到……

2）`options` 主要有五类属性

options旗下的属性

学习顺序 -> 类似红橙黄绿青蓝紫 -> 不分层次地去了解每个属性的话，等于白学……

3）入门属性（必学）

1、数据

2、资源

3、生命周期钩子

四个钩子

4）进阶属性（必学）

1、数据读写

2、资源

3、组合

5）通用属性

propsData
render
renderError
beforeCreate
beforeMount
beforeUpdate
beforeDestroy

6）特殊属性

7）不常用属性

★el 和 data 选项

1）模板 `template` 三种写法

1、Vue 完整版 -> 写在 HTML 里

HTML中的template

2、Vue 完整版 -> 写在选项里

写在选项里的template

3、Vue 非完整版 -> 配合 `Xxx.vue` 文件

创建一个 Demo.vue：

Demo vue

在另一个地方使用这个 Demo 组件：

使用 Demo 组件

2）`el` 挂载点

// 自动挡：
new Vue({
  el: '#app',
  render: h => h(Demo)
})

// 手动挡：
new Vue({
  render: h => h(Demo)
}).$mount('#app')

手动挂载 vs 自动挂载

Q：Vue 实例的作用范围是？

Vue会管理el选项命中的元素以及内部的后代元素

Q：只能使用 `id` 选择器吗？

也可以使用其它的选择器 -> 但建议使用 id 选择器！

Q：是否可以设置成其它的 DOM 元素？

可以使用其它的双标签 -> 但不能使用 html 和 body

3）`data` 内部数据（优先使用函数）

Q：如果`data`旗下某个属性的值是 `null` or `undefined`？

如是message属性，那么你在 template 这样写：🟡🟡message🟡🟡，那就不显示了！

Q：大胡子语法？

Github Pages 解析这个语法{-{}}是有问题的（请忽视那个-），我就用🟡🟡🟡🟡代替了！

我们读🟡🟡🟡🟡 -> “Mustache”语法 (双大括号)

数据绑定的最常见的形式：

注意：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html -> 如果message是HTML字符串值，那么你就 v-html = 'message'

如：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<!-- rawHtml的值是：<span>'hi'</span> -->
<!-- 作为内容插入，也就是作为儿子插入 -->
<p>Using v-html directive: <span><span>'hi'</span></span></p>

Q：为什么要优先使用函数？

★methods、components、四个钩子

1）methods

使用：

// 定义
{
  methods: {
    add() {this.n++},
    filter(){
      return 'hi'
    }
  }
}

<!-- template -->
<div id="app">
  🟡🟡n🟡🟡
  <button @click="add">+1</button>
  🟡🟡filter()🟡🟡
</div>

🟡🟡filter()🟡🟡 -> filter() -> 函数调用表达式！

2）components（Vue 组件）

每个 Vue 组件都是一个 Vue 实例

局部注册（只能局部使用，不能分享给其它全局组件使用）：

// 推荐这种姿势引入其它组件到Xxx组件里边的template
import Demo from "./Demo.vue";
const vm = new Vue({
  // 局部注册组件 -> 这样当前这个vm实例的template就能直接使用了
  components: {
    Add: Demo
  },
  // or ES6解析赋值
  // components: {Demo} -> 写在template得这样：<Demo/>
  // JS的对象属性名对大小写是敏感的，即 var o = {Name:'ya',name:'5'}
  // o.Name 为 'ya'，o.name 为 '5'
  data(){
    return {
      n: 0
    }
  },
  template:  `
    <Add/>
  `
})

全局注册：

// args1：id，args2：definition -> 本质就是 options
Vue.component('Demo',{
  template: `
    <div>hi</div>
  `
})

// 使用

const vm = new Vue({
  data() {
    return {
      n: 0
    }
  },
  template: `
    <div>
      <Demo/>
    </div>
  ` 
})

3）什么是生命周期

从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

周期就像是：立个flag（未开始） -> 实现flag（进行中） -> 划掉flag（已完成）

生命周期

先天 new Vue() 一下，会有多个钩子函数自动执行，不同的钩子函数在执行的时候，可能会拿到不同的数据，如 beforeCreate 钩子执行时，就拿不到 data、methods里边的数据！而created钩子在执行时，就可以拿到data、methods里边的数据，这样我们就可以调用methods中的方法去操作data中的数据了！

4）8个钩子

主要关注 created、mounted、updated、destroyed 这四个钩子！

1、创建期间的生命周期函数

2、运行期间的生命中期函数

3、销毁期间的生命周期函数

一个组件实例的生命周期

运行期间的钩子可以多次执行 -> 创建期间的钩子只执行一次，当然，通过点击按钮v-if=false后，组件视图消失，组件实例的生命周期结束，然后你再点击按钮，v-if=true后，组件重新开始新的一轮生命周期！即又会来一次创建期间的钩子执行……

4、小结

8个钩子的执行时机

demo：测试8个生命周期钩子

★props（外部数据，或者称为属性）

props接收数据

在父组件里边，写在Props这个自定义标签上的message和 fn（命名）属性是由被引用的组件所决定的，在这里也就是Props组件决定的！ -> 总之，这不是我们父组件固定的命名 -> 即子组件决定了自己要接收哪些外部数据！

★了解更多

➹：Vue的两个版本 - 上帝之兵的文章 - 知乎

➹：Vue全解 - 知乎

➹：Vue构造选项入门属性讲解 - 知乎

➹：40.vue全解(起手式1) - 掘金

➹：Vue $mount的挂载入口的奥秘 - 掘金

➹：Vue.js 生命週期

➹：Vue.js component 使用說明

★总结