Vue学习心得----新手如何学习Vue(转载)
ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知
前言
使用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模式也是一般应用的常用模式。
//切换当前地址,同 history.replaceState
this.$router.replace({name: 'list'})
//向history推入一级,同history.push
this.$router.push({name: 'list'})
//添加参数
this.$router.push({name: 'list', query: {setting: 'setting'}})
//监测路由变化
watch:{
'$route': function () {
//处理事件
}
},
》》》》可以在页面任意处打印this.$route查看路由对象
vue的路由配置相对来说,是比较简单的,阅读一遍router文档,就可以快速上手。
路由是非常重要的一块,在动手开始写你的vue项目之前,你非常有必要通读一遍路由文档。而不是碰到问题再去解决。嵌套路由,动态路由会对你的开发起到非常有用的帮助。官方路由
可监测的全局变量——vuex
项目开发中,往往我们会有一些全局变量,但是正常全局变量,vue是不能监测的,这个时候vuex就派上用场了。 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: process.env.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) {
state.total = 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组件库,博主这里推荐iview,个人感觉非常漂亮。然后就是构思你的demo要写什么,好了,拖组件搭UI,开始写真正写项目代码把,把更多时间花在vue学习之上。
后记
写到这里也就告一段落了。通过项目去学习vue,在这个过程碰到问题解决问题,就是一个效率的学习方法。
以后回过头来看,“自己以前这个demo写的这么垃圾?” 就说明你又进步了。入门第一步,框架用的好,用的熟练,当表面已经无法满足我们的时候,OK ,深入框架的时机到了。可以开始研究vue是怎么实现数据绑定,怎么实现数据响应式这些更深层的技术原理了。
博主打算对vue-cli进行二次开发,封装一些有用的命令。敬请期待!前段路坎坷,共勉~
Vue学习心得----新手如何学习Vue(转载)的更多相关文章
- [Python 学习]2.5版yield之学习心得 - limodou的学习记录 - limodou是一个程序员,他关心的焦点是Python, DocBook, Open Source …
[Python 学习]2.5版yield之学习心得 - limodou的学习记录 - limodou是一个程序员,他关心的焦点是Python, DocBook, Open Source - [Pyth ...
- 我所理解的Vue——学习心得体会1(Vue对象)
初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...
- C#学习心得,记录学习
- 开源项目live555学习心得
推荐:伊朗美女找丈夫比找工作难女人婚前一定要看清三件事 × 登录注册 疯狂少男-IT技术的博客 http://blog.sina.com.cn/crazyboyzhaolei [订阅][手机订 ...
- 新手向:Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- vue生命周期-学习心得
每个Vue实例在被创建之前都要经过一系列的初始化过程,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,这个过程就是vue的生命周期. 1 vue生命周期图 {: ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- windows类书的学习心得(转载)
原文网址:http://www.blogjava.net/sound/archive/2008/08/21/40499.html 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千 ...
随机推荐
- 想要学好Git,应该掌握哪些基础知识?
说到Git,作为程序员的你,在项目开发中一定会使用到或将来也一定会使用到的,但是我相信,很多在使用Git的人,都只是停留一些简单的操作上,比如提交(commit).拉取(pull).推送(push). ...
- Python的特点
简单易学. 免费开源. 跨平台. 解释性.不需要编译就可以直接运行,使用更加简单,移植性更强. 面向对象.arcgis也支持面向对象编程.
- JS高级---识别正则表达式是否匹配
识别正则表达式是否匹配 console.log(/[a-zA-Z]+/.test("hello")); console.log(/./.test("除了回车换行以为的任意 ...
- struts2中的constant常量配置
struts2中的constant配置详解 本文主要讲解一下struts2中的constant常量配置,内容主要来自于互联网的整理.<?xml version="1.0" e ...
- html中多选框变单选框
就是一个小js,直接上代码 $("input[name='checkboxlist']").each(function () { if (this.checked &&am ...
- SpringMVC进行Ajax请求页面显示乱码
最近在项目的使用过程中发现在springmvc的项目中,使用返回页面的请求方式,数据都能正常显示,但是对于ajax的请求,始终显示乱码. 首先第一种是因为我们在web.xml中配置了spring的字符 ...
- JS定义类的六种方式详解
转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...
- codeforces 1283E New Year Parties (贪心)
链接:https://codeforces.com/contest/1283/problem/E 题意: 有n个人住在一些房子里,有的人住在同一个房子里.每个人可以选择搬去他的房子左边那个房子或者右边 ...
- 13-Java-JSP知识梳理
一.JSP了解 JSP(java server pages,服务器页面),可理解为HTML+ Java = = JSP,它可生成动态的HTML(拼标签).是以.jsp为后缀的文件, 内容是以标签为主体 ...
- Request原理