测试开发进阶（十八）
欢迎关注我的公众号「测试游记」
element-ui其实就是一个组件库
ref 为一个元素或者子组件的应用
组件中定义的所有的ref都会放在当前组件的 $refs 属性中
this.$refs.multipleTable 就可以操作上面的内容了
一个登录页面
v-bind单向绑定，只能将Model中的数据传给绑定的属性
v-model双向绑定 v-model为双向绑定，既可以把Model中的数据传给绑定的属性，也可以把属性传回给Model
生命周期
beforeCreate
这个时候，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
created
这个时候可以操作vue实例中的数据和各种方法，但是还不能对”dom”节点进行操作；
mounted
这个时候挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行。注意：mounted在整个实例的生命周期中只执行一次。
computed
是把所有需要依赖其他值计算的值写成对象的key值。
watch
把监听的值写成对象的key值
-
varvm=newVue({})表示开始创建一个Vue实例对象 -
InitEvents&Lifecycle表示，刚初始化了一个Vue空的实例对象，这时候，该对象上，只有默认的一些生命周期函数和默认的事件，其他都没创建 -
在
beforeCreate生命周期函数执行时，data和methods中的数据都还没初始化 -
Initinjections&reactivity内部初始化 -
在
created中，data和methods都已经初始化好了。所以最早要使用他们只能在created中 -
create开始到beforeMount 表示Vue开始编辑模版，把Vue代码中的指令进行执行，最终在内存中生存一个编译好的最终模版字符串，然后渲染为内存中的DOM，此时只是在内存中渲染好了模版，并没有挂载到真正的页面中
-
beforeMount执行这个函数的时候，模版只是在内存中编译完成，但是没有挂载到页面中，所以此时页面还是旧的 -
Createvm.$elandreplace"el"withit：把内存中的模版替换到浏览器页面 -
mounted：执行完该函数，整个Vue实例已经初始化完毕，进入运行阶段 -
beforeUpdate：data中数据更新了，但是页面还没更新 -
updated：页面和data数据同步最新了 -
VirtualDomre-renderandpatch：根据data中的数据，在内存中渲染一份最新的DOM树，当它更新之后，会重新渲染到真实页面中去，就相当于完成了data(Model)-> view(视图层)的更新 -
beforeDestroy：Vue进入销毁阶段，但是data和methods还是可用的 -
destroyed：组件以及被销毁了，里面的东西都不能用了
组件声明
在 /src/main.js 入口js中进行声明 全局组件
父组件，子组件之间互相调用
App.vue
HelloWorld.vue
路由
-
创建单页面应用
-
官方路由组件，实现前端路由功能
在项目路径下安装
使用
借鉴官方操作
https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js
在 /src/router/index.js
修改 /src/main.js ，添加下面内容
修改 /src/App.vue 的 template
访问 \
访问 http://localhost:8080/login
在 App.vue 中添加：
命名路由
在组件中可以通过 this.$router 来获取查询字符串参数
访问 http://localhost:8080/greeting?name=zx&age=18
修改 /src/components/greeting.vue
路径参数
修改 /src/router/index.js
修改 /src/components/greeting.vue
About The Author
