Vuex 1.state的使用 首先在src文件夹下面建一个store文件夹作为仓库 store里创建一些js文件作为相对应的存储空间 例如 store.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.store({ state: { //状态管理 count: 1 }, getters: { //获取状态值 getCount: function(state){ return state.count * 5 } }, mutations: { //操作状态 add: function(state){ state.count += 1 } }, actions: { //异步操作状态 addFun: function(context){ context.commit('add') } } }) |
在vue组件中使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
在插值表达式里 {{$store.state.count}} computed:{ count(){ return this.$store.state.count } } 更新state的值 methods: { change(){ this.$store.commit('add',args) //同步操作，可以有选择性的传参 }, asyncChange() { this.$store.dispatch('addFun') //异步操作 } } |
2.mapState的使用 1.在.vue组件中引入,在js块中引入
|
1 |
import { mapState } from 'vuex' |
2.在.vue组件中使用，一般放在computed里可以监听到状态改变
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
computed：{ ...mapState([ //mapState本是一个函数，在里面写一个数组，记得加... ‘num’ ， //存的数据 ‘id’ ]) } 或 computed: { ...mapState({ num: (state)=>state.num, //这种用法可以看作为起别名 id: (state)=>state.id }) } mapAction的使用 正常action的使用 this.$store.dispatch('function',args) mapAction import {mapActions} from 'vuex' methods: { ...mapActions(['fun1','fun2','fun3']) 或 ...mapActions({ fun1: 'fun1', fun2: 'fun2' }) } mapMutations的使用 //关于传参问题，直接在调用的地方传参 正常mutation的使用 this.$store.commit('function',args) mapMutations的使用 import {mapMutations} from 'vuex' methods:{ ...mapMutations(['fun1','fun2']) 或 ...mapMutations({ fun1: 'fun1', fun2: 'fun2' }) } |
混入 (mixin) 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 **组件的思想主要是用来解决重复码有相似功能的代码，并使其标准化，统一化，但在前端更多是体现在界面上的视觉效果，如果要实现功能大体相同，界面需要个性化，但又不想传入过多的props怎么办呢 这时mixin便有了其用武之地，可以使用相同的js逻辑，template和css自定义就好了** 具体使用： 先在src下建一个文件夹mixin 然后在该文件夹下创建你需要按功能取名的js文件 例如common.js
|
1 2 3 4 5 6 7 8 9 |
const toggle = { //你需要引入哪些就加哪些 data(){ return {} }, created(){}, methods:{} ... //还可以添加 } export toggle |
在.vue文件中使用
|
1 2 3 4 |
import { toggle } from '@/mixin/common.js' export default { mixins: [toggle] } |
注意：如果混入里的东西和组件内的有冲突，会使用组件内的，欲安内必先攘外 全局混入 在main.js中定义
|
1 2 3 4 5 |
Vue.mixin({ created: function () { } ... // 省略 }) |
from:https://segmentfault.com/a/1190000020617036
View Details1. vue脚手架
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm install npm run dev 生产环境打包发布 npm run build npm install -g serve serve dist http://localhost:5000 |
2. eslint
|
1 2 3 |
用来做项目编码规范检查的工具 基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息 有相应的配置, 可定制检查 |
3. 组件化编程
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
vue文件包含3个部分 <template> <div></div> </template> <script> export default { props: []/{} data(){}, computed: {} methods: {}, watch: {} filters: {} directives: {} components: {} } </script> <style> </style> 组件化编码的基本流程 1). 拆分界面, 抽取组件 2). 编写静态组件 3). 编写动态组件 初始化数据, 动态显示初始化界面 实现与用户交互功能 组件通信的5种方式 props vue的自定义事件 pubsub第三方库 slot vuex(后面单独讲) props: 父子组件间通信的基本方式 属性值的2大类型: 一般: 父组件-->子组件 函数: 子组件-->父组件 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) vue自定义事件 子组件与父组件的通信方式 用来取代function props 不适合隔层组件和兄弟组件间的通信 pubsub第三方库(消息订阅与发布) 适合于任何关系的组件间通信 slot 通信是带数据的标签 注意: 标签是在父组件中解析 vuex 多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目 |
4. ajax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
相关库: vue-resource: vue插件, 多用于vue1.x axios: 第三方库, 多用于vue2.x vue-resource使用 // 引入模块 import VueResource from 'vue-resource' // 使用插件 Vue.use(VueResource) // 通过vue/组件对象发送ajax请求 this.$http.get('/someUrl').then((response) => { // success callback console.log(response.data) //返回结果数据 }, (response) => { // error callback console.log(response.statusText) //错误信息 }) axios使用 // 引入模块 import axios from 'axios' // 发送ajax请求 axios.get(url) .then(response => { console.log(response.data) // 得到返回结果数据 }) .catch(error => { console.log(error.message) }) |
5. vue-router
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
vue用来实现SPA的插件 使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '/about' } ] }) 2. 注册路由器: main.js import router from './router' new Vue({ router }) 3. 使用路由组件标签: <router-link to="/xxx">Go to XXX</router-link> <router-view></router-view> 编写路由的3步 1. 定义路由组件 2. 映射路由 3. 编写路由2个标签 嵌套路由 children: [ { path: '/home/news', component: news }, { path: 'message', component: message } ] 向路由组件传递数据 params: <router-link to="/home/news/abc/123"> props: <router-view msg='abc'> 缓存路由组件 <keep-alive> <router-view></router-view> </keep-alive> 路由的编程式导航 this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) this.$router.back(): 请求(返回)上一个记录路由 |
from:https://blog.csdn.net/w789g4/article/details/91046416
View DetailsECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 ES6 下面逐一为大家详解常用的ES6新特性： 1.不一样的变量声明：const和let ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部） let和var声明的区别：
|
1 2 3 4 5 6 |
var x = '全局变量'; { let x = '局部变量'; console.log(x); // 局部变量 } console.log(x); // 全局变量 |
let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：
|
1 2 |
const a = 1 a = 0 //报错 |
如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：
|
1 2 3 4 |
const student = { name: 'cc' } student.name = 'yy';// 不报错 student = { name: 'yy' };// 报错 |
有几个点需要注意： let 关键词声明的变量不具备变量提升（hoisting）特性 let 和 const 声明只在最靠近的一个块中（花括号内）有效 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING const 在声明时必须被赋值 2.模板字符串 在ES6之前，我们往往这么处理模板字符串： 通过“\”和“+”来构建模板
|
1 2 3 |
$("body").html("This demonstrates the output of HTML \ content to the page, including student's\ " + name + ", " + seatNumber + ", " + sex + " and so on."); |
而对ES6来说 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定； ES6反引号()直接搞定；
|
1 2 |
$("body").html(`This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.`); |
3.箭头函数（Arrow Functions） ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体； 箭头函数最直观的三个特点。 不需要 function 关键字来创建函数 省略 return 关键字 继承当前上下文的 this 关键字
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ES5 var add = function (a, b) { return a + b; }; // 使用箭头函数 var add = (a, b) => a + b; // ES5 [1,2,3].map((function(x){ return x + 1; }).bind(this)); // 使用箭头函数 [1,2,3].map(x => x + 1); |
细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return； 4. 函数的参数默认值 在ES6之前，我们往往这样定义参数的默认值：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// ES6之前，当未传入参数时，text = 'default'； function printText(text) { text = text || 'default'; console.log(text); } // ES6； function printText(text = 'default') { console.log(text); } printText('hello'); // hello printText();// default |
5.Spread / Rest 操作符 Spread / Rest 操作符指的是 …，具体是 Spread 还是 Rest 需要看上下文语境。 当被用于迭代器中时，它是一个 […]
View Details今天呢，就说一说mixins和组件，经常使用vue框架的朋友对这两个应该是不陌生的，他们两个的用法功能好像在项目中的所扮演的角色差不多。我们就带着这个疑问进行扒一扒吧 我们先从api文档中看一看官方是如何定义他们的。 mixins：混入，是一种分发Vue组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 组件：是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义的元素，vue的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展 在我的眼中呢，他们的区别是什么呢？ 组件在引用之后，相当于在副组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明的，相对独立 而mixins则是在引入组件之后，将组件内部如data等方法，method等属性与父组件相应内容进行合并，相当于在引入后，副组件的各种属性方法被扩充了 组件之间是可以有通信的，而mixins比组件多了一个data的merge。两者使用的场景不同，具体的还要在不同的项目中进行决定使用mixins好还是组件合适 未完待续哦。。。 作者：都市尘埃i 链接：https://www.jianshu.com/p/f2a897cd3d7b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details