精彩代码 vue.js

8次阅读

共计 9463 个字符，预计需要花费 24 分钟才能阅读完成。

新建完项目，先做好准备工作
1 定义全局路由
import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
redirect : ‘/home’,
name: ‘index’,
component : () => import(‘@/page/home.vue’)
},
{
path: ‘/detail/:codeId’,
name: ‘detail’,
component : () => import(‘@/page/detail.vue’)
},
{
path: ‘/list’,
name: ‘list’,
component : () => import(‘@/page/list.vue’)
},
{
path: ‘/home’,
name: ‘home’,
component : () => import(‘@/page/home.vue’)
},
]
})

<!– 路由路径中 / 就是首页的意思了 –>

1.1 路由懒加载，当组件太多的时候，vue 这种单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了 loading 也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！
其实懒加载十分简单, 几个 resolve 就行了
export default new Router({
routes: [
{
path: ‘/’,
component: resolve => require([‘components/index.vue’], resolve)
},
{
path: ‘/about’,
component: resolve => require([‘components/About.vue’], resolve)
}
]
})

2、axios 类似就是 jq 的 ajax
Vue.prototype.$axios = axios;
使用的时候，直接
this.$axios
3、main.js 的设置
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import axios from ‘axios’
import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’

Vue.use(MintUI)
Vue.config.productionTip = false/* 生产提示 */
Vue.prototype.$axios = axios;
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: {App},
template: ‘<App/>’
})
<!– 使用的 router，vuex 要在底下申明，引入的外部插件要用 vue.use 去使用 –>
4、app.vue 一般都不用动，用作来做路由跳转
<template>
<div id=”app”>
<meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0″/>
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>

<!–keep-alive 用作路由页面的缓存，然后可以再加上 transition–>
<style scoped>
<!– 这样加上 scoped 只对当前组件生效的 css 代码 –>
5 正常的一个组件
import {apiControll} from “@/api/api.js”
import detailList from “@/components/detail/detail_list”
import serachInput from “@/components/common/search_input”;
// import Watermark from “@/tools/water”/* 水印 */
import {watermark} from “@/tools/tools”/* 水印 */
export default{
components:{
detailList,
serachInput,
},
data(){
return{
codeData:[
{
name:” 张三 ”,
sex :” 男 ”,
mingzu :” 汉 ”,
birthday :{
year:2017,
month:7,
day:21
},
adress : “ 汉阳区分局秦川街派出所下陈家湖 170 号 ”,
codeNunber :”4400652199852521223″,
img :”” ,
shedu : false,
weifa :true,
zaitao : true,
origin : “ 上海市局科技处提供数据 ”,
date : “2018-7-16 12:23″ ,
},
{
name:” 张三 ”,
sex :” 男 ”,
mingzu :” 汉 ”,
birthday :{
year:2017,
month:7,
day:21
},
adress : “ 汉阳区分局秦川街派出所下陈家湖 170 号 ”,
codeNunber :”4400652199852521223″,
shedu : true,
weifa :false,
zaitao : false,
origin : “ 上海市局科技处提供数据 ”,
date : “2018-7-16 12:23″ ,
},
],
diy_router:” 上海铁路公安 ”,
// codeId :””,
}
},
computed:{
codeId(){
if(this.$route.params.codeId==undefined){/* 返回退后会变成 undefined*/
return ‘ 上海铁路公安 ’;
}
return this.$route.params.codeId;
}
},
activated(){/* 当前页面有水印 */
watermark(this.codeId,’.detail_list_all’);
},
methods:{
search_val(val){
watermark(val,’.detail_list_all’);
this.getList(val);
},
getList(val){
console.log(apiControll(val));

}

}
}
<!– 这里包含了引入组件 –>
<!– 引入的组件注册 –>
<!– 引入 js 文件的方法要用 {} 包住 –>
<!–data 中数据的定义，–>
<!– 计算属性的使用，–>
<!–acitvated 是当前这个组件处于激活时候用的，比 mounted，created 好是因为这个属性，是因为写在里面的方法是可以多次运行的 –>

6 一个简单的组件构成
<template>
<section>
<form action=”” onsubmit=”return false;”><!– 手机测试的话，改事件，调用搜索 –>
<mt-search v-model=”searchVal”
:autofocus=”autofocus”
placeholder=” 请输入身份证号 ”
@keyup.native.enter=”search(searchVal)”
>
</mt-search>
</form>
</section>
</template>

}
</script>

