目录
一、Vue-CLI
(一)环境搭建
安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
换源安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue项目脚手架
cnpm install -g @vue/cli
清空缓存处理
npm cache clean --force # 第2、3步安装失败时,可以清空npm缓存,再重复执行失败的步骤
(二)项目的创建
创建项目
# 1. 命令行式创建,自定义方式创建项目(选取Babel、Router、Vuex插件) vue create 项目名 # 2. 命令行键入图形化界面创建 vue ui
命令行启动/停止项目
npm run serve / cltr+c # 要提前进入项目根目录
打包项目
npm run build # 要在项目根目录下进行打包操作
下载依赖文件
cnpm install # 当项目移植到其他电脑时,node_moodules需要重新构建,需要通过该指令根据package.json文件下载依赖文件,
(三)项目目录结构
v-proj项目
- node_moodules:当前项目所有依赖文件,不可以移植到其他电脑。要重新配置
- public
- favicon.ico:页面标签图标
- index.html:当前项目的html页面
- src
- assets:静态资源img、css、js
- components:小组件
- views:页面组件
- App.vue:根组件
- main.js:全局脚本文件(项目的入口)
- router
- index:路由脚本文件(配置路由url连接和页面组件的映射关系)
- store
- index.js:仓库脚本文件(vuex插件的配置文件,数据仓库)
- package.json:存储项目依赖文件清单的json文件
- readme.md
端口配置文件:vue.config.js
// 修改端口,没有可以自己新建,选做 module.exports={ devServer:{ port:8888 // 端口号 } }
(四)Vue组件(.vue文件)
- template:有且只有一个根标签
export default {}
:在script标签中将组件对象导出scoped
属性:style标签中添加scoped属性,代表该样式只在组件内部起作用(样式组件化)- router-view标签:存在于App.vue根组件文件中,页面组件的占位
<template>
<div class="test">
</div>
</template>
<script>
export default {
name:"Test"
}
</script>
<style scoped>
</style>
(五)全局脚本文件main.js(项目入口)
import 别名 form '资源'
- required:官方提倡使用required加载静态文件
- @:代表src文件夹的绝对路径
.$mount('app')
:挂载,和el成员挂载等价- render:当Vue实例创建时,系统自动触发渲染函数render,该函数的形参是一个函数,通过render渲染函数中调用传入App参数的形参函数,从而将App根组件渲染成DOM节点,该形参代表的是createElement
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境
Vue.config.productionTip = false // 定义用户引导功能的开启,需要先定义
// 配置全局样式:@就代表src文件夹的绝对路径,官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css')
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
改写
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
});
(六)Vue请求生命周期
- 浏览器user请求
- router插件映射views中的User.vue页面组件
- User.vue页面组件渲染好components文件夹中的小组件(子组件)
- 再把User.vue组件替换App.vue(根组件)中的
<router-view />
占位符
二、页面跳转和传参
(一)页面跳转
(1)标签跳转
- router-link标签:完成路由跳转的标签,相当于a标签
- to参数:指向要跳转的路由
<!-- 该标签完成路由跳转 -->
<router-link to="路由"></router-link>
(2)逻辑跳转
$router.push('路由')
:向$router
中追加一个路由,来完成路由的跳转$router.go(NUM)
:基于历史记录完成前进后退的跳转,NUM是整数为前进,NUM是负数为后退
(二)路由配置与传参
(1)无参数的路由配置
正常配置
// router/index.js路由配置文件中 const routes = [ { path: '/', name: 'home', component: Home }, ];
重定向配置
// router/index.js路由配置文件中 const routes = [ { path: '/home', redirect:"/" }, ];
(2)有参数的路由配置
拼接式参数使用query
// 1.页面跳转 // (1) 标签跳转(router-link标签中) to="/user?pk=1" // (2) 逻辑跳转 this.$router.push('/user?pk=1') // 2. 路由配置 path:'/user' // 3.取值方式 this.$router.query.pk
有名分组式参数使用params
// 1. 页面跳转 // (1) 标签跳转(router-link标签中) to='/user/1' // (2) 逻辑跳转 this.$router.push('/user/1') // 2. 路由配置 path:'/user/:pk' // 3. 取值方式 this.$router.params.pk
三、生命周期钩子
(一)概念
- 组件创建到销毁中的某个时间节点会触发的方法
- 这些方法都是vue组件实例的成员
(二)方法
- beforeCreate(){}:该组件创建之前触发
- created(){}:该组件创建成功时触发,此时接受后台数据,可以在该方法中对数据进行操作,重要方法
- beforeMount(){}:该组件加载完成之前触发
- mounted(){}:该组件加载完成触发,特别耗时的数据请求,重要方法
- destroyed(){}:该组件销毁成功时触发
四、JS原型
(一)原型(对象属性)
- 构造函数:通俗的一句话说,就是function声明的那个函数A
- 原型对象: 在声明了一个函数之后,浏览器会自动按照一定的规则创建一个对象,这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中 , 原型对象中有一个属性constructor,这个属性指向的是这个构造函数
- 在声明了一个函数后,这个构造函数(声明了的函数)中会有一个属性prototype,这个属性指向的就是这个构造函数对应的原型对象
(二)原型链
- 实例对象a1与原型对象之间的连接,叫做原型链
- JS在创建对象a1的时候,都有一个叫做
_proto_
的内置属性,用于指向创建它的函数对象的原型对象prototype
(三)代码实现
- 构造函数A中有prototype属性,而a1是构造函数A创建出来的对象,他不存在prototype属性
- 但a1有一个
__proto__
属性,stu调用这个属性可以直接访问到构造函数A的原型对象 - 再通过原型对象中的constructor访问到构造函数A,从而访问到prototype属性
- prototype相当于给类添加了一个属性,通过这个类实例化出来的对象都可以访问到该属性
- 以此类推,在Vue实例中也可以通过这种特性可以给Vue-CLI中添加全局方法axios,从而添加axios插件
function A() {}
let a1 = new A();
let a2 = new A();
// 为A类添加原型 => 类似于类属性
A.prototype.num = 100;
console.log(a1.num); // 100
// ES6语法下类
class B {
constructor(name) {
this.name = name;
}
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);
// 推导
Vue.prototype.$ajax = axios;