bestvike 资料 --vue2.0进阶

1 Vue.js 进阶篇

vue全家桶

Vue+Vue-router+Vuex+axios（代替vue-resource）

vue-cli

安装vue-cli

npm install -g @vue/cli  或者  cnpm install -g @vue/cli 或者 yarn global add @vue/cli

安装后查看版本

vue --version

cmd到自己要建项目的路径

vue create helloWorld

vue-Router

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

定义

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
  }
]

跳转方式

1.声明式

# path
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/user">MyHome</router-link>
# name  传一个对象
<router-link :to="{name:'user'}">MyHome</router-link>
<router-link :to="{path:'/user'}">MyHome</router-link>

2.编程式

 this.$router.push('/user')
 this.$router.push({name:'user'})

3.传递参数

# query
<router-link :to="{path:'/user'+,query:{item:'item'}}">MyHome</router-link>
this.$router.push({name:'user',query:{item:'item'}})
# 接收参数
this.$route.query.item
# params
<router-link :to="{path:'/user',params:{item:'item'}}">MyHome</router-link>
this.$router.push({name:'user',params:{item:'item'}})
# 接收参数
this.$route.params.item

刷新页面参数会丢失
一般使用将参数放在url上的方式

const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

this.$router.push('/user/'+item)
#接收参数 
this.$route.params.username

Vuex（熟悉）

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex 是什么？ | Vuex (vuejs.org)

axios

cnpm install axios --save

# main.js
Vue.prototype.$http = axios

 # GET 
 this.$http.get('/api/healthCheck').then(response => {
     if (response.data) {
         console.log(response.data)
     }
 }).catch(err => {
    alert('请求失败')
})
# POST
 this.$http.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

组件化开发

父组件向子组件内传值

import ComponentA from './ComponentA.vue'

export default {
  name:'componentItem',  
  components: {
    ComponentA
  },
  props:{
      item1:String,
      item1:Object,
      item1:Array,
      item2:{
          type:String,
          default:''
      },
      item3:{
          type:Number,
          default:0
      }
  }  
  // ...
}

子组件传值给父组件

this.$emit('closeMain',flag);

父子组件双向绑定[.sync]

<comp :foo.sync="bar"></comp>
==> 拓展为
<comp :foo="bar" @update:foo="val => bar = val"></comp>

#子组件内
this.$emit('update:foo',newValue)

当一次性设置多个属性时，.sync修饰符也可以和v-bind一起使用

<comp v-bind.sync="{foo: 1 , bar: 2}"></comp>

element-ui

1.npm方式引入element-ui

npm i element-ui -S   //cnpm i element-ui -S 

2.main.js增加配置

import elementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(elementUI);

# 正式开发一般按需引入
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);

练习题 教师管理

https://test.bestvike.com/bv_train_vue_cli/