「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
基本使用
1). 引入vue.js
2). 创建Vue实例对象(vm), 指定选项(配置)对象
el : 指定dom标签容器的选择器
data : 指定初始化状态数据的对象/函数(返回一个对象)
3). 在页面模板中使用{{}}或vue指令
- el 指定dom标签容器的选择器
Vue就会管理对应的标签及其子标签
- data 对象或函数类型
指定初始化状态属性数据的对象
vm也会自动拥有data中所有属性
页面中可以直接访问使用
数据代理: 由vm对象来代理对data中所有属性的操作(读/写)
- methods
包含多个方法的对象
供页面中的事件指令来绑定回调
回调函数默认有event参数, 但也可以指定自己的参数
所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx
- computed
包含多个方法的对象 对状态属性进行计算返回一个新的数据, 供页面获取显示
一般情况下是相当于是一个只读的属性
利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
如何给对象定义get/set属性
在创建对象时指定: get name () {return xxx} / set name (value) {}
对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
- watch 包含多个属性监视的对象
分为一般监视和深度监视
xxx: function(value){}
xxx : {
deep : true,
handler : fun(value)
}
另一种添加监视方式: vm.$watch('xxx', function(value){})
v-text/v-html: 指定标签体
* v-text : 当作纯文本
* v-html : 将value作为html标签来解析
v-if v-else v-show: 显示/隐藏元素
* v-if : 如果vlaue为true, 当前标签会输出在页面中
* v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
* v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
v-for : 遍历
* 遍历数组 : v-for="(person, index) in persons"
* 遍历对象 : v-for="value in person" $key
v-on : 绑定事件监听
* v-on:事件名, 可以缩写为: @事件名
* 监视具体的按键: @keyup.keyCode @keyup.enter
* 停止事件的冒泡和阻止事件默认行为: @click.stop @click.prevent
* 隐含对象: $event
v-bind : 强制绑定解析表达式
* html标签属性是不支持表达式的, 就可以使用v-bind
* 可以缩写为: :id='name'
* :class
* :class="a"
* :class="{classA : isA, classB : isB}"
* :class="[classA, classB]"
* :style
:style="{color : color}"
v-model
* 双向数据绑定
* 自动收集用户输入数据
ref : 标识某个标签
* ref='xxx'
* 读取得到标签对象: this.$refs.xxx
Vue 的初始化过程（new Vue(options)）都做了什么？
-
处理组件配置项
- 初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上
- 初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率
-
初始化组件实例的关系属性，比如 children、refs 等
-
处理自定义事件
-
调用 beforeCreate 钩子函数
-
初始化组件的 inject 配置项，得到
ret[key] = val形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上 -
数据响应式，处理 props、methods、data、computed、watch 等选项
-
解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
-
调用 created 钩子函数
-
如果发现配置项上有 el 选项，则自动调用 mount 方法，反之，没提供 el 选项则必须调用 $mount
-
接下来则进入挂载阶段
