后端开发者的Vue学习之路（四）

时间  2019-11-06
标签 后端 开发者 vue 学习 之路 栏目 职业生涯 繁體版
原文   原文链接

目录html

首发日期：2019-01-28
修改：前端

  1. 2019-01-29：增长404路由

上节内容回顾：

  • 组件的注册（全局，局部）
  • 组件的数据传输（父子组件，非父子组件）
  • props（数据校验）
  • 给组件绑定原生事件
  • template
  • 插槽（插槽的做用，命名插槽，插槽的默认内容，做用域插槽）
  • 动态组件
  • $refs

npm




介绍

npm是什么?
npm 是 JavaScript 世界的包管理工具。js也是能够建成一个项目的，不少时候前端的功能不多是纯粹的本身写的，咱们会去用别人造好的轮子（日历插件，图表插件之类的），若是咱们本身去找轮子，那么首先要去那个轮子的官网下载（有时候这个步骤会很麻烦）。而npm的服务器上会收集了不少经常使用的js相关的文件（不只仅是js，更准确的说是代码模块，一般都是集成一个包），咱们能够利用npm来下载项目的依赖模块（包）。
除了依赖，npm还容许用户从服务器下载并安装别人编写的命令行程序到本地使用。【好比vue-cli,安装了vue-cli,就可使用这个程序来快速创建一个基础的vue项目】vue


安装

  • 首先，你须要到node.js 官网下载适合版本的node
  • 安装node 【省略安装过程，实在不懂的，能够自行百度】
  • 测试node是否正常，在命令行输入下面两条命令：node -v和npm -v，若是输出了各自的版本号，那么就是安装成功了。


经常使用命令：

这些命令能够先暂时不记，后面用到的时候还会提一下。node

  • 安装指定模块：npm install 包名 【若是要全局安装，那么要加上参数-g】【一些第三方的包也是程序，安装的时候也是使用npm install 程序名】
  • 安装项目中package.json所包含的模块：npm install
  • 卸载模块：npm uninstall 包名 【若是还想从package.json中删除模块，那么还须要加上参数--save,即npm uninstall --save 包名】
  • 启动项目：npm start
  • 查看已经安装的模块：npm ls
  • 升级npm版本:npm install -g npm


补充：

  • npm下载模块的时候须要从服务器上下载，若是你嫌慢，能够考虑更换源，使用国内的cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org


基于npm的Hello World


1.进入命令行，键入命令npm install -g vue-cli【这一步是安装vue脚手架vue-cli，vue-cli可以快速构建一个vue的基础项目出来】
2.使用脚手架来建立一个vue项目：vue init webpack my-project 【webpack是建立vue项目的方式，my-project是vue项目的名称】
webpack


3.等待下载完模块后，使用cd命令进入项目文件夹后，输入npm run dev来运行项目。

es6


4.访问控制台提示的url，就能够看到基于npm的hello world了。
web


5.访问localhost:8080,能够看到以下的界面，说明一个基础的vue项目已经初始化完成了：
vue-router


为何不使用静态导入来演示后面的例子了？
在后面，咱们将讲到多个组件之间的复合使用，在有多个组件的时候，使用单文件来注册组件是一个比较好的处理，并且在项目扩大的时候会涉及到方方面面的问题（路由啊，数据管理啊等等），这时候静态导入就不太适合了，开发效率过低了。vuex


项目结构分析


项目构建完以后，让咱们来分析一下“该在哪一个目录写下哪些代码”
vue-cli

  • node_modules目录：node_modules是项目依赖模块的目录，里面的一个个文件夹都是项目依赖的模块。通常不须要理会。咱们使用npm install来安装依赖模块的时候就是把模块下载到这里。
  • build目录：build目录是关于项目构建信息的目录，里面主要是webpack构建项目的一些配置。如今暂时不讲，后面再讲。
  • config目录：
    • config目录是存放项目的配置文件的目录。
    • 基础配置信息在index.js
    • 开发环境下的配置信息：dev.env.js
    • 线上产品环境下的配置信息：prod.env.js
  • static目录：存放项目的静态资源文件，这个目录是开放访问的。
  • package.json和package-lock.json文件：
    • package.json文件包含了项目依赖模块的列表，使用npm 来安装项目依赖模块的时候都是从package.json来判断须要什么依赖的。
    • package-lock.json文件包含了项目依赖模块的一些限制信息（限制版本号，限制下载地址，限制哈希值）
  • .eslintrc.js和.eslintignore文件：
    • .eslintrc.js是关于eslint的语法规则的文件。
    • .eslintignore是指定哪些文件或文件夹忽略eslint语法检测。
  • index.html文件：是当前项目的首页文件。
  • .babelrc文件：是一个关于vue语法与js语法转换的文件【通常不须要理会】
  • src目录：是项目的源代码目录
    • main.js：是项目的入口文件，包含了新建根实例等操做。（之后可能还会有全局注册组件等操做。）
    • router目录：用于设置vue路由信息的目录
    • store目录：用于设置vuex数据管理的目录
    • App.vue文件：是项目的根组件。
    • components目录：组件相关的目录，单文件组件通常都存放在这里
    • assets目录：静态资源存放处【与static的区别是，static会原封不动地构建起来，而assets会被webpack进行处理，路径什么的webpack会自动管理好的】


