Vue—使用的注意项
1、vue文件一般放在html标签之后,因为vue实例需要绑定在html标签上,所以需要先加载html元素
2 传递参数时,第二个参数要与前面的逗号有一个空格
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
3、Vue的生命周期:
-
beforeCreate(创建前),在数据观测和初始化事件还未开始
-
created(创建后),完成数据观测,属性和方法的运算,初始化事件, $el 属性还没有显示出来
-
beforeMount(载入前),在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
-
mounted(载入后),在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
-
beforeUpdate(更新前),在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
-
updated(更新后),在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
4、在 webpack 环境下开发使用 vue ,不能直接导入vue文件,需要导入 vue/dist/vue.esm 的js文件
5、vue几种常用的指令
- v-bind: 行间属性绑定 或者用冒号 :
- v-bind:title 鼠标移上的显示
- v-bind:src 绑定图片路径
- v-bind:html 绑定HTML文本和标签
- v-bind:text 绑定文本 (字符串)
- v-bind:class 绑定类样式(数组)
- v-bind:style 动态绑定样式 (对象)
- v-for: 1.x 和 2.x是不一样的
- v-for=“i in json”
- v-for="(key, value) in json"
6、在项目的config目录下的index.js文件中,把 autoOpenBrowser 对象设置为 true 可以在运行运行项目的时候自动打开浏览器
7、当需要修改UI框架的样式时,不要在有scoped属性的样式表中修改,可以在app.vue中修改
8、vue有一个内置的组件 ,它的作用是用来装载html元素的,他自己不会被编译成标签,只会把里面的内容带进去,所以它不会打破原有的布局,尤其是在solt插槽中使用比较常见
9.v-if 和 v-show 区别
v-if按照条件是否渲染,v-show是display的block或none
10.$route 和 $router 的区别
- $route是“路由信息对象”,
当前的页面的路由信息: 包括path,params,hash,query,fullPath,matched,name等路由信息参数。 - 而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
使用方法:
- 创建模板: var Home = {template:"#home"}
- 配置路由: var routes = [{path:"/home", component:Home}]
- 生成路由: var route = new VueRouter({routes});
- 启动路由 new Vue({ router })