vue基础学习笔记（五）

---

0. vue相关知识点总结

1. 准备开始

1.1学员反馈

vue的环境好难弄

老师，node_modules？？？？？

东西多记不住，老师能串联着大概说下吗……

render: c => c(App)这是啥，babel->语法转换器，转换ES6/7、react、 options: {presets: [‘es2015’], plugins: [‘transform-runtime’] }这是啥，
车速有点快啊，之前上自习的人表示追不上车了，你们下坡下的太快了(o@.@o)(o@.@o)

迷迷糊糊，只能晚上回去梳理一遍

老师很仔细!

好

父子组件之间通信规则不太清楚,
父向子 -> 自定义指令给属性传值
子向父 -> 通过事件触发 -> 只能是同一个对象的事件监听和触发 $emit
vue bus 同一辆车在不同的地方使用($on/$emit)
讲的太快，接受不了。

1.2 复习

• vue步骤
  • index.html 单页应用程序的显示部分 127.0.0.1
    • 由于我们使用了html-webpack-plugin插件， 引入的script都不需要写了
  • 入口js main.js
    • 引入 Vue 、VueRouter，配置路由规则(创建对象),创建Vue实例对象,给其进行options配置
• vue文件注意事项
  • template 1根 script data是函数返回对象 style scoped范围生效
• options:
  • template:html片段，可以包含{{text}}
  • data:(在new Vue的时候是对象，在组件内是函数)
  • 构建Vue实例 router: 配置路由
  • el: 指定元素(’#app’)
    • 1:判断是字符串还是DOM元素
    • 2: 也可以获取到该dom元素直接作为el的值,性能能提升一点
• 组件options
  • data是一个函数，返回一个对象
  • methods是一个对象,其key是函数名，value是函数体
    • 在模板中直接使用函数名，在js部分使用this.函数名
  • props:是一个数组,['xxx','abc']
    • 在模板中直接使用，在js部分通过this.$props.xxx使用
  • components:是一个对象,声明组件内引用的子组件
    • 引入、声明、使用
  • filters:是一个对象,其过滤器名称对应的函数，接受一个value，最终返回一个value
  • 生命周期：created模板还未生成、发起请求获取数据,不能操作DOM
    • mounted: 数据已经装载到模板上，操作DOM
    • mounted 元素上有ref=“name” ,在钩子函数中this.$refs.name操作DOM元素
• 实例(vm/this(VueComponent对象))事件
  • $emit/$on/$once/$off()
• 实例属性
  • $props,$parent,$children,$refs
• 全局函数
  • Vue.use(param) 安装插件 param需要实现install函数 接受一个Vue，可以在Vue的原型上挂载属性，后期组件内通过this.就可以拿到该数据，在所有组件中使用
  • 单文件 Vue.component(名称,组件对象)
  • 引包 Vue.component(名称,options)
  • Vue.filter(过滤器名,function(value){ return value; } )
• 生僻指令
  • :key 当DOM列表中删除某一个元素 ，更优化的方案是直接删除这一个DOM元素
  • Vue就需要辨识你删除的数组中的元素与DOM中那个元素的对应关系
    • 如果不指定key,vue也会去计算，把对象计算出一个唯一标识，相对损耗性能
    • 我们来通过key告知vue,这个元素的标识就是obj.id index,可以很好的提升性能
  • v-on:事件 @事件=

• v-bind:属性 :属性=

• 由使用
  • 使用步骤
    • 1:下载
    • 2: 引入对象
    • 3: 安装插件
    • 4: 创建路由对象配置路由规则
    • 5: 配置进vue实例对象的options中
    • 6: 留坑
  • 1:去哪里
  • 2:导航 {name:'xxx' ,path:'/xxx',component:Home}
  • 3:去了以后干什么
    • 在created函数中，发请求
    • 获取路由参数 this.$route.params|query.xxx;

1.3 今日重点

• 项目相关插件
• webpack开发必备
• 项目起步
• vuex 使用
• 处理bootstrap
• webpack代理
• webpack使用非模块化
• vue-router 分块懒加载
• 打包提取css
• 分离第三方库

2. 相关知识总结

2.1 独立构建 vs 运行时构建

• 独立构建：引包的方式
• 运行时构建: 单文件方式

2.2 计算属性

• 案例：

  • 计算器
  • options:computed:{ getResult:function(){ return obj||str } }

• 利用相关参数的属性发生改变触发函数，逻辑入口点太多，不方便

• 如果当属性没有发生改变也会触发(性能不太好)

• 计算属性可以根据当前值如果没有发生改变，取缓存中的值，不触发计算函数

• 凡是与this相关的属性在计算属性中出现，任意一个发生改变，就会触发

2.3 嵌套路由

• 案例
  - 我的主页显示：好友、歌曲
• 由于路由的跳转会导致整个router-view重新渲染，其中如果有些部分从未发生改变，就没有必要重新渲染，由此嵌套路由就能解决该问题
  • 在变化中去保持不变

2.4 编程式导航

• 模拟类似用户点击的行为，通过程序来发生锚点值改变，从而触发后续的行为
• 借助浏览器history历史功能向前和向后的功能
• 在vue-router安装插件以后，就多了两个属性
  • this.$route 具备路由信息只读的 req
  • this.$router 具备相关功能 res

//跳转会home页面
this.$router.push({
		 name: 'home',
		path: '/'
});  //参数可以是字符串代表path，
//也可以给对象（命名路由）
		//后退 
this.$router.go(-1);

• 就是用程序操作历史记录及导航栏url

2.5 vue-resource(了解)

• 发起http请求
• 1:下载
• 2:安装插件
• 3:this.$http.get|post发起请求

2.6 axios

• 可以发起http请求，运行在浏览器和Nodejs
• 合并请求,如果有多个请求，保证每一个请求都成功才算ok，否则异常
• http://www.cnblogs.com/Upton/p/6180512.html

axios.all([get1(), get2()])
	.then(axios.spread(function (res1, res2) {
		// 只有两个请求都完成才会成功，否则会被catch捕获
	}));

• 作者不支持跨域
• 1:下载
• 2:引入、挂载Vue原型上，this.xxxx 使用

2.7 mint-ui

• 移动端组件库,
• https://mint-ui.github.io/#!/zh-cn
• 图片懒加载 lazy load v-lazy

2.8 mui

• 前端UI框架 -> user interface
• 栅格系统
• http://www.dcloud.io/hellomui/examples/grid-default.html
• 代码: mui-master\examples\hello-mui\examples

2.9 i18n

• internationalization
• 国际化
• index.html -> 中国人
• index.html -> 美国人
• vue-i18n

2.10 单文件方式引入bootstrap

• bootsrap依赖全局$需要声明全的，webpack默认将$作为局部的

//声明全局对象的插件
new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'window.$': 'jquery',
}),

