vue 组件开发、vue自动化工具、axios使用与router的使用(3)

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

一. 组件化开发

1.1 组件[component]

  在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码把[HTML、css和javascript]封装到一个文件的模式,我们成为“组件”。

  组件有两种:默认组件[全局组件] 和 单文件组件

1.1.1 默认组件

<div id="app">
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
<addnum></addnum>
</div>
<script>
Vue.component("addnum",{
template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
data: function(){
// 写在这里的数据只有当前组件可以使用
return {
num:1,
}
}
}); var vm = new Vue({
el:"#app",
// 这里写的数据是全局公用的,整个文件共享
data:{ }
})
</script>

二 Vue自动化工具(Vue-CLI)

  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows在同一台电脑中管理多个 Node 版本。

2.1 nvm工具的安装

nvm工具的下载和安装: https://www.jianshu.com/p/d0e0935b150a

              https://www.jianshu.com/p/622ad36ee020

2.1.1 常用的nvm命令

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号 # 安装指定版本的node.js
nvm uninstall node版本号 # 卸载指定版本的node.js
nvm use node版本号 # 切换当前使用的node.js版本

  如果使用nvm工具,则直接可以不用自己手动下载,如果使用nvm下载安装 node的npm比较慢的时候,可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

2.2 安装node.js

  Node.js是一个新的后端(后台)语言,它的语法和JavaScript类似,所以可以说它是属于前端的后端语言,后端语言和前端语言的区别:

  • 运行环境:后端语言一般运行在服务端,前端语言一般运行在客户端的浏览器上;
  • 功能:后端语言可以操作文件,可以读写数据库,前端语言不能操作文件,不能写入数据库。

  我们一般安装LTS(长线支持版本)

下载地址:https://nodejs.org/en/download/【上面已经安装了nvm,那么这里不用手动安装了】

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  检验是否安装成功,执行一下代码

node -v

2.3 npm安装

  在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

  npm常用命令

npm install -g 包名              # 安装模块   -g表示全局安装,如果没有-g,则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时,命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档

2.4 安装 Vue-CLI

npm install -g vue-cli

如果安装速度过慢,一直超时,可以考虑切换npm镜像源:http://npm.taobao.org/

2.5 使用Vue-CLI初始化创建项目

2.5.1 生成项目目录

  使用vue自动化工具可以快速搭建单页应用项目目录。

  该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

//进入创建项目的目录

// 生成一个基于 webpack 模板的新项目
vue init webpack 项目名
例如:
vue init webpack myproject // 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev # 运行这个命令就可以启动node提供的测试http服务器

运行了上面代码以后,终端下会出现以下效果提示:

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

那么访问:http://localhost:8080/

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

2.5.2 项目目录结构

src  主开发目录,要开发的单文件组件全部在这个目录下的components目录下。

static 静态资源目录,所有的css,js,静态文件都放在这个文件夹下。

dist 项目打包发布文件夹,最后要上线单文件项目文件都在这个文件夹中
   【后面打包项目,让项目中的vue组件经过编译编程js代码,dist就出现了。 node_modules 是node的包目录。 config 配置目录。 build 是项目打包时依赖的目录。 src/router 路由,后面需要使用router的时候,自己创建,声明。

2.5.3 项目执行流程

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入*单文件组件APP.vue,APP.vue中会通过组件嵌套或者路由来引用componts文件夹中的其他的单文件组件。

三. 单文件组件的使用

组件有两种:普通组件、单文件组件

普通组件的缺点:

  1. html代码是作为js的字符串进行编写,所以组装和开发的时候不易理解,而且没有高亮效果。

  2. 普通组件用在小项目中非常合适,但是复杂的大项目中,如果把更多的组件放在html文件中,那么维护成本就会变得非常昂贵。

  3. 普通组件只是整合了js和html,但是css代码被剥离出去了。使用的时候的时候不好处理。

  将一个组件相关的html结构,css样式,以及交互的JavaScript代码从html文件中剥离出来,合成一个文件,这种文件就是单文件组件,相当于一个组件具有了结构、表现和行为的完整功能,方便组件之间随意组合以及组件的重用,这种文件的扩展名为“.vue”,比如:"Home.vue"。

  创建一个单文件组件

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

3.1 template 编写html代码的地方

<template>
<div id="Home">
<span @click="num--" class="sub">-</span>
<input type="text" size="1" v-model="num">
<span @click="num++" class="add">+</span>
</div>
</template>

3.2 script编写vue.js代码

<script>
export default {
name:"Home",
data: function(){
return {
num:0,
}
}
}
</script>

3.3 style编写当前组件的样式代码

<style scoped>
.sub,.add{
border: 1px solid red;
padding: 4px 7px;
}
</style>

3.4 完成案例-点击加减数字

  • 创建components/Home.vue
<template>
<div id ='home'>
<Menu />
<span @click='num--'>-</span>
<input type="text" v-model='num'>
<span @click='num++'>+</span>
<Footer :mynum='num' title='我是父类传过来的字符串'/>
<!-- 给子组件传输变量需要加':',字符串不需要加':'-->
</div>
</template> <script>
import Menu from './HomeSon/Menu'
import Footer from './HomeSon/Footer'
export default {
name:'Home',
data() {
return {
num:0,
}
},
components:{
Menu,
Footer, }
}
</script> <style scoped>
#home{
line-height: 50px;
}
#home span{
color:green;
font-size:20px;
border:2px solid red;
} </style>
  • 在App.vue组件中调用上面的组件