上面的文件具体不须要太理解，咱们只须要关注src目录。咱们只须要在src目录下写代码就好。下面将介绍怎么在src目录下写代码。

用法迁移


项目换到了npm上后，先了解一下前面学习过的内容怎么在npm建立的vue项目中使用吧。


1.还需不须要手动建立根实例？
已经不须要了，在main.js文件会自动建立一个根实例。


2.根实例管理区域在哪里？
从main.js文件中，能够看到根实例所对应的区域的id仍是app,而这个app在index.html中【你能够尝试修改index.html，肯定一下是这个区域，好比说能够修改一些页面的title】


3.是如何渲染出上面的Hello World页面的？
能够看到出来main.js是核心的入口文件，它建立了一个根实例来管理了index.html的app区域，而且声明了内部使用的template,因此在渲染的时候，app区域里面会渲染成<App/>,而App是一个组件（这是单文件组件，App.vue），因此也就是把App组件中的内容显示到app区域中。


4.怎么修改首页？
从上面来看，首页就是index.html,核心的显示区域是app区域，而app区域显示的是组件App的内容，若是咱们修改App组件(App.vue)中的内容就能够修改首页了。


5.怎么注册组件？
使用npm来构建项目后，一个组件能够定义在一个单独的vue中。
除了以往的那些全局注册，局部注册，你还可使用单个vue文件来注册一个组件（实质至关于局部注册）。这个步骤这里能够简单地说一下，首先定义一个vue文件，例如App.vue文件，而后在App.vue中定义组件的内容，而且要使用export来“导出”组件，在须要的地方使用import 来导入组件，而后就可使用组件了。（上面的main.js使用App.vue组件的时候也有一行import App from './App'）

【上图有个问题，若是你直接打，你会发现页面的color都变了，若是你想要在当前组件生效，那么能够在style后加个scoped】


6.组件的经常使用属性的定义：
基本仍是按之前的规则，好比data要是一个函数。


7.router-view是什么？
若是你尝试修改App.vue，你会发现里面有一个router-view，这是什么呢？这是一个用于路由显示的元素。它会装载当前路由所定义的内容。若是你学过iframe或者frame，你就明白这个东西的意义，router-view会根据当前所处的url来显示对应的内容（这个路由对应的内容在router目录下的index.js中）。


小提醒


ES6语法

这里提一下一些在Vue中经常使用的ES6语法：

  • 若是键名和值同样，能够单写键名。
    • 因此在使用components的时候，若是组件名和组件别名一致，那么能够单写一个。
    • 其余状况若是key和value是同样的时候也能够单写key：
  • 若是是一个函数，能够单写一个括号


知识补充

  • 在import的时候，若是不写后缀，会自动查找符合后缀的。顺序是：.vue->.js->.json。import Hello from '@/components/Hello'
  • 在上面使用了@,这是一个预约义的路径，表明src目录。这个预约义路径是webpack给咱们的。
  • export,import,export default
  • index.html中的id='app'与App.vue中的id='app'的区别：首先index.html里的app给vue找到了管理区域，而后在使用template的时候，会把index.html中的<div id="app"></div>渲染成<App/>,而后<App/>再渲染成对应的组件的内容。也就是说index.html里面的app提供了装载点，App.vue提供了装载的内容。【若是修改了App.vue里面的id，你会发现渲染成功后页面的id会变。】【而为了使用好app这个实例，不要修改App.vue的id，否则装载完内容后，对应的管理区域会指向不明，而致使渲染失败。】