• 以上方式是将jquery声明成全局变量。供bootstrap使用

2.11 使用webpack代理跨域

this.$ajax.get('/v2/book/1220562')
//在根属性 配置跨域代理
devServer: {
    proxy: {
        "/v2": {
            target: "https://api.douban.com",
            //默认代理是自己,请求devserver的服务器去了
            changeOrigin: true,
        }
    },
    post: 8080
}

2.12 视口

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

3. 相关环境总结

• webpack.config.js -> 入口和出口，解决文件的解析loader
• index.html -> SPA
• main 程序入口
• app.vue 主体组件文件
• components -> 各种功能页面的组件
• static
  • 全局css
  • img图片
  • vender -> mui

3.1 npm命令

• npm i(install) 包名 -S(–save)-D(–save-dev) 安装包
• 全部或者生产恢复包: npm i(install) --production(只恢复生产依赖dependencies)

3.2 yarn命令

• yarn add||remove 包名 -S(–save)-D(–save-dev) 安装包
• 全部或者生产恢复包: yarn i(install) --production(只恢复生产依赖dependencies)

3.3 资源

• https://mint-ui.github.io/#!/zh-cn

4. vuex核心插件

• 项目越来越大以后，每个组件内部的一些数据，可能需要共享给其他组件
• 组件之间通信的问题，
• vuex全局共享数据的管理
  • getters来获取
  • state存数据
  • commit来提交数据的修改
  • mutations 更改state
  • modules 其实就是封装了以上属性的一个对象，给一个模块名:对象
• 加上namespaced:true的时候在增删改查都需要补上命名空间

import Vue from 'vuex';
import Vuex from 'vuex';
import App from './app.vue';
Vue.use(Vuex);
//可以通过this.$store.state获取，最好通过getter获取
let store = new Vuex.Store({
    //数据
    state:{
        nums: 1
    },
    mutations:{  //必须是同步函数
        //改变
        //通过this.$store.commit('add', {num: 5}) 提交修改
        add(state, obj){
            state.num += obj.num;
        }
    },
    actions: {  //从行为来触发改变,可以执行异步操作
        //通过this.$store.dispatch('addNum');来调用    
        addNum({commit}, obj){
            commit('add', obj)
        }
    },
    getters: {
        getNum(state){
            return state.num;
        }
    }
});
new Vue({
    el: 'app',
    render: c=>c(App),
    store,
})

4.1 modules分割模块

• modules:{prod:Prod,user:User}
• 命名空间 namespaced:true 同名冲突

4.2 webpack使用非模块化

• 如何加载非模块化的代码
• exports-loader

let test1 = require('exports-loader?test1!./test.js);
console.log(text1);

4.3 vue-router 分块懒加载

• 注意：只要是在main里面将要使用到的组件，就不能用懒加载
• 1:App.vue,render中存在
• 2:全局组件不行
• 3:在main.js中出现，而不是仅仅出现在路由规则的配置中的，不行