标签:标签 静态资源 状态 其他 游记 alt 清空 RoCE 介绍
安装node环境
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装脚?架
cnpm install -g @vue/cli
清空缓存处理
npm cache clean --force
创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件
启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录
打包项目
npm run build
// 要在项目根目录下进行打包操作
箭头函数
let zx=()=>{
return 6
}
let zx=()=>5
let zx=n=>n*10
let zx=(a,b)=>a*b
函数原型
在类的prototype中的属性在,所有实例中都可以使用
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
Fn.prototype.num = 888;
console.log(f1.num);
console.log(f2.num);
let f3 = new Fn();
console.log(f3.num);
项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:静态资源
-- components:组件
-- router:路由文件
-- store:状态库文件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
package.json: 项目配置文件
main.js
1.加载vue,router,store等配置,和自定义的js,css等
2.加载根组件,绑定挂载点(在App.vue中需要有挂载点)
3.浏览器发起请求,router组件会更具url匹配组件,替换App.vue中的占位符<router-view/>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
router
路由
@表示/src表示src的绝对路径
也可以使用../这种相对路径
import User from '@/views/User.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
#导入相关的组件
import Home from '../views/Home.vue'
Vue.use(VueRouter)
#配置路由组件映射关系
const routes = [
{
path: '/',
name: 'home',
component: Home
}
]
const router = new VueRouter({
#开启浏览历史
mode: 'history',
#配置目录
base: process.env.BASE_URL,
routes
})
#导出js,可以被main.js引用
export default router
界面组件
1.有且只有一个根标签
2.style中的scoped默认为True,表示样式只会影响当前组件,不会影响其他组件,data是return方式的
3.js要注意一定要导出export default
<template>
<div>
<h1>用户界面</h1>
</div>
</template>
<script>
export default {
name: "User",
comments: {
},
data() {
return {
}
}
}
</script>
<style scoped>
</style>
vue跳转不能使用a标签,因为a标签跳转会刷新界面,而vue的核心是跟换组件或者数据
<router-link to="/">主页</router-link>
注意
点击的时候会加上这个类,可以给这个类加上样式来识别点击的按钮
/*router-link渲染的a激活时的状态*/
a.router-link-exact-active {
color: pink;
}
方法跳转
$router就是根组件的vue对象的属性
methods:{
goDetail(){
this.$router.push('/book/detail');
this.$router.push({
'name': 'book-detail'
})
}
}
前进后退
go的参数的正负表示历史记录的前进和后退
methods:{
go(){
this.$router.go(-1);
}
}
当浏览器访问/index的时候,最后浏览器留下的url是/不是/index,但是抓包抓到的请求是/index
{
path: '/',
name: 'home',
component: Home
},{
path:'/index',
redirect:'/'
}
key属性是为标签建立缓存的标识,不能重复,在循环组件下,必须设置
<Books v-for="book in books" :book="book" :key="book.title"></Books>
当组件自己使用静态资源可以使用相对路径取,但是不能使用绝对路径(使用绝对路径,浏览器会在路径前面拼接上url,请求资源的url会不对)
<img src="../assets/img/西游记.jpg"/>
跨组件资源路径传输require
路径要使用相对路径
{id:1, img:require('../assets/img/西游记.jpg'),
一个组件,会在页面中渲染,也会销毁存放到内存(不渲染) => 加载组件到销毁组件
从加载一个组件到销毁该组件,整个生命周期中存在很多特殊的时间节点(组件要创建了,创建成功了,要加载了,加载成功了, 要更新数据了,数据更新完毕了,要销毁了,销毁成功了),这些特殊的时间节点,vue都提供了对应的回调方法,来辅助完成在这些时间
//还不能拿到数据
beforeCreate() {
window.console.log('该组件要被创建了');
},
// 最常用的钩子函数:组件加载后,可以请求后台数据,更新组件数 据;组件间路由传参的值获取
created() {
window.console.log('该组件已经创建了');
},
//当组件不在活动界面
destroyed() {
window.console.log('该组件已经销毁了')
}
#路由配置
path:'/book/detail/:pk',
name: 'book-detail',
component:BookDetail
#传递参数
#path
<router-link :to="'/book/detail/' + book.id"></router-link>
#name
<router-link :to="{name: 'book-detail', params{pk:book.id}}">}</router-link>
#methods
this.$router.push(`/book/detail/${id}`);
this.$router.push({
name: 'book-detail',
params: {pk: id},
});
#接收参数
let pk = this.$route.params.pk;
$router管理路由跳转的
$route管理路由数据的
标签:标签 静态资源 状态 其他 游记 alt 清空 RoCE 介绍
原文地址:https://www.cnblogs.com/zx125/p/11863331.html