单文件组件


1.新建vue文件
我选择在src/components下新建一个Hello.vue


2.定义组件的内容

<template>
  <div class='hello'>{{msg}}</div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      msg: 'This is my msg!'
    }
  },
  created: function () {
    console.log('haha')
  }
}
</script>

<style scoped>
.hello{
  color: red
}
</style>


3.在其余文件中使用组件（这个所谓的其余文件，也能够是其余组件）:首先使用import来导入组件，而后使用components来声明使用组件，最后在组件的template中使用组件

<template>
    <hello></hello>
</template>

<script>
import Hello from '@/components/Hello'
export default {
  name: 'HelloWorld',
  components: {
    Hello
  }
}
</script>


使用注意：

  • 组件的内容必须有一个根元素包裹，除了template之外，template里面还得有一个根元素。
  • 要进行export default导出，否则这个组件没法在其余地方使用。
  • 定义组件的其余属性要遵循以往的格式，如data要是一个函数。


路由


  • 在以往，都是经过a元素来进行页面跳转的，跳转的过程能够称为“路由跳转”，在这里是一个页面到另一个页面的过程。
  • 而在vue中，因为是单页面应用，因此这里的路由本质上是进行了页面重渲染（同时修改了页面的地址）。


开启路由

若是要使用路由，那么首先要开启功能：


定义路由

路由与内容的对应信息定义在router目录下的index.js文件中。


使用路由

数据显示

  • 首先，路由的数据是使用<router-view></router-view>来显示的，<router-view></router-view>会渲染出当前路由对应的内容。
  • 咱们能够尝试修改一下路由对应信息来显示其余组件信息：


路由跳转

<router-link></router-link>能够实现点击后跳转到指定路由的功能。
<router-link to="/hello">hello</router-link>点击后能够跳转到/hello路由。


带参路由

动态路径参数

所谓路径参数，就是形似https://xxxx.xxx.com/info/1011337448中的1011337448这个参数。这个参数告诉了这个页面该怎么渲染。
在路由中，咱们可使用形如/path/:id的方式来匹配参数，:后面跟的是参数名；

而后在组件中使用this.$route.params.参数名来获取参数。

路径参数是能够有多个的，如/hello/:id/:name，这是分别利用this.$route.params.参数名来获取参数。


查询参数

所谓查询参数，就是形如https://xxxx.xxx.com/info?name='lilei'中name='lilei'的这个参数。
给下一个路由带查询参数可使用以下的方法：
1.<router-link :to="{path: '/hello',query:{ id :'001'}}" >hello</router-link>,点击这个获得的url是/hello?id=001。【这里使用路由的path来标识路由】


2.<router-link :to="{ name: 'user', query: { userId: 123 }}">User</router-link>【这里使用路由的name来标识路由】

而后在组件中咱们可使用$route.query.参数名来获取参数


监听路由参数变化

若是想要监听路由参数变化，那么可使用watch来监听。


嵌套路由

  • 假如已经有了一个路由/admin,而后再有一个路由/admin/sys的话就是路由进行了嵌套。【这是一种很是常见的状况】
  • 咱们上面知道了路由的信息是由router-view来显示的，那么嵌套的路由里的信息要用什么显示呢？其实仍是用<router-view>，<router-view>也是能够嵌套的。
  • 若是咱们在路由的index.js中使用了children来定义嵌套路由，而且在子组件中也建立了一个router-view，那么嵌套路由的数据会显示在子组件的<router-view>中，而不是父组件的router-view中（具体看下图）


步骤：
1.首先，在路由中使用children来定义嵌套路由

2.先访问/hello,确认App.vue中的router-view渲染了路由/hello的数据

3.在Hello.vue中写一些文字，用来肯定路由切换时，第一级的router-view的数据没有被清除。同时新建一个router-view。

4.随便定义一点Child.vue的内容。
5.先访问/hello,再访问/hello/child:


命名视图

  • 上面讲了router-view的嵌套，若是想要在同一组件内使用多个router-view呢？（为何会须要多个router-view呢？有可能想要发生某些路由变化的时候，页面某一部分不发生变化，只在某些状况发生变化，好比侧边栏这样的东西。一般都想要侧边栏不变化，只有中间的显示区域发生变化，但若是退出登陆了，那么两个部分应该都发生变化。）
  • 能够给router-view添加一个属性name,从而让router-view有名字。<router-view name='left'/>
  • 当一个组件中有多个命名router-view的时候，路由该怎么定义呢？
  • 若是想要切换路由的时候，但愿某些命名路由不变，那么能够这样作：
  • 嵌套路由也能够与命名路由结合使用：


