VUE忏悔学习2-Vue实例化

1、创建一个VUE实例

2、什么是声明式渲染？

声明式渲染就是一种利用简洁的模板语法通过声明的方式将数据渲染进dom里面的渲染方法。

vue的核心就是声明式渲染。

3、关于{{msg}}的插值表达式

3.1  可以写插值，类似上图中的{{msg}}

3.2  也可以写JavaScript表达式

Ps：{{  }}内只能包含单个表达式，通过vm.$data.num可以获得4的值，以此类推。

4、案例（利用定时器更改data中的数据）

注释：vue实例中data的属性是一个对象，通过vm.$data获得。

5、实例上的方法

5.1   vm.$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

用法示例，有一个页面由父组件，子组件，孙子组件构成，如下：

js代码：

打印结果：

其中，name：“张三”因为被子组件声明prop了，所以没有被孙子组件的$attrs所包括在内。

5.2  其他属性和方法

vm.$data                            获取vm上data的属性对象

vm.$watch                         获取vm上的所有监听器组成的对象

vm.$el                                获取当前vm所绑定的DOM元素

vm.$set                              获取vm上后来添加的响应属性

vm.$options                      获取vm配置上的所有属性和方法

vm.$nextTick(()=>{})         异步方法，等待渲染dom完成后来获取vm，以免获得的是未改变的值。

vm.$refs                             获取vm实例中引用的dom元素或者子组件

6、Vue 操作DOM元素

注意：必须是Vue接管的DOM元素以内的元素，以外的元素就算使用了ref也是获取不了的，获取到值会是undefined。