vue第五篇

一、安装一个项目

• 安装vue：cnpm install vue -g
• 安装vue-cli脚手架：cnpm install -g @vue/cli
• 查看脚手架的版本号：vue -V
• 拉取vue-cli2：npm install -g @vue/cli-init
• 创建项目：vue init webpack vuebase
• 进入项目中（cd vuebase），安装所需依赖：cnpm install
• 进入项目中，启动项目：npm start|npm run dev

二、复习基本语法

复习1：

• v-model：表单的输入绑定（专属）
• 表单 <input> 、<textarea> 、<select> 元素上创建双向数据绑定
• 修饰符：
• .lazy：可以减少网络请求次数（在“change”时而非“input”时更新）
• .number
• .trim：去掉前后空格

复习2：

1、组件传递数据props

• 可以指定类型：

props:{
	title:String,
	age:Number,
	nick:{
		type:String,
		default:"笑死我了"  // 父组件不给子组件传值时，可以自己设置默认值
	},
	parent:{
		type:String,
		required:true  // 父组件向子组件传递数据时必须传递一个parent数据（必选项）
	}
 	// 默认值如果是一个对象，必须返回一个function：
    grilfriends:{
        type:Array,
        default:function(){
            return ['aa','bb','cc']
        }
    }
}

2、自定义事件向父组件传递数据
3、keep-alive：用于动态组件中，保持切换状态，也可以用于路由

<keep-alive>
     <component :is='currentComponent'></component>
</keep-alive> 

4、访问根实例：子组件可以通过 $root访问根实例的数据，但是要在computed中用
5、访问子组件实例或子元素：$refs
6、slot：内容分发（传递视图）

• 基础插槽
• 具名插槽
• 编译作用域：
• 父组件模块的所有东西会在父级作用域内编译，子组件模块的所有东西会在子级作用域内编译
• 作用域插槽（我们称为数据传递）：视图展示的数据由子组件决定，数据展示效果由子组件决定

四、跨域问题

1、Axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中

• 安装：cnpm install --save axios

2、解决跨域问题：

（1）在build/webpack.dev.conf.js中找到proxy（代理）–>接着找到config/index.js/proxyTable中配置：

proxyTable: {
	// 跨域处理：
   '/doubai_api':{
        target:'https://api.douban.com',
        pathRewrite:{
           '^/doubai_api':''
        },
        changeOrigin:true
    }
},

（2）每次修改过配置文件都要重启浏览器

（3）在mian.js中挂载HOST：

Vue.prototype.HOST = '/doubai_api'

// 相当于this.HOST+'/doubai_api'

（4）修改前端访问方式：

 var url = this.HOST + '/v2/movie/top250'  // 修改过后
 this.$axios({
    method:'get',
    url:url
 }).then(res=>{
    console.log(res);
 })
 .catch(err=>{
    console.log(err);
 })

五、路由

1.安装路由：cnpm install vue-router --save
2.在main.js中导入路由，如果在一个模块化的工程中使用路由，必须要显式安装路由，明确的安装路由功能：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.在main.js中创建路由：

// 创建路由：
const router = new VueRouter({
  routes:[
    {
      path:'/',  // 代表根路径
      name:'HelloWorld',  // 路由的名字（用于跳转）
      component:HelloWorld // 在此文件中引入的路由
    }
  ]  
})

注意：

• // path:’/'代表根路径
• path:’/hello’— 访问：http://localhost:8080/#/hello
• // path:’/’----访问：http://localhost:8080/#/

4.动态传递（参数传递）：
router/index.js中：

{
    path:'/learn/:name',
    name:'Learn',
    component:Learn
}

传参：<router-link to="/learn/vue">learn</router-link>

接收参数：$route.params.name

<template>
    <div>
      学习路由使用{{this.$route.params.name}}
    </div>
</template>

5.编程式导航：

• $router.push()
• $router.replace()
• $router.go(number)
  6.命名路由的意义：用于传递参数
  (1)在App.vue页面传递参数:

// 把路由换成：
<!-- 这个name要和router/index.js中的name一致 -->
<router-link :to="{name:'HelloWorld', params:{hellomsg:helloparam}}">hello</router-link>

HelloWorld页面接收参数：{{this.$route.params.hellomsg}}
(2)在App.vue页面传递参数：

this.$router.push({ name: 'HelloWorld',params: {userId: this.clickParam} })

HelloWorld页面接收参数：{{this.$route.params.userId}}

所以参数传递有两种：

• 在url地址后直接传递参数
• 通过name属性传递参数

7.连续点击相同路由导致报错(不影响正常操作行为)：在显式安装路由器之前添加以下代码

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

四、第三组件

1、element-ui:https://element.eleme.cn/#/zh-CN/component/installation

• 安装element-ui：cnpm install element-ui -S
• 在main.js中导入：

// import ElementUI from 'element-ui'  // 引入element-ui
// import 'element-ui/lib/theme-chalk/index.css';  // 引入element-ui样式
import { Button } from 'element-ui';  // 按需引用：用啥引啥，减小项目体积

// Vue.use(ElementUI)
Vue.use(Button)  // 使用部分button的样式

• 按需引入，要安装一个插件：cnpm install babel-plugin-component -D

2、vue-awesome-swiper：https://github.com/surmon-china/vue-awesome-swiper

• 安装：cnpm install swiper vue-awesome-swiper --save
• 如果分开安装要注意swiper和vue-awesome-swiper的版本匹配问题
• 在main.js中导入：

import VueAwesomeSwiper from 'vue-awesome-swiper'   // 引入swiper   
import 'swiper/css/swiper.css'  // 引入swiper的样式（注意不同版本有不同的样式）

Vue.use(VueAwesomeSwiper)

3、其他第三方常用组件：https://github.com/vuejs/awesome-vue

五、写小demo（模拟），进度较慢