<template>
<div id="app"> <Home/> </div>
</template> <script> import Home from './components/Home' export default {
name: 'App',
components: {
Home,
Weather, }
}
</script> <style> </style>
  • 效果

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

4.4 组件的嵌套

  有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.

例如,我们可以声明一个组件,作为父组件

  • 在components/创建一个保存子组件的目录HomeSon

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  • 在HomeSon目录下,可以创建当前页面的子组件,例如,是Menu.vue
//  组件中代码必须写在同一个标签中
<template>
<div id="menu">
<span>{{msg}}</span>
<div>hello</div>
</div>
</template> <script>
export default {
name:"Menu",
data: function(){
return {
msg:"这是Menu组件里面的菜单",
}
}
}
</script>
  • 然后,在父组件中调用上面声明的子组件。

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  • 最后,父组件被App.vue调用.就可以看到页面效果.

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  • 效果:

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

3.5 传递数据

例如,我们希望把父组件的数据传递给子组件.

可以通过props属性来进行传递.

传递数据三个步骤:

1 在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据

<Menu :mynum="num" title="home里面写的数据"/>

# 上面表示在父组件调用Menu子组件的时候传递了2个数据:
1 如果要传递变量[变量可以各种类型的数据],属性名左边必须加上冒号:,
 同时,属性名是自定义的,会在子组件中使用。
2 如果要传递普通字符串数据,则不需要加上冒号:,

2 在子组件中接收父组件传递过来的数据,需要在vm子组件对象中,使用props属性接收。

<script>
export default {
name:"Menu",
props:["mynum","title"],
data: function(){
return {
msg:"这是Menu组件里面的菜单",
}
}
}
</script> // 上面 props属性中表示接受了两个数据。

3 在子组件中的template中使用父组件传来的数值。

<template>
<div id="menu">
<span>{{msg}},{{title}}</span>
<div>hello,{{mynum}}</div>
</div>
</template>

效果:

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

步骤流程解析数据传输过程

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

数据传输注意事项

使用父组件传递给子组件时,注意一下几点:
1 传递数据是变量的时候,需要在属性左边添加冒号 “:”,
传递数据是变量,叫做“动态数据传递”,
传递数据不是变量,叫做“静态数据传递”。 2   父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改不会影响到父组件中的数据。
   这种情况叫做“单项数据流动”。

四. 在组件中使用axios获取数据

  默认情况下,我们的项目中并没有对axios包的支持,所以我们需要下载安装。

在项目根目录中使用 npm安装包。

npm install axios

  安装完成后,在main.js中,导入axios,并把axios对象挂在到vue属性中,这样我们可以使用vue的属性使用axios。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 这里表示从别的目录下导入 单文件组件
import axios from 'axios'; // 从node_modules目录中导入包
Vue.config.productionTip = false Vue.prototype.$axios = axios; // 把对象挂载vue中 /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});

  在组件中使用axios获取数据

<script>
export default{
。。。
methods:{
get_data:function(){
// 使用axios请求数据
this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
})
}
}
}
</script>

效果:

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

五. 路由(Router)

安装

npm install --save vue-router

5.1 创建路由文件

  路由文件可以直接创建在src目录下,但是如果项目大了, 分成多个不同的大平台或者大的子项目,可以选择分目录保存路由,

src/router/index.js // 前台路由

src/router/backend.js // 后台路由

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

5.2 路由信息配置

  在index.js文件中编写初始化路由信息,以及绑定地址和组件的映射关系。

import Vue from 'vue'
import Router from 'vue-router' // 导入路由中需要使用的组件
import Home from '@/components/Home'
import AddNum from '@/components/AddNum'
import HelloWorld from '@/components/HelloWorld' Vue.use(Router); //把Router挂载到vue对象中 export default new Router({
routes:[
// 路由信息
{
path:"/",
name: "Home",
component: Home
},
{
path:"/num",
name: "AddNum",
component: AddNum
},
{
path:"/hw",
name: "HelloWorld",
component: HelloWorld
},
]
})

5.3  main.js文件中注册路由信息

  index.js路由信息要被main.js加载,所以需要在src/main.js中导入路由对象。

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

5.4 在APP.vue中的html代码中,启动路由

<router-view/>

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

  通过链接可以切换路由标签里面对应的组件,链接的地址是上面index.js文件中定义的path值,不过链接标签是"router-link",链接地址用'to'来定义:

//相当于a标签
<router-link to="/">站点首页</router-link>
<router-link to="/num">AddNum</router-link>

链接地址中可以传递参数,格式如下:

// name对应的是路由中定义的一个path对应的name属性
<router-link :to='{name:"UpDate",params:{code:item.code}}'>

有时候需要在组件的js中跳转页面,也就是改变路由,改变路由有下面这些方式:

// 当前页面重新加载
this.$router.go('/user'); // 跳转到另外一个路由
this.$router.push({path:'/user'}); // 获取当前的路由地址
var sPath = this.$route.path;
上一篇:Python——通过用户cookies访问微博首页


下一篇:cl.exe命令方式编译cpp