項目五遇到的知識點
（一）、vuex保存登陸狀態
- vue 項目
一、安裝 vuex
npm install vuex --save
二、在src下面新建store文件夾
- store文件夾下新建state.js、actions.js、mutations.js、getters.js、index.js
index.jsjavascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import state from './state'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
state.jscss
state訪問狀態對象html
export default { isLogin: false, }
mutations.jsvue
- Mutations修改狀態
- tools.m.js是封裝了一些方法
- 在這裏主要是爲了移除cookie
cookie能夠用網上的都不要緊java
import tools from '../assets/js/tools.m.js'; export default { loginOut(state){ //退出登陸 state.isLogin = false; tools.cookie.remove('user'); }, setLoginState(state){ //修改登陸狀態 state.isLogin = true; } }
getters.jsjquery
getters計算過濾操做webpack
export default { isLogin(state){ return state.isLogin; } }
action.jsweb
actions異步修改狀態vue-router
export default { }
三、在main.js中引入store
import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
四、在APP.vue中必定要初始化數據，要否則一切白搭
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
name: "app",
data() {
return {
};
},
created(){
var user = tools.cookie.get('user');
if(user){
this.setLoginState(tools.jsonParse(user));
}
},
methods:{
...mapMutations(['setLoginState'])
}
};
</script>
<style lang="less">
</style>
五、登陸頁面login.vue中使用
- 下面也是用來封裝的方法
下面代碼就是cookie用戶狀態，修改，給cookie一個時間期限vuex
<script> import {mapMutations} from 'vuex; export default{ methods: { loginData(){//登陸點擊事件 //...登陸過程 //最後 var expires = new Date(); expires.setTime(expires.getTime() + 7*24*60*60*1000); tools.cookie.set("user",tools.toJson(true),expires.toGMTString());//tools.toJson(true)(true)能夠保存用戶信息如今我還沒接，接口就用true替代 that.setLoginState(true); } } ...mapMutations(['setLoginState']) } </script>
六、退出頁面loginOut.vue
<script>
import { mapGetters,mapMutations } from 'vuex'
export default{
methods: {
signOut(){//退出點擊事件
this.loginOut();
},
...mapMutations(['loginOut'])
}
}
</script>
結束。。。
（二）、vue中引入echarts
一、安裝
npm install echarts --save
二、全局引入
(1)、在main.js中配置
import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入組件
(2)、echarts.vue中引用
柱狀圖
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
js
<script>
export default {
name: 'eCharts',
data () {
return {
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基於準備好的dom，初始化echarts實例
var myChart = this.$echarts.init(document.getElementById('myChart'))
// 繪製圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
三、按需引入
- 若是是在許多頁面中都有用到，就寫在main.js中
main.js
//引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入餅狀圖組件
require('echarts/lib/chart/pie')
// 引入提示框和title組件，圖例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
Vue.prototype.$echarts = echarts //引入組件
- 在組件中使用同上，若是隻在一個地方使用就直接寫在.vue文件中就好啦
- 注：這裏用 require 不用 import 引入是由於 import 須要詳細的路徑
This is an 原文地址：
四、項目中使用折線圖
<!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM --> <div id="main" style="height:400px;margin-top: 100px;"></div>
js
<script>
// 引入 ECharts 主模塊
let echarts = require('echarts/lib/echarts');
// // 引入折線圖
require('echarts/lib/chart/line');
// // 引入提示框和標題組件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/component/toolbox');
export default{
mounted() {
this.drawLine();
},
methods:{
// 折線圖
drawLine(){
//基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'))
myChart.setOption ({
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
// 圖例--折線提示
legend: {
data:['郵件營銷','聯盟廣告']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 右上角的工具箱(下載)
toolbox: {
feature: {
saveAsImage: {}
}
},
// 折線底部
xAxis: {
type: 'category',
boundaryGap: false,
data: ['週一','週二','週三','週四','週五','週六','周天']
},
// 左側單位
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} (份)'//更改y軸單位，不要就不用寫
}
},
// 數據
series: [
{
name:'郵件營銷',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'聯盟廣告',
type:'line',
stack: '總量',
data:[220, 182, 191, 234, 290, 330, 310]
}
]
})
}
}
}
</script>
（三）、點擊div空白處隱藏v-show
一、方法1
經過監聽事件
document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; } })
二、方法2
給最外層的div加個點擊事件 @click="userClick=false"
給點擊的元素上面加上：@click.stop="userClick=!userClick"
This is an 原文地址：
三、方法3
- vue 在顯示v-show的div外任意點擊隱藏v-show
- 核心思想就是監聽document的click/touchstart
- 用contains這個方法去判斷點擊的元素是否在區域外
- this.$el
this.$el是在mounted中才會出現的
mounted() { document.addEventListener('click', this.handleDocumentClick); document.addEventListener('touchstart', this.handleDocumentClick);//移動 }, methods: { handleDocumentClick(e) { if (!this.$el.contains(e.target)) { this.isShow = false; } } }
四、方法4
- 將點擊的區域過濾。不須要再阻止冒泡，須要使用到ref屬性
this.$refs
<template> <div ref="box"> <div @click="isShow"></div> </div> </template> mounted(){ let that=this; document.addEventListener('click',function(e){ if(that.$refs.box && !that.$refs.box.contains(e.target)){ that.show = false; } }) }, methods:{ isShow:function(){ this.show=true } }
（四）、vue項目中使用element UI組件
一、安裝
npm i element-ui -S
二、完整引入Element
在main.js中寫入一下內容
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
三、vue+element-ui路由配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: resolve => require(['@/views/index.vue'],resolve),
redirect: 'home',
children:[
{
path: '/home',
component: resolve => require(['@/views/home.vue'],resolve)
},
{
path: '/user',
component: resolve => require(['@/views/user.vue'],resolve),
children: [
{
path: 'login',
component: resolve => require(['@/components/user/login.vue'],resolve)
},
{
path: 'logout',
component: resolve => require(['@/components/user/logout.vue'],resolve)
}
]
}
]
}
]
})
四、 NavMenu 導航菜單實現點擊跳轉不一樣的內容
- 效果圖
路由配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/text',
component: resolve => require(['@/views/text.vue'],resolve),
children: [
{
path: 'trend1',
name: 'trend1',
component: resolve => require(['@/components/text/trend1.vue'],resolve)
},
{
path: 'task1',
name: 'task1',
component: resolve => require(['@/components/text/task1.vue'],resolve)
}
]
}
]
});
views文件夾
新建text.vue
<template> <div class="text" > <el-aside width="190px"> <Side /> </el-aside> <el-main > <router-view></router-view> </el-main> </div> </template> <script> //組件 import Side from '../components/text/side.vue' export default { name: 'text', data() { return{ } }, components: { Side } } </script> <style lang="less"> .el-aside { float: left; } </style>
components文件夾
- 新建side.vue、task1.vue、trend1.vue
side.vue
<template>
<el-row class="sidebar" style="width: 190px;">
<el-col>
<el-menu
class="el-menu-vertical-demo"
:default-active="activeIndex"
router
:default-openeds="openeds"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="iconfont icon-qushifenxi"></i>
<span>用戶設置</span>
</template>
<el-menu-item-group>
<el-menu-item index="/text/trend1">我的中心</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="iconfont icon-renwuguanli"></i>
<span>任務管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/text/task1">任務信息</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
tabPosition: 'left',
openeds: ['1','2','3']
}
},
computed:{
activeIndex(){
return this.$route.path.replace('/','')
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
task1.vue
<template>
<div>
任務信息內容
</div>
</template>
<script>
export default {
name: 'task1',
data() {
return {
}
}
}
</script>
trend1.vue
<template>
<div>
我的中心內容
</div>
</template>
<script>
export default {
name: 'trend1',
data() {
return {
}
}
}
</script>
（五）、WebSocket
- 協議標識符是ws（若是加密，則爲wss，對應 HTTPS 協議），服務器網址就是 URL
栗子
var ws = new WebSocket('wss://echo.websocket.org'); ws.onopen = function(evt) { console.log('Connection open ...'); ws.send('Hello WebSockets!'); }; ws.onmessage = function(evt) { console.log('Received Message: ' + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log('Connection closed.'); };
(六)、父組件獲取子組件input的值
子組件
<input v-model.trim="msg" ref="msg"> data(){ return { msg: '' } }父組件
<inputValue ref="getInput" /> <button @click="getMsg"></button> methods:{ getMsg(){ console.log(this.$refs.getInput.msg) } }注意儘可能少用ref
(七)、Vue中v-for的使用
- 效果圖
- v-for循環以前一直想要實現的內容，終於解決了...
html
<div class="test-content">
<div class="test-group" v-for="(value,key) in testList">
<item class="item-left">{{value}}</item>
<div class="item-right">{{testAjax[key]}}</div>
</div>
</div>
less
.test-content {
width: 300px;
margin-top: 100px;
border: 1px solid #000;
.test-group {
height: 45px;
line-height: 45px;
padding: 0 20px;
box-sizing: border-box;
border-bottom: 1px solid #000;
&:last-of-type{
border-bottom: none;
}
.item-left,.item-right {
display: inline-block;
}
.item-left {
float: left;
}
.item-right {
float: right;
}
}
}
js
data() {
return {
testList:{
id: 'ID',
address: '地址',
sex: '性別',
name: '姓名',
phone: '電話',
},
testAjax: {
id: '100010',
address: '上海靜安區',
sex: '男',
name: '哈哈哈',
phone: '12345678985',
}
}
}
- 實現testAjax通常是後端傳的在對應的地方寫，this.testAjax = '後端內容'
- 好處省了很多代碼
(八)、elementUI 的表單
- 效果圖
<template>
<el-table
:data="tableData"
style="width: 1000px;margin: 100px auto;"
border
>
<el-table-column v-for="(item,index) in items" :prop="item.prop" :label="item.label" >
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "news",
data() {
return {
items: [
{
prop: 'date',
label: '日期'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'address',
label: '地址'
}
],
tableData: [{
date: '2018-05-02',
name: '王大虎',
address: '上海市靜安區高平路 1518 弄'
}, {
date: '2018-12-25',
name: '王二虎',
address: '上海市楊浦區金沙江路 563 弄'
}, {
date: '2018-10-01',
name: '王三虎',
address: '上海市浦東新區哈哈路 799 弄'
}, {
date: '2019-01-28',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
};
},
created() {
},
}
</script>
<style>
</style>
展開行
- row-key：行數據的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能的狀況下，該屬性是必填的。類型爲 String 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種狀況請使用 Function。
expand-row-keys：能夠經過該屬性設置 Table 目前的展開行，須要設置 row-key 屬性才能使用，該屬性爲展開行的 keys 數組。
type="expand"效果圖
- 操做按鈕效果圖
<template>
<el-table
:data="tableData"
style="width: 1000px;margin: 100px auto;"
:row-key='getRowKeys'
:expand-row-keys="dataindex"
border
>
<el-table-column v-for="(item,index) in items" :prop="item.prop" :label="item.label" >
</el-table-column>
<el-table-column type="expand" label="點擊" >
<template slot-scope="props">
我是展開行
</template>
</el-table-column>
<el-table-column label="操做" >
<template slot-scope="scope">
<el-button
round
size="mini"
@click="myClickLook(scope.$index, scope.row)"
>查看</el-button>
<el-button
round
size="mini"
@click="myClickCommand(scope.$index, scope.row)"
>命令</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "news",
data() {
return {
dataindex:[],
getRowKeys (row) {
return row.id;
},
items: [
{
prop: 'date',
label: '日期'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'address',
label: '地址'
}
],
tableData: [{
id: 0,
date: '2018-05-02',
name: '王大虎',
address: '上海市靜安區高平路 1518 弄'
}, {
id: 1,
date: '2018-12-25',
name: '王二虎',
address: '上海市楊浦區金沙江路 563 弄'
}, {
id: 2,
date: '2018-10-01',
name: '王三虎',
address: '上海市浦東新區哈哈路 799 弄'
}, {
id: 3,
date: '2019-01-28',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
};
},
methods: {
myClickLook(index,row) {
this.dataindex = [];
this.dataindex.push(index);
console.log(this.dataindex);
},
myClickCommand(index,row) {
this.dataindex = [];
this.dataindex.push(index);
}
},
created() {
},
}
</script>
<style>
.el-table__expand-icon:after {
content: '查看';
color: #42c4fe;
cursor:pointer;
}
.el-table__expand-icon--expanded {
transform: rotate(0deg);
}
.el-table__expand-icon--expanded:after {
content: '收起';
color: #42c4fe;
cursor:pointer;
}
.el-table__expand-icon>i {
display: none !important;
}
</style>
合併單元格
<el-table
:data="tableData"
style="width: 1000px;margin: 100px auto;"
:row-key='getRowKeys'
:expand-row-keys="dataindex"
:span-method="objectSpanMethod"
border
></el-table>
<script>
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //用於設置要合併的列
if (rowIndex % 2 === 0) { //用於設置合併開始的行號
// return {
// rowspan: 2, //合併的行數
// colspan: 1 //合併的列數，設爲０則直接不顯示
// };
return [2,1]
} else {
return [0,0]
}
}
}
}
</script>
(九)、JavaScript 中的12種循環遍歷方法
- 一、for循環
- for - 循環代碼塊必定的次數
常常用於數組的循環遍歷
let arr = ['蘋果','香蕉','梨']; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 "蘋果" // 1 "香蕉" // 2 "梨"- 二、for in 循環
- for/in - 循環遍歷對象的屬性
- key 表明對象的key值，obj[key]表明對應的value值
for in循環主要用於遍歷普通對象
let obj = { name: '張三', age: 18, sex: '男' } for(let key in obj){ console.log(key, obj[key]); } // name 張三 // age 18 // sex 男- 三、while循環
- While 循環會在指定條件爲真時循環執行代碼塊。
只要指定條件爲 true，循環就能夠一直執行代碼。
let cars = ['蘋果','香蕉','梨','橘子']; var i = 0; while(cars[i]){ console.log(cars[i]); i++; } // 蘋果 // 香蕉 // 梨 // 橘子- 四、do while 循環
do while循環是while循環的一個變體，它首先執行一次操做，而後才進行條件判斷，是true的話再繼續執行操做，是false的話循環結束
let i = 5; do { console.log(i); i--; } while(i > 3) //5 //4- 五、Array forEach循環
- forEach() 方法用於調用數組的每一個元素，並將元素傳遞給回調函數。
注意: forEach() 對於空數組是不會執行回調函數的。
let arr = ['蘋果','香蕉','梨']; arr.forEach(function(i,index){ console.log(i,index); }) // 蘋果 0 // 香蕉 1 // 梨 2- 六、Array map()方法
- map()方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值
- map()方法按照原始數組元素順序依次處理元素
- map()不會對空數組進行檢測
- map()不會改變原始數組
map 和 forEach 方法都是隻能用來遍歷數組，不能用來遍歷普通對象。
let arr = ['蘋果','香蕉','梨']; let tt = arr.map(function(i){ console.log(i); }) // 蘋果 // 香蕉 // 梨- 七、Array filter()方法
- filter() 方法返回符合必定條件的元素
filter 方法是 Array 對象內置方法，它會返回經過過濾的元素，不改變原來的數組。
let arr = [1,2,3]; let tt = arr.filter(function(i){ return i > 1; }) console.log(tt); //[2, 3]- 八、Array some()方法
some()方法用於檢測數組中的元素是否知足條件(函數提供),返回boolean值，不改變原數組
let arr = [1,2,3]; let tt = arr.some(function(i){ return i > 1; }) console.log(tt);//true- 九、Array every()方法
every() 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供），返回 boolean 值，不改變原數組。
let arr = [1,2,3]; let tt = arr.every(function(i){ return i > 1; }) console.log(tt);//false- 十、 Array reduce()方法
reduce()方法接收一個函數做爲累加器，數組中的每一個值(從左到右)開始縮減，最終計算爲一個值
let arr = [1,2,3]; let add = arr.reduce(function(i,j){ return i+j; }) console.log(add);//6- 十一、Array reduceRight()方法
reduceRight()方法和reduce功能是同樣的，它是從數組的末尾處向前開始計算
let arr = [1,2,3]; let add = arr.reduceRight(function(i,j){ return i+j; }) console.log(add);//6十二、for of 循環
let arr = ['蘋果','香蕉','梨']; for(let i of arr){ console.log(i); } // 蘋果 // 香蕉 // 梨
This is an 原文地址：
零碎知識點
一、vue中如何引入jQuery
- 用vue-cli腳手架工具構建項目成功後當需引入jq
安裝
npm install jquery --save
webpack.base.conf.js
const webpack = require('webpack');
module.exports = {
resolve: {
alias:{
'jquery': 'jquery
}
},
plugins:[
new webpack.optimize.CommonsChunkPlugin('common.js');
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
}
在入口文件main.js中輸入
import $ from 'jquery'
2 、三元運算符
- ? :
- 運用兩個三元運算符
- 不一樣狀態變化不一樣顏色
- 效果圖
html
<div class="cell" v-for="item in items">
<div :class="item.state == 1 ? 'state-green' : item.state == 0 ? 'state-orange' : 'state-red'">{{item.title}}</div>
</div>
js
data() {
return {
// 1是運行0是暫停-1是終止
items: [
{
title: '運行',
state: 1
},
{
title: '暫停',
state: 0
},
{
title: '終止',
state: -1
}
]
}
}
css
.cell {
.state-green {
color: #67C23A;
}
.state-orange {
color: #E6A23C;
}
.state-red {
color: #F56C6C;
}
}
三、element-ui 中的table的列隱藏問題解決
- 通常狀況我控制元素顯示隱藏用vue的v-show
el-table-column使用v-show時不支持換成v-if可達到目的
<el-table-column v-if="isShow"></el-table-column>
四、vue中'. native'修飾符的使用
在父組件中給子組件綁定一個原生的事件，就將子組件變成了普通的HTML標籤，不加'. native'事件是沒法觸 發的。
<Senior class="senior-right" @click="getClick" /> <Senior class="senior-right" @click.native="getClick" />
相關文章
- 1. 項目八遇到的知識點
- 2. 項目七遇到的知識點
- 3. 項目六遇到的知識點
- 4. 【springboot】項目遇到的問題及知識點
- 5. vue項目遇到的瑣碎知識點
- 6. 項目中遇到的幾個知識點總結
- 7. 0814項目所遇知識
- 8. 作題中遇到的知識點
- 9. 工做中遇到的知識點
- 10. js遇到的小知識點
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 項目模板 - Maven教程
- • RxJava操作符（五）Error Handling
- • Git五分鐘教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 項目八遇到的知識點
- 2. 項目七遇到的知識點
- 3. 項目六遇到的知識點
- 4. 【springboot】項目遇到的問題及知識點
- 5. vue項目遇到的瑣碎知識點
- 6. 項目中遇到的幾個知識點總結
- 7. 0814項目所遇知識
- 8. 作題中遇到的知識點
- 9. 工做中遇到的知識點
- 10. js遇到的小知識點