vue常用重难点

本文主要是介绍vue常用重难点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.跳转页面与参数

（1）路由携带参数跳转

    //   this.$router.push({
    //     path: "/teacher/save",
    //     query: {
    //       id: id,
    //     }

（2）使用router-link跳转

 <router-link :to="'/teacher/edit/' + scope.row.id">

取值：this.$route.params.id

注意：使用第二种时要在路由后面加上路径后面加上‘’/:id‘

2.vue组件间的通迅方式

2.1父组件——>子组件

方式：父组件给子组件绑定属性，子组件通过props属性来接收传递的数据

2.2子组件——>父组件

方式：在父组件中声明一个接收数据的函数，父组件给子组件绑定事件，子组件通过$emit触发事件，并且可在此时传递参数。 

2.3非父子组件间的通讯

方式：创建一个新的vue实例让各个兄弟共用同一个事件机制，传递数据方通过事件触发$emit接收数据方，在mounted()钩子函数中触发事件$on

3.vue的常见指令（易混淆的）

v-text：更新dom对象的textContext

v-html：更新dom对象的innerHTML

v-bind：当表达式的值改变时，将其产生的连带影响，v-bind：可简写成：表单能够拿到vue中的数据,表单中的数据也能够传到vue中

v-model：主要是用在表单元素中，它实现了双向绑定。在同时使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定。只能是表单拿到vue的数据,vue没法拿到表单的数据

v-on：绑定事件，可简写为@

v-if：根据表达式的值的真假条件，销毁或重建元素

v-show：根据表达式的真假值，切换元素的display，css属性

v-for：persons是数据，person是当前的一条数据， index代表当前索引值。列表渲染也可以用 of 来代替 in 作为分隔符。
当遍历对象属性时候，有两个可选参数，分别键名和索引值。key只能为number或string，且key的值必须是唯一的

<li v-for="（val, key,  index） in persons"> {{ person.index }} - {{ person.key }}: {{ person.val }} </li>

4.vue的生命周期

vue的生命周期一共分为八个阶段

1、beforeCreate（创建前）

2、created（创建后）

3、beforeMount（载入前）

4、mounted（载入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（销毁前）

8、destroyed（销毁后）

vue第一次页面加载会触发哪几个钩子函数：

beforeCreate、created、beforeMount、mounted

5.vue全家桶

vue-router：关于路由方面的配置

vuex：数据共享和缓存用

vue-resource：用于后台交互（现在改为axios）

vue-cli：快速创建项目的脚手架

这篇关于vue常用重难点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！