Js 面向对象 动态添加标签页
[详细] -->
赞
踩
热门标签
热门文章
当前位置: article > 正文
Vue快速上手教程
作者：繁依Fanyi0 | 2024-02-08 15:28:30
赞
踩
vue快速上手
什么是vue
Vue ) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
第一个vue文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" class="app1">{{message}}</div>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
// div标签 id
el:"#app",
data:{
message:"hello vue!!!"
}
})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
el：可以为标签的class 也可以是id 也可以是标签
以上情况也可以写 el:“.app1” el:“div” 效果都一样
Vue会管理el选项命中的元素及其内部的后代元素
vue指令
v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
<div id="app">
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"vue!!!"
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
v-html
更新元素的 innerHTML
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"<h2 style='color:red'>vue-html</h2>"
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
<div id="app">
<input type="button" value="点击" v-on:click="on" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
on:function(){
alert("点击v-on")
}
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
以上也可以简写@Click来实现
双击事件也可以用 @dblclick来实现
v-show
里面内容将最终会被解析为布尔值（操作样式） true将会被渲染 false将会被隐藏（设置css样式display：none）
<div id="app">
<p v-show="num > 0">显示</p>
<p v-show="num < 0 ">隐藏</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
v-if
跟v-show一样，true显示，false隐藏， 只不过它操作的是dom 如果条件为false直接清除dom元素 ，而v-show是设置display样式来隐藏的
v-bind
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
<div id="app">
<img v-bind:src="url" />
<img :src="url" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
url:"https://cn.vuejs.org/images/logo.svg"
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
v-for
<div id="app">
<ul>
<li v-for="index in arr">{{index}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:['北京','上海','广州','深圳']
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
其中 index 是源数据数组，而 arr 则是被迭代的数组元素的别名
v-model
双向数据绑定 指的是不管更改哪一方的数据 都会同步更新值
<div id="app">
<input type="text" v-model="message" />
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"v-model双向绑定"
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
开始Vue项目安装
搭建环境
如果本地自己已经安装node的话可以忽略
安装成功后进入cmd 输入node -v出现版本号就可以了
然后接着输入 npm -v
接着安装Vue环境
# 安装淘宝npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# vue-cli 安装依赖包
cnpm install -g @vue/cli
- 1
- 2
- 3
- 4
安装了淘宝npm，cnpm是为了提高我们安装依赖的速度。vue ui是@vue/cli3.0增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作。
新建项目
创建Vue项目 选择要创建的项目下打开cmd 输入vue ui 命令 必须Vue版本在3.0以上才能打开ui
本次用到的是vue2 不是vue3
这样就创建好了
vue的项目结构
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据（state）状态管理
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
启动命令 npm run serve
idea也可以配置启动
这样也可以启动vue项目
安装element-ui
在项目目录下 输入cnpm install element-ui --save
安装完成后在src目录下的main.js引入element-ui
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)
- 1
- 2
- 3
- 4
测试
<template>
<div class="about">
<h1>This is an about page</h1>
<el-button type="primary">主要按钮</el-button>
</div>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
安装axios
安装命令cnpm install axios --save
引入
import axios from 'axios'
Vue.prototype.$axios = axios
- 1
- 2
这样就可以通过this.$axios.get()来发起我们的请求了
this.$axios.post('http://localhost:8081/login',this.ruleForm).then(res =>{
const token = res.headers.authorization
_this.$store.commit("SET_TOKEN",token);
_this.$store.commit("SET_USERINFO",res.data.data)
})
- 1
- 2
- 3
- 4
- 5
token状态同步
在store/index.js添加代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
token:localStorage.getItem("token"),
userInfo:JSON.parse(sessionStorage.getItem("userInfo"))
},
getters: {
getUser:state => {
return state.userInfo
}
},
mutations: {
SET_TOKEN:(state,token) =>{
state.token = token;
localStorage.setItem("token",token);
},
SET_USERINFO:(state,userInfo)=>{
state.userInfo = userInfo;
sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
},
REMOVE_INFO:(state)=>{
localStorage.setItem("token",'');
sessionStorage.setItem("userInfo",JSON.stringify(''))
state.userInfo = {}
}
},
actions: {
},
modules: {
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
在登录的时候将token和userInfo信息存储在sessionStorage或者localStorage
_this.$store.commit("SET_TOKEN",token);
_this.$store.commit("SET_USERINFO",res.data.data)
- 1
- 2
axios全局拦截器
点击登录按钮发起登录请求，成功时候返回了数据，如果是密码错误，就弹窗消息提示。为了让这个错误弹窗能运用到所有的地方，所以对axios做了个后置拦截器，就是返回数据时候，如果结果的code或者status不正常，那么对应弹窗提示。
import router from './router'
import store from './store'
import Element from 'element-ui'
import axios from 'axios'
axios.defaults.baseURL='http://localhost:8081'
axios.interceptors.request.use(config => {
//前置拦截
// 可以统一设置请求头
return config
})
axios.interceptors.response.use(response => {
const res = response.data;
//后置拦截
// 当结果的code是否为200的情况
if (res.code === 200) {
Element.Message({
message: response.data.message,
type: 'success',
duration: 2 * 1000
})
return response
} else {
// 弹窗异常信息
Element.Message({
message: response.data.message,
type: 'error',
duration: 2 * 1000
})
// 直接拒绝往下面返回结果信息
return Promise.reject(response.data.message)
}
},
error => {
console.log('err' + error)// for debug
if(error.response.data){
error.message = error.response.data.message
}
// 根据请求状态觉得是否登录或者提示其他
if (error.response.status === 400) {
store.commit('REMOVE_INFO');
router.push({
path: '/login'
});
}
if (error.response.status === 403) {
error.message = '权限不足，无法访问';
}
Element.Message({
message: error.message,
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
最后在mian.js引入
import './axios'
- 1
router权限拦截
如果未登录访问就直接重定向到登录页面
在src定义一个js文件
页面路由时候的的meta信息，指定requireAuth: true，需要登录才能访问，这里在每次路由之前（router.beforeEach）判断token的状态，觉得是否需要跳转到登录页面
main.js中import新建的ruoter拦截js
{
path: '/edit/:id',
name: 'Edit',
meta: {
requireAuth: true
},
component: BlogEdit
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
router拦截js
import router from "./router";
// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
const token = localStorage.getItem("token")
console.log("------------" + token)
if (token) { // 判断当前的token是否存在 ； 登录存入的token
if (to.path === '/login') {
} else {
next()
}
} else {
next({
path: '/login'
})
}
} else {
next()
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/69722
推荐阅读
- 相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
