文章目录
前言
前端核心分析HTML、CSS、JS
vue.js
- 网络通信：axios
- 页面跳转：vue-router
- 状态管理：vuex
- UI组件库：element-ui、ant design
- CSS预处理器：SASS、LESS
- JS（ES6、ES5）（Angular、React、VUE）、TS
- Angular：MVC模式
- React：JSX语法、虚拟DOM(利用内存)
- VUE：渐进式JS框架。MVVM模式、虚拟DOM
- 三端统一：uniapp、ReactNative
VUE优点：
MVVM模式：低耦合、可复用、独立开、可测试。MVC演变。
双向绑定。
VUE入门基础语法
VUE基础语法：Vue.js初学笔记
VUE进阶
Axios异步通信
axios：浏览器和NodeJS端的异步通信框架。实现Ajax异步通信。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new new Vue({
el: "#app",
mounted(){
axios.get('./data.json').then(resp=>{
console.log(resp)
})
}
})
</script>
</html>
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>curr: {{currTime()}}</p>
<p>curr2: {{currTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new new Vue({
el: '#app',
data :{
},
methods: {
currTime:function(){
return Data.now()
}
},
computed: {
// 可以与methods重复名称，但是methods优先级更高
// 内存计算，将不经常变更的值存到内存中节省浏览器资源
currTime2: function(){
return Data.now();
}
}
})
</script>
</body>
</html>
插槽
slot标签
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<ul>
<li v-for="itm in todoItems">{{itm}}</li>
</ul>
<!-- 这种写法更关注VIEW层 -->
<todo>
<t-title slot="t-title" :title="title"></t-title>
<t-items slot="t-items" v-for="itm in todoItems" :item="itm"></t-items>
</todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component('todo',{
template: '<div> \
<slot name="t-title"></slot> \
<ul><slot name="t-items"></slot></ul> \
</div>'
})
Vue.component('t-title',{
props: ['title'],
template: '<p>{{title}}</p>'
})
Vue.component('t-items',{
props: ['item'],
template: '<li>{{item}}</li>'
})
var vm = new new Vue({
el: "#app",
data: {
title:'person list',
todoItems:['Huathy','嘻嘻','小花']
}
})
</script>
</html>
自定义事件内容分发
this.$emit(event,arguments) 自定义事件分发
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<ul>
<li v-for="itm in todoItems">{{itm}}</li>
</ul>
<todo>
<t-title slot="t-title" :title="title"></t-title>
<t-items slot="t-items" v-for="(itm,idx) in todoItems" :item="itm"
v-bind:index="idx" v-on:remove="removeItems(idx)" ></t-items>
</todo>
</div>
</body>
<script src="../vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component('todo',{
template: '<div> \
<slot name="t-title"></slot> \
<ul><slot name="t-items"></slot></ul> \
</div>'
})
Vue.component('t-title',{
props: ['title'],
template: '<p>{{title}}</p>'
})
Vue.component('t-items',{
props: ['item','index'], // props参数传递
// 只能绑定当前组件的方法
template: '<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
methods:{
remove: function(index){
console.log("remove method click")
// this.$emit(event,arguments) 自定义事件分发
this.$emit('remove', index)
}
}
})
var vm = new Vue({
el: "#app",
data: {
title:'person list',
todoItems:['Huathy','嘻嘻','小花']
},
methods: {
removeItems:function(index){
this.todoItems.splice(index,1) //一次删除一个元素
alert('删除成功');
}
}
})
</script>
</html>
vue-cli
vue-cli是官方提供的一个脚手架，用于快速构建一个vue项目。
功能：统一目录结构、本地调试、热部署、单元测试、集成打包上线。
环境：nodejs
安装：https://blog.csdn.net/qq_40366738/article/details/105212244
初始化：vue init webpack myvue
λ vue init webpack myvue
? Project name myvue
? Project description 第一个vue-cli的项目demo
? Author Huathy
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
vue-cli · Generated "myvue".
# Installing project dependencies ...
# ========================
yarn install v1.22.17
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.19", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 998.17s.
# Project initialization finished!
# ========================
To get started:
cd myvue
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
启动
λ yarn dev
yarn run v1.22.17
$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:8520) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
12% building modules 24/29 modules 5 active ...3S\Desktop\vuestudy\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 45515ms 4:24:51 ├F10: PM┤
I Your application is running here: http://localhost:8080
webpack
静态资源打包器，打包时会递归地构建一个依赖关系图。
安装：cnpm install -g webpack 或 yarn global add webpack
打包：新建webpack.config.js ，配置入口entry和输出output，执行webpack。
elementUI
# 安装vue-router
yarn add vue-router --dev
# 安装element-ui
yarn add element-ui
# 安装所有依赖
yarn
# 安装sass加载器
yarn add sass-loader node-sass --dev
# 启动测试
yarn dev
vue-router路由
vue-router是vue的官方路由管理器。与vue.js的核心深度集成，
npm install vue-router --save-dev 或 yarn add vue-router --dev
案例操作步骤：
- 在src目录下新建一个component文件夹，其中新建Main.vue和Content.vue。
- 新建一个router文件夹，写一个index.js，并为他配置好写好的组件。
import Vue from 'vue';
// 导入路由插件
import VueRouter, { RouterLink } from 'vue-router'
import Content from '../component/Content'
import Main from '../component/Main'
Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
routes:[
{
// 路由路径
path:'/content',
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由路径
path:'/main',
// 跳转的组件
component: Main
}
]
});
- 使用：在src下的main.js中导入路由
import Vue from 'vue'
import App from './App'
// 自动扫描路由配置
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
})
- 在src下的App.vue中使用
<template>
<div id="app">
<h1>VUE-ROUTER</h1>
<router-link to="/main"> TO MAIN PAGE </router-link>
<br/>
<router-link to="/content"> TO CONTENT PAGE </router-link>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
- 目录结构
路由模式
路由有两种模式，hash(#)和history(/)
// 配置路由
export default new VueRouter({
// 路由模式：默认为hash(#)
mode: 'history',
routes:[]
});
路由嵌套 children
案例：
- 在component文件夹下新建user目录，然后编写Profile.vue和List.vue。
- 在上面router/index.js中编写路由并导入组件。
import Vue from 'vue';
// 导入路由插件
import VueRouter, { RouterLink } from 'vue-router'
import Content from '../component/Content'
import Main from '../component/Main'
import UserList from '../component/user/List'
import UserProfile from '../component/user/Profile'
Vue.use(VueRouter)
// 配置路由
export default new VueRouter({
routes:[
{
// 路由路径
path:'/content',
name: 'content',
// 跳转的组件
component: Content
},
{
// 路由路径
path:'/main',
// 跳转的组件
component: Main,
// 嵌套路由
children: [
{
path : '/user/profile',
component: UserProfile
},
{
path : '/user/list',
component: UserList
}
]
}
]
});
- 在Main.vue组件中使用路由
<template>
<div id="app">
<h1>main page</h1>
<router-link to="/user/profile">用户信息</router-link>
<br />
<router-link to="/user/list">用户列表</router-link>
<hr />
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
路由参数传递
写法一：
- 编写个人信息页面Profile.vue
<template>
<div id="app">
<h1>个人信息</h1>
<h2>ID:{{$route.params.id}}</h2>
</div>
</template>
<script>
export default {
name: 'UserProfile'
}
</script>
- 修改路由
import UserProfile from '../component/user/Profile'
{
path : '/user/profile/:id',
name: 'UserProfile',
component: UserProfile
},
- 添加参数
<router-link :to="{name:'UserProfile',params:{id:1}}">用户信息</router-link>
写法二：
- 编写个人信息页面Profile2.vue
<template>
<div id="app">
<h1>个人信息2</h1>
<h2>ID:{{uname}}</h2>
</div>
</template>
<script>
export default {
props: ['uname'],
name: 'UserProfile2'
}
</script>
- 修改路由
import UserProfile2 from '../component/user/Profile2'
{
path : '/user/profile2/:id',
name: 'UserProfile2',
component: UserProfile2,
props: true
},
- 添加参数
<router-link :to="{name:'UserProfile2',params:{uname:'嘻嘻'}}">用户信息2</router-link>
重定向和404
重定向
- 编写路由
{ // 重定向
path:'/home',
redirect: '/main'
},
- 使用
<router-link to="/home">HOME PAGE</router-link>
404
- 404页面
<template>
<h1>404 NOT FOUNT ERROR PAGE</h1>
</template>
<script>
export default {
name: '404page'
}
</script>
- 路由js
import Page404 from '../view/404'
{
path:'*',
component: Page404
},
路由钩子
参数说明
to路由将要跳转的路径信息
from路由跳转前的路径信息
next路由的控制参数
- next()：跳转下一个页面
- next(’/path‘)：跳转指定页面
- next(false)：返回原页面
- next(vm=>{})：仅在beforeRouterEnter中可用，vm是实例。
案例：
<template>
<div id="app">
<h1>个人信息</h1>
<h2>ID:{{$route.params.id}}</h2>
</div>
</template>
<script>
export default {
name: 'UserProfile',
// 类比Java过滤器拦截器
beforeRouteEnter:(to,from,next)=>{
console.log("进入路由前 => ",to,from);
next(vm => {
let id = vm.getData(to);
if( id > 5 && id < 10){ // 模拟未登录
next("/content") // 跳转登录
}else if( id > 10){
next(false); // 没有权限
}else {
next();
}
});
},
beforeRouteLeave:(to,from,next)=>{
console.log("离开路由前 => ",to,from);
next();
},
methods:{
getData:function(to){
return to.params.id;
}
}
}
</script>
<style>
</style>
致谢：B站视频UP狂神说，学习链接BV18E411a7mC
说明：本文对视频内容章节做部分删改与调整，使得个人认为相关内容保持连贯
扫一扫
1627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