<!– 一般，一个组件用一个 section 包住，绑定属性用:, 绑定事件用 @,–>
<!– 传进来的参数用 props 接受，可以数组或者对象的形式去写，对象里面也有对象 –>
<!– 也是可以的。–>

<!–this.$emit(‘search_val’,value);–>
<!– 这个是发射事前，在父亲组件绑定这个事件，这个事件就可以发生了。–>

======================================================
7 一般我们做移动端项目，需要用手机才能真正测试出东西，那么正在开发的本地环境中的 vue 项目，怎样才能让手机访问呢？
首先，手机和电脑处于同一个网络电脑调出 cmd 命令窗口，查找自己的 ip 地址：ipconfigipv4 就是自己本机的 ip 地址了。例如 192.168.1.126
然后再 vue 项目中 config 文件夹下的 index.js
dev: {

// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {},

// Various Dev Server settings
host: ‘localhost’, // can be overwritten by process.env.HOST<!– 修改这里 –>
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

把 localhost 中的地址，改成是自己电脑的 ip 地址，这时候，该项目中的地址就变成是这个地址了，再用手机打开这个地址就行了
======================================================
8 vue 的项目和 php 的项目，域名是绝对不冲突的，意思就是，当使用 vue 的项目的时候，可以开 php，或者使用 easymock，yapi 去模拟接口的，这个是没有问题的
======================================================
9 computed 属性，也可以传参
computed:{
showALL(){
return function(value) {
let allNum = value.caseFeedbackAmount+
value.caseAcceptAmount+
value.caseFeedbackAmountRatio+
value.caseAcceptAmountOntime+
value.caseFeedbackAmountOntime+
value.caseAcceptAmountDelayed+
value.commentSponsorSynergismPoliceAmount+
value.commentDistributeOrgAmount+
value.commentAcceptBusinessSynergismOrgAmount;
return allNum;
}

}
}
10 这个重置 vue 中 data 的数据，不用一个个地重新写一遍, 重置 data 中的某个对象，在后面点一点就可以了
Object.assign(this.$data, this.$options.data())/* 重置 vue 中的 data*/
11 最好的验证身份证方法
export const testCode=(idCard)=>{/* 加权因子验证身份证 */
let regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
// 如果通过该验证，说明身份证格式正确，但准确性还需计算
if(regIdCard.test(idCard)){
if(idCard.length==18){
var idCardWi=new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); // 将前 17 位加权因子保存在数组里
var idCardY=new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以 11 后，可能产生的 11 位余数、验证码，也保存成数组
var idCardWiSum=0; // 用来保存前 17 位各自乖以加权因子后的总和
for(var i=0;i<17;i++){
idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
}
var idCardMod=idCardWiSum%11;// 计算出校验码所在数组的位置
var idCardLast=idCard.substring(17);// 得到最后一位身份证号码
// 如果等于 2，则说明校验码是 10，身份证号码最后一位应该是 X
if(idCardMod==2){
if(idCardLast==”X”||idCardLast==”x”){
return true;
}else{
return false;
}
}else{
// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
if(idCardLast==idCardY[idCardMod]){
return true;
}else{
return false;
}
}
}
}else{
return false;

}
}
12 axios 中，开发环境就用测试的 ip，生产环境就用上线的 ip
const baseURL = process.env.NODE_ENV === ‘development’ ? ‘http://g.com’ : ”;
13 axios 转化成为 formdata
return axios({
method : ‘post’,
url : developUrl+developDK+’synergetic/get/taskInfo?access_token=’+TOKEN,
headers : {
‘Content-Type’: ‘application/x-www-form-urlencoded’
},
data:params,
transformRequest: [function (data) {/* 转成 fromdata*/
let ret = ”
for (let it in data) {
ret += encodeURIComponent(it) + ‘=’ + encodeURIComponent(data[it]) + ‘&’
}
return ret
}],
})

===============================================14 新手一般会采用全局安装 vue 脚手架的方式，以达到直接在命令行中用 vue init 创建 vue 脚手架。那么有没有本地安装 vue-cli，但是依然可以初始化项目呢？当然可以。
进入 node_modules/.bin/
目录中，我们看到有以 vue 命名的文件，这其实是一个软连接，指向 vue-cli，接下来创建初始化脚手架：
node_modules/.bin/vue init
因为我们是在 node_modules 中，所以初始化时，把目录补全，系统就不会使用 vue 的环境变量。那么这就到了用本地的脚手架搭建环境，避免影响系统环境的配置。剩下的就和全局安装脚手架没什么区别了，祝你好运。

