• 欢迎来到本博客,希望可以y一起学习与分享

vue + vue-router + vuex + axios 小记

JavaScript/Jquery benz 3年前 (2018-03-29) 153次浏览 0个评论 扫描二维码
文章目录[隐藏]

一、入门

组件

组件的嵌套&组件数据data要写成方法,返回数据

单文件组件(html+css+js 都写在同一个页面,并且以vue为后缀)

页面指令

页面缓存

动态改变html属性:(v-bind:指定属性);简写(:指定属性}

输出多个class

条件输出class

html输出标签 与 text 输出标签

循环输出指令:v-for

数组循环

数组循环索引 index

对象循环

你也可以提供第二个的参数为键名:

第三个参数为索引:

{{ index }}. {{ key }}: {{ value }}

注意:数组的索引是 index ,对象的索引是key
v-for写在那个标签上,就循环那个标签

事件绑定指令: (v-on:事件=”方法”),简写(@事件=”方法”)

注意:还有数据动态添加,修改指定数据

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' })

条件指令:v-if  v-else

显示指令:v-show

数据绑定:v-model 实时更新

如果是checkbox、radio等多选,data中的初始值为空数组
v-model.lazy=”” 延迟加载,不在输入模式,才刷新数据
v-model.number=”” 声明为数字类型

动态引用组件: (:is=”组件名”)

vue的计算属性:computed

监听data的值,如果data值有变化,会触动此属性

vue 属性监听:watch

每当有属性的变化,就会触发此属性里的自定义方法

子父组件互传数据:

父传子,父在模板渲染标签处传值,子使用props属性接收
子传父,子定义一个事件,调用vue的emit方法,返回数据,父在组件渲染处,定义一个约定的事件接收

子组件

父组件向子组件插入内容,使用插槽标签:slot

父组件

子组件

 

动画标签:transition

过度标签相同,要用key区别

路由vue-router

引入路由

import Router from ‘vue-router’

全局使用

Vue.use(Router)

注册路由

new Vue({

router,

})

使用路由

指定路由转跳后,组件显示的位置:标签router-view

路由连接:标签router-link

路由传参

接收路由参数: $route.params

方法

组件

路由嵌套

路由url模式

路由重定向

路由命名

路由视图命名

编程式路由

router.push({path:’apple’});

路由转跳前执行的操作

router.beforEach()

 

状态管理:vuex

一处组件状态改变,全局对应的组件同步改变。
比如,一处的购物车组件的价格改变,所有购物车组件同步改变
vex的核心是store(数据中心)。
一处组件改变,导致store同步改变,再由store通知所有组件同步改变

引入vuex

import Vuex from ‘vuex’

全局使用

Vue.use(Vuex)

实例vuex

注册vuex

new Vue({

store,

})

vuexs实例,核心$store

 

api请求:axios

 


文章 vue + vue-router + vuex + axios 小记 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!