Javascript

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常用重难点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!