Vue框架笔记完整版.docVIP

VUE

笔记

一、Vue2

需要重点关注的点：

mounted和updated：mounted在页面初次加载时调用，updated在data里的变量改变并且要在页面重新渲染完成之后，只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法

data函数式和对象式的区别：函数式，修改x1中的数据，x2中的数据不会跟着变；对象式，修改x1中的数据，x2中的数据会跟着变

每次调用vue.extend创建组件都会返回新的Vuecomponent，同一组件使用标签创建两次也是的四、ref任何标签都可以加五、关于props接收到的数据：1.可以实现组件复用，实现同一组件展示不同的数据；2.props接收到的数据会出现在vc上，不会出现在._data上；3.可以在script标签里使用this.变量名进行引用，可以在函数等修改props接收数据的值，但是控制台会警告，建议如下处理

scope的原理：scope的原理，为容器和样式添加标签，根据标签对应样式

组件间通信总结

父对子传数据：props

子对父传递数据：1.父给子传一个函数

1.组件自定义事件（子组件触发某事件并发送数据然后父组件接收到该事件并接收数据，然后做相应处理），组件原生事件触发必须要加“.native”自定义事件的第一种使用方法：

自定义事件的第二种触发方式：

任意组件之间传数据：全局事件总线（较简单）、消息订阅与发布（更推荐全局事件总线）八、插槽

插槽是一种组件的特殊形式：父组件将自己的结构传给子组件然后在子组件中规定的位置里插入；作用域插槽子组件可以给父组件传递数据，必须采用template结构接收，用“scope或者slot-scope接收”

关于在控制台打印

将变量添加到windows上就可以直接打印

路由传参

Query传参：

to的字符串写法

to的对象写法

detail里接收参数，参数的传递和接收不需要经过路由的index.js文件

Params参数：

to的字符串写法，需要在index.js文件里接收

to的对象写法，跳转的路径必须使用name，不能使用path，其他的同to的字符串写法

十一、路由传参通过props简化接收

方法一：测试了一下好像只有这一种方法可以

Message组件

Index.js里

Details组件里

1.计算属性的get和set2.计算属性和监测属性的区别3.计算属性和监视属性实现列表过滤4.v-model收集数据的修饰符（第15部分）尚硅谷Vue2.0+Vue3.0全套教程5.内置指令与自定义指令6.vue实例与组件实例的关系7.minin8.todolist编辑功能@blur获取到焦点时，里面的业务逻辑9.Vue3的watch再看一下

1.Vue是什么特点：声明式

Vue-resource-awesomevue和cookbook重点关注

下面代码，第一个正常输出尚硅谷，第二个原格式输出{{name}}el中#代表id选择器，.代表类选择器，容器和实例必须进行关联

vue

vue

需要注意的

2.Vue的模板语法

v-bind:动态绑定，单向绑定

前面只要遇到v-开头的，””里的会当做js语法去执行，””不再当成字符串v-bind:可以简写为：

插值语法一般用于标签体，标签属性用绑定，x=”hello”用于演示标签属性可以写死（不动态绑定）

v-model只能应用于表单类或输入类上，input、单选框、多选框、select等

3.el与data的两种写法

（1）el的两种写法

打印一个vue实例，带$是程序员在用的，没带$是顶层在用，不用修改

另一种容器和原型的关联方式

等一秒钟再关联，先出现“你好，{{name}}”，再出“你好，尚硅谷”

将容器交给实例解析，实例将解析好的内容再重新挂载在页面指定位置

（2）data的两种写法

函数式data可以简写为data(){

}

函数式的this是Vue实例写成箭头函数形式，此时this是window，因为箭头函数没有自己的this

4.MVVM模型

（1）理解MVVM

原理：把数据丢到框架中该放的位置，框架帮做一系列处理，然后生成想要的页面

vue上有的（console.log(vue)能打印出来的）都可以在模板里用

（2）object.defineProperty

在person里直接定义属性age，object.key(person)会把person的所有属性提取出来组成一个

数组

采用def