Vue—使用的注意项

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 })