elementui使用
cnpm isntall -S element-ui@2.9
<template>
<div>
<h1>按钮的使用</h1>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share" @click="handleClick"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
<hr>
<h1>带链接的文字</h1>
<div>
<el-link href="https://element.eleme.io" target="_blank" type="danger">点我看美女</el-link>
</div>
<h1>Radio单选</h1>
<el-radio v-model="radio" label="1">男</el-radio>
<el-radio v-model="radio" label="2">女</el-radio>
<h1>input</h1>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
<el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search" @click="handleClick2"></el-button>
</el-input>
</div>
<h1>表格</h1>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<h1>message消息提示</h1>
<el-button :plain="true" @click="open4">错误</el-button>
</div>
</template>
<script>
export default {
name: "ElementuiView",
data() {
return {
radio: '1',
input3: '',
select: '',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleClick() {
location.href = 'http://www.baidu.com'
},
handleClick2() {
console.log(this.select)
console.log(this.input3)
},
open4() {
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
}
}
}
</script>
<style scoped>
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>vuex使用
概念
# vuex :状态管理器---》存数据(变量)的地方，所有组件都可以操作
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
http://photo.liuqingzheng.top/2022%2010%2030%2003%2003%2007%20/fc15b1f552b1465db223ff7abf8e0425.png
http://photo.liuqingzheng.top/2022%2010%2030%2003%2003%2007%20/fc15b1f552b1465db223ff7abf8e0425.png搭建vuex环境
创建文件：src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
基本使用
初始化数据、配置actions、配置mutations，操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
// console.log('actions中的jia被调用了',miniStore,value)
context.commit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
}
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
<template>
<div>
<hr>
{{sum}}
<button @click="handleClick">点我</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
v:'xxx',
sum:this.$store.state.sum
};
},
methods:{
handleClick(){
// action中的方法名
// this.$store.dispatch('jia',2)
// console.log(this.$store.state.sum)
//mutations中的方法名
this.$store.commit('JIA',4)
console.log(this.$store.state.sum)
}
}
};
</script>
Router使用
# 提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转
# 1 简单使用
-页面跳转（咱们之前学过了）
-写个页面组件
-在router--->index.js--->routes数组中加入一个路由即可
# 2 组件中实现页面跳转
-两种方式
-方式一：使用 router-link 标签，to 地址
<router-link to="/about"></router-link>
-方式二：js控制
this.$router.push('/about')
# 3 路由跳转时，可以使用对象
-1 通过对象跳转路由name形式： <router-link :to="{name:'about'}">
-2 通过对象跳转路由path形式： <router-link :to="{path:'/about'}">
-3 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
-4 在另一个页面中取出地址栏中数据：console.log(this.$route.query)
-5 这种传递方式和 3 一样 <router-link to="/about?name=lqz&age=19">
-6 注意区分：
this.$route：当前路由对象，当前路径，取传递数据。。。
this.$router：整个路由对象，主要做跳转用
-7 路径中分割出 参数
-配置：
{
path: '/detail/:pk',
name: 'detail',
component: DetailView
},
-在路由中取：
this.$route.params.pk
-8 路由跳转时，使用 7 的样子
-this.$router.push({name: 'detail', params: {pk: 999}})
-<router-link :to="{name:'detail',params:{pk:88}}">
# 4 this.router 的一些方法
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由多级路由
# 使用步骤：
- 1 新建一个页面组件（LqzView），配置路由
{
path: '/lqz',
name: 'lqz',
component: LqzView,
},
-2 在页面中，想再显示页面组件，实现点击切换的效果
<h1>lqz页面</h1>
<router-link to="lqz01">
<button>lqz-01</button>
</router-link>
<router-link to="lqz02">
<button>lqz-02</button>
</router-link>
<router-view>
# 以后这里变换页面组件，多级路由
</router-view>
-3 新建两个页面组件，Lqz01.vue，Lqz02.vue，配置路由children
{
path: '/lqz',
name: 'lqz',
component: LqzView,
children: [ //通过children配置子级路由
{
path: 'lqz01', //此处一定不要写：/news
component: Lqz01
},
{
path: 'lqz02',//此处一定不要写：/message
component: Lqz02
}
]
},路由守卫
# 前置路由守卫，再进入路由之前做判断
# 写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from)
// 要是访问lqz01，都不能跳转'
// 如果没有登录，不能访问
if (to.path == '/lqz/lqz01') {
alert('你灭有权限')
} else {
next() # 继续访问
}路由的两种工作模式
路由器的两种工作模式
1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。
4 history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题localstorage和sessionstorage,和cookie
# 前端存储数据
- 登录成功，有token，存本地
- 不登陆加购物车
# 前端可以存数据的位置：
localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
sessionstorage：只在当前会话生效，关闭浏览器，就没了
cookie：有过期时间，到了过期时间，自动删除
# 操作这三个位置
<template>
<div class="home">
<h1>操作localstorage,永久存储</h1>
<button @click="addLocalstorage">增加</button>
<button @click="getLocalstorage">查</button>
<button @click="deleteLocalstorage">删除</button>
<h1>操作sessiostorage,当前会话，关闭浏览器</h1>
<button @click="addSessiostorage">增加</button>
<button @click="getSessiostorage">查</button>
<button @click="deleteSessiostorage">删除</button>
<h1>操作cookie,有过期时间</h1>
<button @click="addCookie">增加</button>
<button @click="getCookie">查</button>
<button @click="deleteCookie">删除</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
methods: {
addLocalstorage() {
var userinfo = {name: 'lqz', age: 19}
localStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getLocalstorage() {
var userinfo = localStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteLocalstorage() {
localStorage.clear()
localStorage.removeItem('userinfo')
},
addSessiostorage() {
var userinfo = {name: '彭于晏', age: 19}
sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
},
getSessiostorage() {
var userinfo = sessionStorage.getItem('userinfo')
console.log(JSON.parse(userinfo).name)
},
deleteSessiostorage() {
sessionStorage.clear()
sessionStorage.removeItem('userinfo')
},
addCookie() {
// 需要借助于第三方 vue-cookies
// cnpm install -S vue-cookies
this.$cookies.set('name', '刘亦菲', '300s')
},
getCookie() {
console.log(this.$cookies.get('name'))
},
deleteCookie() {
this.$cookies.remove('name')
},
}
}
</script>
