Vue
2021-04-04 00:44:53 71 举报
AI智能生成
请大家不要直接克隆,着手梳理一遍才会变成自己的知识
作者其他创作
大纲/内容
什么是VUE
作者:尤雨溪
Vue是用于构建用户界面的渐进式框架
Vue 只关注视图层, 采用自底向上增量开发的设计
优势
1、集成了模块化
这是Angular的特性
2、结合了虚拟dom
这是react的特性
3、支持双向绑定
v-model
4、Vue是MVVM的具体应用
引入Vue和axios
Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
axios
axios是Vue推荐的通信框架,不推荐使用jQuery是因为jQuery对dom操作太频繁了,影响效率
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
推荐在mounted的钩子函数里写
计算属性
节省计算开销,计算属性在内存中运行
conputed属性中写
当计算缓存被修改会重新计算
⭐插槽(slot)
Vue支持热拔插
示例
1、插槽结构
introduce
self
family
2、插槽定义
introduce
Vue.component("introduce",{
template :'<div>' +
'<slot name="self"></slot>' +
'<slot name="family"></slot>' +
'</div>'
})
self
Vue.component("self",{
props:['name'],
template : '<p>{{name}}</p>'
})
family
Vue.component("family",{
props:['family'],
template : '<ul>' +
'<li>{{family.name}}</li>' +
'</ul>'
})
3、插槽使用
<div id="app">
<introduce slot="introduce">
<self slot="self" :name="admin.name"></self>
<family slot="family" v-for="family in admin.families" :family="family"></family>
</introduce>
</div>
4、对应关系
1、introduce里的两个插槽分别对应下面的self和family
template内嵌套插槽需要用name属性绑定子插槽
2、插槽定义有值传递的时候,需要用props接受参数
3、插槽使用的时候,子插槽需要绑定插槽名称
<self slot="self" :name="admin.name"></self>
<family slot="family" v-for="family in admin.families" :family="family"></family>
4、插槽有参数使用的时候,需要通过v-bind:绑定参数(也可以直接:,省略掉v-bind)
绑定的参数和插槽定义时的props内属性对应
绑定的参数和插槽定义时的props内属性对应
Vue.component("self",{
props:['name'],
template : '<p>{{name}}</p>'
})
<self slot="self" :name="admin.name"></self>
Vue.component("family",{
props:['family'],
template : '<ul>' +
'<li>{{family.name}}</li>' +
'</ul>'
})
<family slot="family" v-for="family in admin.families" :family="family"></family>
事件分发
Vue组件无法直接调用到Vue实例的方法,需要通过this.$emit('自定义事件名',方法参数)来调用
1、组件编写触发向Vue实例传递index的函数方法
props:['family','index'],
template : '<ul>' +
'<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' +
'</ul>',
methods: {
removeSelf:function (index){
this.$emit('remove',index);
}
}
2、组件绑定事件触发条件
template : '<ul>' +
'<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' +
'</ul>',
3、组件填充时传递index
<family slot="family" v-for="(family,index) in admin.families"
:family="family" :index="index"
@remove="removeFamily(index)">
</family>
4、Vue实例中编写事件函数
methods:{
removeFamily : function(index){
this.admin.families.splice(index,1);
}
}
文件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VUE</title>
</head>
<body>
<div id="app">
<introduce slot="introduce">
<self slot="self" :name="admin.name"></self>
<family slot="family" v-for="(family,index) in admin.families"
:family="family" :index="index" @remove="removeFamily(index)"></family>
</introduce>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
Vue.component("introduce",{
template :'<div>' +
'<slot name="self"></slot>' +
'<slot name="family"></slot>' +
'</div>'
})
Vue.component("self",{
props:['name'],
template : '<p>{{name}}</p>'
})
Vue.component("family",{
props:['family','index'],
template : '<ul>' +
'<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' +
'</ul>',
methods: {
removeSelf:function (index){
this.$emit('remove',index);
}
}
})
var vm = new Vue({
el:"#app",
data(){
return{
admin:null
}
},
mounted(){
axios.get('xiaoye.json').then(res=>(this.admin=res.data));
},
methods:{
removeFamily : function(index){
this.admin.families.splice(index,1);
}
}
})
</script>
</body>
</html>
vue-cli
需要node.js的支持
官网下载直接安装就可以了
node.js会自己添加环境变量,不需要手动添加环境变量
npm install cnpm -g
全局安装cnpm
cnpm是国内淘宝镜像,速度更快
安装vue-cli
cnpm install vue-cli -g
全局安装vue-cli
创建一个vue-cli项目
1、cmd进入目标目录
2、cmd输入vue init webpack 项目名
3、询问项目名称,直接回车,因为上面写过了
4、项目描述,直接回车
5、项目作者,可以输入自己的昵称
6、运行时编译,选择第一个
7、各种配置,一路No下去,我们需要自己走一遍才能更加了解运行过程
8、项目已经初始化完成了
9、进入我们的新项目
cd 项目名
10、安装npm
npm install
如果出错了的话,它会提示你怎么做,你照着输入修复指令就可以了
11、打包启动测试
npm run dev
12、出现Done提示后,浏览器输入localhost:8080应该可以成功打开初始页面
13、ctrl+c后输入y确定可以停止服务
webpack
介绍
热部署
打包用的,可以把es6的模块打包降级到es5,使得所有的浏览器都可以使用
目前很多浏览器只支持es5
安装webpack
管理员运行cmd
npm install webpack -g
npm install webpack-cli -g
成功截图
可以手动查看版本
如果安装失败了,改用cnpm install webpack -g一般就可以成功了
简单学习如何使用webpack
1、新建一个文件夹,使用idea打开
2、新建modules文件夹
3、新建hello.js
export暴露js方法
//export暴露一个方法
exports.sayHi = function (){
document.write("<h1>hi!,xiaoye!</h1>")
}
4、新建main.js
require引入暴露的js,声明一个变量接受
该变量可以像Java中的类一样通过点来调用js方法
文件示例
//require加载暴露的方法
var hi = require("./hello")
hi.sayHi();
5、新建webpack.config.js
配置打包参数
1、entry入口
一般就是main.js
2、output输出
新建bundle.js作为接收输出的js(官方规范命名)
文件示例
module.exports = {
entry:'./modules/main.js',
output:{
filename:"./js/bundle.js"
}
}
6、terminal输入webpack打包
打包成功会多一个dist文件夹,里面有一个js文件夹,js文件夹里面就是打包成功的bundle.js
7、新建html,引入bundle.js测试是否成功
<script src="dist/js/bundle.js"></script>
8、浏览器打开,显示hi!xiaoye!
⭐vue-router
⭐是vue-router,别少字母,写成vue-route就不对了
浪费了我一下午,淦!
1、安装vue-router
npm install vue-router --save-dev
失败就换cnpm
2、main.js导入VueRouter
import
import VueRouter from 'vue-router'
显示声明使用
//显示使用VueRouter
Vue.use(VueRoute)
文件示例
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
//显示使用VueRouter
Vue.use(VueRouter)
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
3、编写components组件
4、在router的index.js里面写路径
export default new VueRouter({
routes:[
{
path:"/content",
name:"Content",
component:Content
},
{
path:"/personal",
name:"Personal",
component:Personal
}
]
})
5、在页面直接应用
<router-link to="/content">内容页</router-link>
<router-link to="/personal">个人页</router-link>
<router-view></router-view>
vue+element
1、搭建项目
1、命令符进入目标盘,创建前端webpack项目
vue init webpack vue-element
2、确认项目、描述、作者、选择不自动安装相关配置
一路No下去
3、进入项目
cd vue-element
4、安装相关依赖
1、npm install vue-router -D
路由配置
2、npm i element-ui -S
element-ui
3、cnpm install sass-loader node-sass -D
sass-loader和node-sass加载器
sass是css预处理器
4、npm install
2、配置路由
1、创建router目录
2、router目录下创建index.js
3、编写index.js
1、import Vue
2、import VueRouter
3、显式声明使用路由
Vue.user(VueRouter)
4、暴露路由对象
export default new VueRouter({
routes:[
{
path:"/content",
name:"Content",
component:Content
},
{
path:"/personal",
name:"Personal",
component:Personal
}
]
})
4、main.js引用router
1、import router from "./router"
2、vue实例中配置路由
new Vue({
el: '#app',
router
})
3、配置ElementUI
1、main.js中引入ElementUI
import ElementUI from 'element-ui'
2、main.js中引入预加载的css
import 'element-ui/lib/theme-chalk/index.css';
3、显示声明使用Element UI
Vue.use(ElementUI)
4、vue实例中配置render渲染
new Vue({
el: '#app',
router,
render: h => h(App)
})
main.js文件示例
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
render: h => h(App) //这里的app的意思是给App渲染
})
4、编写两个页面模拟登录
1、main
文件示例
<template>
<div>我是首页</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
2、login
⭐登录成功跳转路由(编程式导航)
this.$router.push("/main");
文件示例
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<script>
export default {
name:"Login",
data(){
return {
form:{
username: '',
password: ''
},
//表单验证,需要再el-form-item 元素中增加prop属性
rules:{
username:[
{required:true,message:'账号不能为空',trigger:'blur'}
],
password:[
{required: true,message: '密码不能为空',trigger:'blur'}
]
},
//对话框显示和隐藏
dialogVisible:false
}
},
methods:{
onSubmit(formName) {
//为表单绑定验证功能
this.$refs[formName].validate((valid) =>{
if (valid){
//使用 vue-router路由到指定页面,该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box{
border: 1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding:35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow:0 0 25px #909399;
}
.login-title{
text-align:center;
margin:0 auto 40px auto;
color:#303133;
}
</style>
⭐注意点
如果npm run dev失败可能是因为sass-loader版本过高,降级后npm install即可
1、node-sass : ^4.13.0
2、sass-loader : ^7.3.1
嵌套路由
1、创建新的页面
2、在router的index.js里配置路由
1、import
import Profile from "../pages/user/Profile";
import UserList from "../pages/user/UserList";
2、配置子路由
export default new VueRouter({
routes:[
{
path:"/main",
name:"Main",
component:Main,
children:[
{
path:"/user/profile",
component:Profile
},
{
path:"/user/userlist",
component:UserList
}
]
},
{
path:"/login",
name:"Login",
component:Login
}
]
})
3、在Main.Vue页面模拟子路由嵌套
文件示例
<template>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/userlist">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<e1-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</e1-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right:15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<router-view></router-view>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #048bd1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
参数传递和重定向
参数传递
第一种方式
1、父组件给参数
<router-link :to="{name:'Profile', params : { id ,sex }}">个人信息</router-link>
2、路由index.js对应
{
path:"/main",
name:"Main",
component:Main,
children:[
{
path:"/user/profile/:id/:sex",
component:Profile
},
{
path:"/user/userlist",
component:UserList
}
]
}
3、子组件拿参数
<p>{{ $route.params.id }}</p>
<p>{{ $route.params.sex }}</p>
第二种方式
1、父组件给参数
<router-link :to="{name:'Profile', params : { id ,sex }}">个人信息</router-link>
2、路由index.js对应
{
path:"/main",
name:"Main",
component:Main,
children:[
{
path:"/user/profile/:id/:sex",
component:Profile,
props:true
},
{
path:"/user/userlist",
component:UserList
}
]
}
3、子组件拿参数
<template>
<div>
<h1>个人信息</h1>
<p>{{ id }}</p>
<p>{{ sex}}</p>
</div>
</template>
<script>
export default {
props:['id','sex'],
name: "Profile"
}
</script>
<style scoped>
</style>
重定向
1、路由配置
{
path: '/goHome',
redirect:'/main'
}
2、视图引用
<router-link to="/goHome">回到首页</router-link>
3、404使用重定向实现
{
path: '*',
component:NotFound
}
拦截器
1、安装axios
1、npm安装
npm install --save vue-axios
2、main.js引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
2、编写进出前后的方法
1、进入前
beforeRouteEnter
beforeRouteEnter:(to,from,next)=>{
console.log("进入个人信息前")
},
2、离开前
beforeRouteLeave
beforeRouteLeave:(to,from,next)=>{
console.log("离开个人信息前")
},
3、实际参数
to
将要跳转的路径信息
from
跳转前的路径信息
next
路由控制参数
next()
跳入下一个页面
next('/path')
指定跳入path路由
next (false)
返回原来的页面
next(vm=>{ })
仅在beforeRouteEnter可用,vm为组件实例
⭐Vue的生命周期
请大家点击文字后方的链接移步至我的流程图,流程图理解配合下方代码文件动手验证效果更好
⭐请先在terminal终端中输入 npm install vue 安装vue!!不然是不会成功哒
源码文件
<!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">
<h1 id="h1">{{ msg }}</h1>
<button @click="msg = 'bye~'">hi -> bye</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hi~'
},
methods:{
hello:function(){
console.log('你好啊');
}
},
beforeCreate(){
// console.log(this.msg)
// this.hello()
},
created(){
// console.log(this.msg)
// this.hello()
},
beforeMount(){
// console.log(document.getElementById('h1').innerHTML)
},
mounted(){
// console.log(document.getElementById('h1').innerHTML)
},
beforeUpdate(){
// console.log(document.getElementById('h1').innerHTML)
},
updated(){
console.log(document.getElementById('h1').innerHTML)
}
})
</script>
</body>
</html>
0 条评论
下一页