编程式路由

上面的使用router-link的方式能够称为声明式路由，下面讲的这种叫作编程式路由。
咱们可使用this.$router.push('路由的path')来进行路由跳转

<template>
    <div>雷猴
      <button @click='search'>跳转</button>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  methods: {
    search () {
      // this.$router.push('user') // 根据路由的path来跳转
      // this.$router.push({name: 'user2'}) // 根据路由的name来跳转
      // this.$router.push({ name: 'user', params: { id: '123' }})
      // 上一行是根据路由的name来跳转，带路径参数,要求path带路径参数[若是提供了 path，params 会被忽略]
      this.$router.push({path: '/user', query: {id: 123}}) // 带查询参数
    }
  }
}
</script>


404路由

在上面的路由匹配中，若是咱们访问了一个没有进行定义的路由，那么页面会显示空白。
咱们能够在路由的最下面定义一个以下的路由：

这样就能够把匹配不到的路由都渲染成指定的页面。

补充：

  • 路由的复用问题：当路由跳转时，会复用没有发生变化的组件。
  • 没有说的内容：通配路由、匹配优先级、路由组件传参、重定向和别名。
  • 一些路由的进阶知识也没讲，若是你以为上面的路由知识不够用，也能够上官网看一下。vue-router


vuex


  • [官网的话:]Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  • [小菜鸟的话:]vuex能够用来存储多个组件之间须要共享的数据，而且可以以一种方式来提醒其余组件某个数据发生了变化。有些数据获取了以后应该是在全部组件里面都共享的。好比某些应用中的“城市”这个数据，当选定了城市后，后面的组件的渲染都应该知道选定的城市是什么。

vuex


  • Vuex由Actions,Mutations,State组成。
    • Actions负责数据的处理，
    • Mutations负责数据修改，
    • State负责数据存储。
  • 组件想要提交数据到Actions,要使用dispatch;
  • Action要提交数据到Mutations,要使用commit。


开启vuex并建立store

1.首先进行安装：npm install vuex --save
2.而后声明使用vuex，并建立一个store:
【对于大型应用，咱们会但愿把 Vuex 相关代码分割到模块中。因此下面的代码写在src/store/index.js中（请手动新建）】

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 在src\store\index.js中声明使用vuex
Vue.use(Vuex)
// 2.新建一个store,用来存储数据
export default new Vuex.Store({
  state: { // store里面的state用来存储数据，数据以键值对形式存储
    global_info: 'global_info_msg'
  }
})


3.在根实例中使用store:


使用vuex

上面建立store的时候存储了一个数据进去，下面讲一下怎么操做这个数据。

获取数据

【因为在根实例中使用了store，因此全部的子实例都会有store，咱们可使用this.$store.state.数据名来获取数据】


改变数据

改变store中的数据有两种方法，一种是actions->mutations->state;一种是mutations->state。
1.经过actions来改变数据：
首先派发action给actions，使用this.$store.dispatch('action名',参数)来派发action【派发action给actions以后，actions会调用action来处理数据】

定义action如何处理数据，而后使用commit('mutation名', 参数)把数据提交给mutations：

定义mutation修改哪一个数据，利用赋值表达式赋值：


上面的修改数据的操做遵循了下图的顺序：
vuex




2.除了一步步来修改数据，还能够直接经过mutations来改变数据：this.$store.commit('mutation名',参数)，这时候咱们只须要定义一个mutations便可。


项目结构

  • 对于大型应用，咱们会但愿把 Vuex 相关代码分割到模块中。
  • 咱们可能会有屡次进行上面的store中的数据操做，那么这意味着咱们须要写多几个action和mutation,若是把这些action和mutation都写在index.js是很赘余的，咱们一般把action的内容写到actions.js中，把mutations的内容写到mutations.js中。

    actions.js的内容能够相似这样来写：

    而后在index.js中导入：

    mutations.js的内容能够参考上面action.js的方式来写。

补充：

  • 想了解更多，能够查看官网的vuex的文档：https://vuex.vuejs.org/zh/
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程