本文来自行者向阳的 CSDN 博客，全文地址请点击：https://blog.csdn.net/y491887…

15 关于 css 引入的背景，在打包之后不显示的问题，其实就是路径的问题
=====================================================================================
重置 vue 中 data 数据，常配合与 watch 使用
Object.assign(this.$data, this.$options.data())/* 重置 data 数据 */
===========================================================================
<el-carousel indicator-position=”outside”>
<el-carousel-item v-for=”item in 4″ :key=”item”>
<h3>{{item}}</h3>
</el-carousel-item>
</el-carousel>
16 还能这样子的？？？我擦，直接循环 4 次，之前一直没有发现这个方法啊，牛逼呀
=========================================================================
watch:{
treeSeach:{/* 深度检测这个对象的变化 */
handler(newVal, oldVal){
this.yewuType=this.treeSeach.business_type;
this.infoType=this.treeSeach.info_type;
this.resocureRadio = this.treeSeach.segment;
},
deep:true
}
}
=============================================
17 watch 属性检测对象或者数组的时候，要深度检测
watch:{
option:{/* 深度检测这个对象的变化 */
handler(newVal, oldVal){
// alert(“dwa”);
this.$nextTick(() => {
var dataSourcePie = echarts.init(document.getElementById(this.idName));
dataSourcePie.setOption(newVal);
window.addEventListener(‘resize’, function () {
dataSourcePie.resize();
});
});
},
deep:true
}
}

=====================================================================================
18 props 传参数时，应该以工厂函数的形式去传
hasDataYwInfoDesc:{
type:Object,
default: function () {
return {}
}
},
=====================================================19 让 element-ui 的 dialog 每次显示的时候做一次初始化
<el-dialog
title=” 提示 ”
:visible.sync=”dialogVisible”
在 dialog 上面添加 v -if=’dialogVisible’
<el-dialog
title=” 提示 ”
:visible.sync=”dialogVisible”
v-if=’dialogVisible’
===============================================
20 关于 vue 中对象的赋值，以及 emit 时的传值当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟 null, 对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下实际在 vue 中 this.A = this.B, 没有进行深层赋值，只是把 this.A 的地址指向了与 this.B 相同的地址，所有对于 A 的修改会影响到 B。
解决相互影响的思路是在 this.A 必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响。
解决方式:
this.A=JSON.parse(JSON.stringify(this.B));
将对象转成字符串剔除对象属性后, 再转换成对象赋值，这样能解决指向相同地址修改会相互影响的问题。
同理，emit 传一个对象到父组件时，父组件对这个对象做出修改也会影响到子组件，因为要先对象转成 json 字符串，再由 json 字符串转成对象
21 vue 单页面应用打开新的页面，类似于以前在新的页面打开链接
const {href} = this.$router.resolve({
name: ‘foo’,
query: {
bar
}
})
window.open(href, ‘_blank’)

或者
这样写就好了
<router-link target=”_blank”></router-link>

或者
let routeData = this.$router.resolve({path: val});
window.open(routeData.href, ‘_blank’);
22 <!– 关于 vue 的跨域访问 –>https://blog.csdn.net/it_cgq/…，这篇文章写得真的好
有几种方法能够解决跨域的问题。1、后台允许跨域 2、自己设置代理跨域，设置代理就比较麻烦了，因为要改 config 的东西，当打包出来后，还有东西需要改，不仅要改 config 的，还要改那个 vue-cli 的 package.json 因为默认是没有设置 –open 的，所以要设置 open
“scripts”: {
“dev”: “webpack-dev-server –open –inline –progress –config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“unit”: “jest –config test/unit/jest.conf.js –coverage”,
“e2e”: “node test/e2e/runner.js”,
“test”: “npm run unit && npm run e2e”,
“lint”: “eslint –ext .js,.vue src test/unit/specs test/e2e/specs”,
“build”: “node build/build.js”
},

23
由于 vue 的虚拟 dom 设置，所以一开始去进行 dom 操作是没反应的
mounted(){
this.$nextTick(()=>{/* 行的 DOM 操作一定要放在方法里 */
console.log(‘dwadw’);
this.watermarka();
})
},

正文完