vue学习⼼得
前⾔
使⽤vue框架有⼀段时间了，这⾥总结⼀下⼼得，主要为新⼈提供学习vue⼀些经验⽅法和项⽬中⼀些解决思路。
⽂中谨代表个⼈观点，如有错误，欢迎指正。
环境搭建
假设你已经通读vue官⽅⽂档（⽂档都没读⼀遍（⾄少），那不建议动⼿撸码），在⼤致了解vue是什么东西，有什么⽤，核⼼概念之后我们就可以开始着⼿学习vue。⾸先搭建环境。
学习vue，我的建议是通过官⼿脚⼿架起步。
>>>Installation
$ npm install -g vue-cli
>>Usage
$ vue init <template-name> <project-name>
>>>>Example:
$ vue init webpack my-project
根据需要安装插件yes or no,⼀直回车，脚⼿架就⽣成了。接下来剖析脚⼿架结构。
脚⼿架结构剖析
再开始写项⽬之前，我们需要弄清什么地⽅写什么代码。
build⽂件夹
webpack配置⽂件。此处配置webpack规则。整个项⽬是通过webpack⽀持的。⽐如你要使⽤less，你需要在webapck规则⾥使⽤less。src ⽂件夹
撸码的地⽅～基本你所有的代码都在这⼀块完成。
>## assets⽂件夹
存放web中引⽤的图⽚媒体资源。
>## components⽂件夹
主要存放可复⽤组件，你可以在任意页⾯中复⽤这些组件。
>## router⽂件夹
index.js 路由配置⽂件。在此处配置各个页⾯的跳转引⽤关系。
>## APP.vue
这⾥看⼀看做页⾯的根部。我们可以在这个页⾯进⾏⼀些css reset 操作。
>## main.js
根逻辑，页⾯加载⾸先会加载这份js⽂件。
static⽂件夹
主要存放外部引⽤资源。⽐如xxx.min.js
index.html
vue是spa应⽤，所以只有⼀个⼊⼝，也就是index⽂件，这⾥我们进⾏⼀些不可更改资源（⽐如某某库）的引⽤，和html页⾯meta 、title之类的设定。
vue核⼼概念
vue的核⼼概念是‘数据驱动’，假如我们需要切换view层，我们应该修改的是数据。下⾯我会分享⼀些我⾃⼰在学习vue中收获的⼀些实例，⼤家⾃⾏感受。
实例展⽰的是⽅法论，概念性⼀样的东西，不要被例⼦局限，要将思维扩散出去。知识点学习还是看官⽅⽂档为主。
vue如何处理dom显⽰，样式切换，动态样式
watch 和 computed的简析
vue提供了2个动态监测data的函数，⼀个是watch，⼀个是computed。
watch：主要监测已经存在的data，处理data变化后的钩⼦
computed：处理⼀个已存在的data，返回⼀个data
vuex 是⼀个⽐较好的例⼦，可以⽤来学习监测，什么时候⽤什么⽅法去处理这些变化。
v-for 列表渲染机制
v-for 是我认为vue中⼀个⾮常⾮常强⼤的指令，所有规律性动态数据的展⽰，都可以⽤for指令来完成。
v-for是⾮常强⼤，可以追踪循环体内任意⼀个值的变化，针对变化来单独渲染。
v－for 建议仔细阅读官⽅⽂档，⽽不是通读。在项⽬中，我们应该养成习惯。对于可变化的，规律性数据都采⽤for指令渲染。我之所以⼜把for指令写了⼀遍，是因为我在开始写vue时，根本就没有活⽤for指令的简便和强⼤，还是古⽼的ul li 循环，繁杂的事件绑定委托。估计⼈类本性对⼀个东西还不太了解的时候会习惯性的⽤⾃⼰熟悉的⽅式去操作的原因。
vue中引⼊组件以及⽗⼦组件的数据交互
关于组件，任意vue⽂件你都可以看做⼀个组件。在项⽬中我们⼀般使⽤的应该都是单⽂件组件，单⽂件组件与页⾯结构⽆异，是具有完整功能的⼀个模块。⽐如⼀个评论框，你就可以剥离成⼀个组件，在任意页⾯⽂件中引⼊这个组件。
vue过滤器
在有⼀些业务场景需要对数据进⾏⼀些转换，⽐如后端图⽚地址的前缀匹配，这个时候filters就派上⼤⽤场了。看个例⼦感受⼀下。
vue路由
路由对于spa应⽤的重要性不⾔⽽喻，整个应⽤的页⾯关系都是通过路由定义的。我们先来看看⼀个路由⽂件⼤致是什么样⼦
vue 使⽤history模式，我们就可以去使⽤history的API，需要在路由配置中启⽤。默认hash模式，history模式也是⼀般应⽤的常⽤模式。
//切换当前地址，同 placeState
this.$place({name: 'list'})
//向history推⼊⼀级，同history.push
this.$router.push({name: 'list'})
//添加参数
this.$router.push({name: 'list', query: {setting: 'setting'}})css文件怎么写
//监测路由变化
watch:{
'$route': function () {
//处理事件
}
},
》》》》可以在页⾯任意处打印this.$route查看路由对象
vue的路由配置相对来说，是⽐较简单的，阅读⼀遍router⽂档，就可以快速上⼿。
路由是⾮常重要的⼀块，在动⼿开始写你的vue项⽬之前，你⾮常有必要通读⼀遍路由⽂档。⽽不是碰到问题再去解决。嵌套路由，动态路由会对你的开发起到⾮常有⽤的帮助。
可监测的全局变量——vuex
项⽬开发中，往往我们会有⼀些全局变量，但是正常全局变量，vue是不能监测的，这个时候vuex就派上⽤场了。
npm install vuex --save
／／安装好vuex后，我们先新建⼀个store⽂件夹，存放vuex相关⽂件，如下图所⽰
>>>>> index.js
import Vue from 'vue'
import Vuex from 'vuex'
import modulesApp from './modules/app'  //引⼊⼀个app模块
Vue.use(Vuex)
let store = new Vuex.Store({
strict: v.NODE_ENV !== 'production',
modules: {
app: modulesApp
}
})
export default store
—
——————————————— 分割线——————————————————
>>>>>app.js    //这⾥是个我的⽰例结构，可以查阅⽂档选择⾃⼰喜欢的书写⽅式
let state = {
height: document.documentElement.scrollHeight + 'px',
total: 1,
list: [],
};
let getters = {};
let mutations = {
height: state => state.height = document.documentElement.scrollHeight + 'px',
totalChange (state, total) {
},
listChange (state, list) {
state.list = list
},
};
let actions = {};
export default {
state,
getters,
mutations,
actions
}
如何开始写第⼀个demo项⽬
看完以上内容，想必⼤家对vue都有了进⼀步的了解。在通读官⽅⽂档后，我们对vue都有⼀个⼤致的了解，这样其实对于新⼿⽽⾔还是没有⽅向去写⼀个demo出来的，我们往往想写个漂亮的demo，但这样就必须花⼤量时间去写html和css，这点博主深有体会，看了2遍⽂档后还是不知道怎么去⼊⼿写个demo练⼿。这⾥博主有个建议就是：
专注于vue本⾝，⽽不是花过多的时间去写html，css。
以上我们已经搭建了⼀个vue开发环境，接下来就是⼀款⼼仪的UI组件库，博主这⾥推荐，个⼈感觉⾮常漂亮。然后就是构思你的demo要写什么，好了，拖组件搭UI，开始写真正写项⽬代码把，把更多时间花在vue学习之上。
后记
写到这⾥也就告⼀段落了。通过项⽬去学习vue，在这个过程碰到问题解决问题，就是⼀个效率的学习⽅法。
以后回过头来看，“⾃⼰以前这个demo写的这么垃圾？” 就说明你⼜进步了。⼊门第⼀步，框架⽤的好，⽤的熟练，当表⾯已经⽆法满⾜我们的时候，OK ，深⼊框架的时机到了。可以开始研究vue是怎么实现数据绑定，怎么实现数据响应式这些更深层的技术原理了。
博主打算对vue-cli进⾏⼆次开发，封装⼀些有⽤的命令。敬请期待！前段路坎坷，共勉～
如果觉得本⽂对你有所帮助，就star⼀下吧～⼤传送之术！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

34条网站加速方法
« 上一篇
css mask的原理
下一篇 »

发表评论

Copyright © 2024 baidu.com
Powered By 688IT编程网 豫ICP备2022007602号 豫公网安备41160202000602