vue
window本地保存Local Storage
保存:window.localStorage.setItem('名','值');
window.localStorage.setItem('token',backdata.data[2]);
查询:window.localStorage.getItem('名');
window.localStorage.getItem('token');
删除:window.localStorage.clear('名');
window.localStorage.clear('token');
删除所有:window.localStorage.clear();
删除指定:window.localStorage.removeItem('mid');
保存数组,取出数组
var dade = ['周一','周二','周三','周四','周五'];
存:window.localStorage.setItem('123',JSON.stringify(dade));
取:JSON.parse(window.localStorage.getItem('123'));
vue路由报错,虽然不影响,index.js加上
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
更新视图数据
this.$set(this,'shangp',0);
this是更新的位置,data的数据就是this
shangp是更新的名称,data里的shangp,
0表示数据改为0
下拉框不更新问题,改变以后,在写一条强制更新
this.$forceUpdate();
vue监听路由变化
//写在循环菜单列表界面就可以
watch:{
$route(to,from){
console.log(to.path);
}
},
下载
var url = this.urlimg+"/excel/"+e+'.xlsx';
let a = document.createElement('a');
a.href = url;
a.click();
vue打包
打包命令:npm run build
vue打包出现白屏es6语法转es5
Vue在IE、低版本Android显示空白问题
这是由于IE对promise的支持不好,我们需要安装:babel-polyfill和es6-promise:
npm install babel-polyfill
npm install es6-promise
然后在main.js文件中引用:
import ‘babel-polyfill’
import Vue from ‘vue’
import Es6Promise from ‘es6-promise’
Es6Promise.polyfill()
最后 build/webpack.base.conf.js 文件中app配置修改如下:
module.exports = {
entry: {
app: [“babel-polyfill”, “./src/main.js”]
} };
vue标签
事件
加载界面前加载(节点没出来)
created() {},
加载界面前加载(节点出来)
mounted(){},
被动触发事件
methods: {},
计算属性
computed:{},
侦听器
watch:{}
过滤器
filters:{}
v-text / v-html 文本
<body>
<div id="div" {{class}}>
<p v-text="seen"></p>
<p v-html="str_html"></p>
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
seen:'<h1>Vue</h1>',
str_html:'<h1>Vue</h1>',
class:'dd',
}
})
</script>
v-bind 属性绑定
动态绑定图片的路径
<img id=“app” v-bind:src="src" />
<script>
var vm = new Vue({
el: '#app',
data: {
src: '1.jpg'
}
});
</script>
绑定a标签上的id
<a id="app" v-bind:href="'del.php?id=' + id">删除</a>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 11
}
});
</script>
绑定class
对象语法和数组语法
-
对象语法
如果isActive为true,则返回的结果为
<div id="app" class="active"></div>
<div id="app" v-bind:class="{active: isActive}"> hei </div> <script> var vm = new Vue({ el: '#app', data: { isActive: true } }); </script>
-
数组语法
渲染的结果:
<div id="app" class="active text-danger"></div>
<div id="app" v-bind:class="[activeClass, dangerClass]"> hei </div> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } }); </script>
绑定style
对象语法和数组语法
-
对象语法
渲染的结果:
<div id="app" style="color: red; font-size: 40px;">hei</div>
<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}"> hei </div> <script> var vm = new Vue({ el: '#app', data: { redColor: 'red', font: 40 } }); </script>
-
数组语法
渲染结果:
<div id="app" style="color: red; font-size: 18px;">abc</div>
<div id="app" v-bind:style="[color, fontSize]">abc</div> <script> var vm = new Vue({ el: '#app', data: { color: { color: 'red' }, fontSize: { 'font-size': '18px' } } }); </script>
v-model 双向数据绑定
单向数据绑定
<div id="div">
<input type="text" :value="input_val">
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
双向数据绑定
<div id="div">
<input type="text" v-model="input_val" >
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
多行文本 / 文本域
<div id="div">
<textarea v-model="inp_val"></textarea>
<div>{{ inp_val }}</div>
</div>
<script>
var app = new Vue({
el: '#div',
data: {
inp_val: ''
}
})
</script>
绑定复选框
<div id="div">
吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆:<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
</div>
<script>
var vm = new Vue({
el: '#div',
data: {
checklist: ''
// checklist: []
}
});
</script>
绑定单选框
<div id="app">
男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
<br>
{{sex}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
sex: ''
}
});
</script>
修饰符
.lazy
- 取代 input
监听 change
事件
.number
- 输入字符串转为有效的数字
.trim
- 输入首尾空格过滤
<div id="div">
<input type="text" v-model.lazy="input_val">
{{input_val}}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
input_val: 'hello world '
}
})
</script>
v-on 绑定事件监听
click点击事件
<div id="app">
<!-- 使用事件绑定的简写形式 -->
<input type="button" value="按钮" @click="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
</script>
向事件处理器中传参
<div id="app">
<!-- 直接调用传参即可 -->
<input type="button" value="按钮" @click="cli(1,3)">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
// 接受参数
cli: function (a,b) {
alert(a+b);
}
}
});
</script>
而此时,如果在处理器中需要使用事件对象,则无法获取,我们可以用特殊变量 $event
把它传入方法
<input type="button" value="按钮" @click="cli(1,3,$event)">
methods: {
// 接受参数
cli: function (a,b,ev) {
alert(a+b);
console.log(ev);
}
}
事件修饰符a标签阻止浏览器的跳转
原生 JS 代码,想要阻止浏览器的默认行为(a标签跳转、submit提交),我们要使用事件对象的 preventDefault()
方法
<div id="app">
<a href="http://www.qq.com" @click.prevent="cli">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function () {
alert('123');
}
}
});
</script>
使用修饰符绑定一次性事件
<div id="app">
<a href="http://www.qq.com" @click.once="cli($event)">腾百万</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
// 将事件处理程序写入methods对象
methods: {
cli: function (ev) {
ev.preventDefault();
alert('123');
}
}
});
</script>
按键修饰符(键盘)
绑定键盘抬起事件,但是只有enter
键能触发此事件
<div id="app">
<input type="text" @keyup.enter="keyup">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
keyup:()=>{
console.log('111')
}
}
});
</script>
系统修饰符按住 shift
后才能触发点击事件
按住 shift
后才能触发点击事件
<div id="app">
<input type="button" value="按钮" @click.shift="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>
鼠标修饰符
鼠标中键触发事件
<div id="app">
<input type="button" value="按钮" @click.middle="cli">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
cli:()=>{
console.log('111')
}
}
});
</script>
v-show 显示隐藏
根据表达式之真假值,切换元素的 display
CSS 属性。
<div id="app">
<p v-show="is_show">Vue</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{},
})
</script>
点击按钮切换隐藏显示
<div id="app">
<input type="button" value="按钮" @click="isshow">
<p v-show="is_show">Vue</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{
isshow:function(){
this.is_show = !this.is_show;
}
},
})
</script>
v-if / v-else / v-else-if 条件判断
https://cn.vuejs.org/v2/api/#v-if
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'F'
},
})
</script>
v-for 循环
https://cn.vuejs.org/v2/api/#v-for
<div id="app">
<ul>
<li v-for="(val,key) in arr">{{val}}---{{key}}</li>
</ul>
<ul>
<li v-for="(val,key) in obj">{{val}}---{{key}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ['a', 'b', 'c'],
obj: { id: 1, name: '李四' }
},
})
</script>
js里遍历
this.data.forEach(item => {
console.log(item)
});
var a = [1,2,3];
a.forEach(function(value,key,arr){
console.log(value) // 结果依次为1,2,3
console.log(key) // 结尾依次为0,1,2
console.log(arr) // 三次结果都为[1,2,3],该参数貌似没什么用
})
v-cloak没加载好的时候隐藏
当我们的网络受阻时,或者页面加载完毕而没有初始化得到 vue 实例时,DOM中的 {{}}
则会展示出来;
为了防止现象,我们可以使用 CSS 配合 v-cloak 实现获取 VUE 实例前的隐藏;
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<p v-cloak>{{obj.id}}</p>
</div>
<script src="./vue.js"></script>
<script>
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
obj: { id: 1, name: '李四' }
},
})
}, 2000);
</script>
v-once只渲染元素和组件一次
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'kkk'
},
})
</script>
计算属性与侦听器
计算属性
注意,每次在模板中使用 {{ fullname() }}
fullname方法就会被调用执行一次;所以,对于任何复杂逻辑,你都应当使用计算属性 ,因为计算属性,会自动缓存数据:
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
<br>
{{fulln}}
<!-- 一百次调用 -->
{{fulln}}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing:'',
ming:'',
},
computed:{
fulln(){
return this.xing+this.ming+Date.now();
}
}
})
</script>
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值;多次调用,计算属性会立即返回之前的计算结果,而不必再次执行函数。
侦听器
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
</div>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化,侦听器就会被执行,且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
this.fullname = newVal+this.ming;
},
ming:function(newVal,oldVal){
this.fullname = this.xing+newVal;
}
}
})
</script>
通过上面的案例,我们基本掌握了侦听器的使用,但是我们也发现,与计算属性相比,侦听器并没有优势;也不见得好用,直观上反而比计算属性的使用更繁琐;
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<div id="div">
<input type="text" v-model="xing">
<input type="text" v-model="ming">
{{ fullname }}
</div>
<script src="./jq.js"></script>
<script>
var app = new Vue({
el: '#div',
data: {
xing: '',
ming: '',
fullname:''
},
// 设置侦听器
watch: {
// 侦听器中的方法名和要真挺的数据属性名必须一致
// xing 发生变化,侦听器就会被执行,且将变化后的值和变化前的值传入
xing:function(newVal,old_val){
// this.fullname = newVal+this.ming;
var t = this;
// 在侦听器中执行异步网络请求
$.get('./xx.php',(d)=>{
t.fullname = d;
})
},
}
})
</script>
过滤器
过滤敏感词汇
<div id="app">
<input type="text" v-model="msg"> <br>
{{msg|myFilters|get3}}
</div>
<script>
var app = new Vue({
el: '#app',
data:{
msg:''
},
//定义过滤器
filters:{
// 过滤器的名称及方法
myFilters:function(val){
return val.toLowerCase();
},
get3:function(val){
// 遇到数字替换为 0
// var reg = /\d/g;
// return val.replace(reg,0);
return val.replace('苍井空','***');
}
}
})
</script>
全局过滤器
上面的代码中,myFilters
及 get3
两个过滤器,仅在当前 vue 实例中可用;如果在代码 再次 var app2 = new Vue()
得到变量为 app2
的 vue 实例,则两个过滤器在 app2中都不可用;如果需要过滤器在所有实例对象中可用,我们需要声明 全局过滤器
Vue.filter(名称,处理器)
<div id="app">
<input type="text" v-model="msg"> <br>
{{msg|myFilters}}
</div>
<!-- 定义两个DOM节点 -->
<div id="app2">
<input type="text" v-model="msg"> <br>
{{msg|myFilters|get3}}
</div>
<script>
Vue.filter('myFilters', function (val) {
return val.toLowerCase();
})
// 定义两个全局过滤器
Vue.filter('get3', function (val) {
return val.replace('苍井空','***');
})
// 两个Vue 实例
var app = new Vue({
el: '#app',
data: {
msg: ''
}
})
var app2 = new Vue({
el: '#app2',
data: {
msg: ''
}
})
</script>
项目安装Element
安装vue编程框架:npm install -g @vue/cli @vue/cli-init
创建一个项目:vue init webpack myapp
vue init webpack my-project 安装项目
- Project name:项目名
- Project description: 项目描述
- Author: 作者
- Vue build:
- 第一种:配合大部分的开发人员
- 第二种:仅仅中有runtime
- Install vue-router? 是否安装vue-router
- Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
- Pick an ESLint preser:使用哪种语法规范来检查我们的代码:
- Standard: 标准规范
- Airbnb: 爱彼迎规范
- Set up unit test: 设置单元测试
- Setup e2e tests: 设置端对端测试
- Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包
- 使用npm来下载
- 使用yarn来下载
运行:npm run dev
npm i element-ui -S
安装网络请求axios
安装:npm install axios(或者直接下载https://github.com/axios/axios)
<script src="./axios.js"></script>
<script>
// 获取全部数据
axios.get('http://localhost:3000/list_data')
.then((data)=>{
console.log(data);
});
// 获取一条数据
axios.get('http://localhost:3000/list_data/2')
.then((data)=>{
console.log(data);
})
// 添加一条数据
axios.post('http://localhost:3000/list_data',{stat:false,title:'喝水'})
.then((d)=>{
console.log(d);
}).catch(error => console.log(error))
// 删除一条数据
axios.delete('http://localhost:3000/list_data/4')
.then((d)=>{
console.log(d);
}).catch(error => console.log(error))
// 修改一条数据
axios.put('http://localhost:3000/list_data/6',{title:'hhhhhh'})
.then((d)=>{
console.log(d);
}).catch(error => console.log(error))
</script>
vue编程代码
this.$myHttp.post(‘http://www.lda.com/api/v1/admin/login’,this.ruleForm,{
‘Content-Type’: ‘application/x-www-form-urlencoded’
}).then(backdata=>{ // 异步执行成功后
if(backdata.data.mid == ‘0’){
this.$message.error(backdata.data.return);
}
if(backdata.data.mid == ‘1’){
window.localStorage.setItem(‘token’,backdata.data.username);
this.$router.push({name:‘home’});
}
});
路由
https://router.vuejs.org/zh/guide/#html看文档
import Router from ‘vue-router’
import Home from ‘@/components/Home’
import Homes from ‘@/components/Homes’
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: Home,
children:[
path: ‘/homes’,
name: 'homes',
component: Homes,
] //子路由
])
路由另外一种写法
使用一个匿名函数, 返回导入的对象
routes: [
route("/login",'/Login',"Login"),// /login路径,路由到登录组件
{
path:"/", // 根路径,路由到 Layout组件
component: () => import('../pages/Layout'),
redirect:"/index/dashboard",
children:[ // 其它所有组件都是 Layout的子组件
route("/index/dashboard","/Dashboard","Dashboard"),
route("/item/category",'/item/Category',"Category"),
route("/item/brand",'/item/Brand',"Brand"),
route("/item/list",'/item/Goods',"Goods"),
route("/item/specification",'/item/Specification',"Specification"),
]
}
]
使用ES6的语法, 进一步简化为:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlQXXUgG-1670133556426)(.\image-20200804103558391.png)]
Vuetify
安装
npm install -g @vue/cli @vue/cli-init`
vue init webpack myapp
vue init webpack my-project 安装项目
-
Project name:项目名
-
Project description: 项目描述
-
Author: 作者
-
Vue build:
- 第一种:配合大部分的开发人员
- 第二种:仅仅中有runtime
-
Install vue-router? 是否安装vue-router
-
Use ESLint to lint your code?是否使用ESLint来验证我们的语法。
-
Pick an ESLint preser:使用哪种语法规范来检查我们的代码:
- Standard: 标准规范
- Airbnb: 爱彼迎规范
-
Set up unit test: 设置单元测试
-
Setup e2e tests: 设置端对端测试
-
Should we run ‘npm install’:要不要帮忙你下载这个项目需要的第三方包
-
使用npm来下载
-
使用yarn来下载
-
安装vuetify
npm install vuetify --save
安装后看官方文档导入
一、安装
文件plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
二、安装
main.js文件导入css和vuetify
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import vuetify from ‘@/plugins/vuetify’
Vue.config.productionTip = false
new Vue({
el: ‘#app’,
router,
vuetify,
components: { App },
template: ‘’
})
css生效包裹在
//…
路由s6写法
{
path: ‘/admin’,
name: ‘admin’,
component: () => import(’@/components/admin/index’),
}
规划路由
<div id="app">
<div class="top">头部</div>
<div class="container">
<div class="left">
<li><router-link to="/goods">商品管理</router-link></li>
<li><router-link to="/user">用户管理</router-link></li>
</div>
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
-
router-link: 可以理解成
链接
, to属性就是对应的路由 -
router-view: 一个占位符, 会被替换成组件的内容
-
<router-view>
是一个占位符,用对应的组件来替换 -
<router-link>
指定跳转的URL地址
左侧导航
<v-navigation-drawer
:mini-variant=“miniVariant”
:src=“bg”
absolute
dark
>
<v-list
dense
nav
class=“py-0”
>
方冠
零售平台
管理后台
大得
<v-list-group
v-for=“item in items_list”
:key=“item.title”
>
{{ item.icon }}
<v-list-item
v-for=“subItem in item.item”
:key=“subItem.title”
:to=“subItem.path”
link
>
da
{{ subItem.title }}
<v-list-item
v-for=“itemb in items”
:key=“itemb.title”
:to=“itemb.path”
link
>
{{ itemb.icon }}
{{ itemb.title }}
<div class=“kuang1 ydong” v-if=“miniVariant==true”
<v-btn icon @click.stop=“miniVariant = !miniVariant” >
<v-btn icon @click.stop=“miniVariant = !miniVariant” >
富文本
Vue-Quill-Editor
GitHub的主页:https://github.com/surmon-china/vue-quill-editor
Vue-Quill-Editor是一个基于Quill的富文本编辑器:[Quill的官网](
一、安装
安装:npm install vue-quill-editor --save
安装:npm install quill --save
二、局部引入
三、使用
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
显示富文本内容
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
<div class="ql-container ql-snow">
<div class="ql-editor" v-html="content"></div>
</div>
</quill-editor>
js部分
this.content = backdata.data[0][0].richtext;
安装网络请求axios封装
安装:npm install axios(或者直接下载https://github.com/axios/axios)
新建assets/js/http.js封装
import axios from ‘axios’;
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: ‘http://www.lda.com/api/v1/’,
})
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
main.js引入
import myaxios from ‘@/assets/js/http.js’
Vue.use(myaxios);
.vue文件使用
this.$myhttp.post(‘admin/login’,this.ruleForm,{
‘Content-Type’: ‘application/x-www-form-urlencoded’
}).then(backdata=>{ // 异步执行成功后
// this.$router.push({name:‘home’});
// console.log(backdata);
if(backdata.data.mid == ‘0’){
this.$message.error(backdata.data.return);
}
if(backdata.data.mid == ‘1’){
window.localStorage.setItem(‘token’,backdata.data.username);
this.$router.push({name:‘home’});
}
});
属于img图片遍历
要这样写item.img为接口数据
横线
路由跳转带参数
this.$router.push({name:‘useradd’,query: { id: e }});
获得路由url上的参数
console.log(this.$route.query.id);
iview
安装iview
npm install iview --save
配置maun.js
import iView from ‘iview’
import ‘iview/dist/styles/iview.css’
Vue.use(iView)
然后就可以使用了
克隆
1、点击
<i-button type=“dashed” long @click=“handleAdd” icon=“plus-round”>新增
2、数据
formDynamic: {
items: [
{
value: ‘’
}
]
}
3、克隆
handleAdd () {
this.formDynamic.items.push({
value: ‘’
});
},
vue删除data数据
1、点击
<i-button type=“ghost” @click=“handleRemove(index)” class=“heis”>删除
2、数据
formDynamic: {
items: [
{
value: ‘’
},
{
value: ‘’
}
]
}
3、删除
handleRemove (item) {
console.log(item)
this.$delete(this.formDynamic.items,item);
console.log(this.formDynamic.items)
}
单选框
获得axios网络url
this.$myhttp.defaults.baseURL
城市三连动百度网盘php/citydatas.js文件
安装iview
使用
图片上传
<Icon type=“ios-eye-outline” @click=“handleView(item.url)”>
上传
js部分
css部分
判断是不是在微信打开js
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
this.$Message.info('微信打开');
} else {
this.$Message.info('不是微信打开');
}
微信授权跳转
window.location.href = url;
网络请求加参数axios
安装axios
npm install axio
新建http.js
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: 'http://www.dadesa.com:8080',
})
function onGetCall(config) {
return config.method === 'get';
}
axios_obj.interceptors.request.use(function (config) {
var urlsa = config.url;
var t = Date.parse(new Date()) / 1000;//时间戳
if(urlsa.indexOf("?") != -1 ){
config.url = config.url + "&aaa="+t
}else{
config.url = config.url + "?aaa="+t
}
console.log(config.url);
// var t = Date.parse(new Date()) / 1000;//时间戳
// config.headers['Authorization'] = t
return config;
}, null, { runWhen: onGetCall });
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
main.js引入
import myaxios from '@/assets/js/http.js'
Vue.use(myaxios);
跳转
this.$router.push({path:'/testDemo',query:{setid:123456}});
watch: {
'$route' (to, from) { //监听路由是否变化
//加载项目
if(to.path == "/pindex/Allocation"){
this.id = this.$route.query.id;
console.log(this.id);
this.$myhttp.get('admin/examine?id=1'+id,{
'Content-Type': 'application/json'
}).then(backdata=>{ // 异步执行成功后
this.desserts = backdata.data[0];
this.total = backdata.data[1];
this.page = backdata.data[2];
});
}
}
},
监听数组理的数据改变
数组
dades:{id:'',name:'',type:'',}
监听
watch: {
'dades.type'(val){
console.log(val);
}
}
拦载请求发送前后
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
baseURL: 'http://www.dadesa.com:8080',
})
function onGetCall(config) {
return config.method === 'get';
}
//发送请求前拦载
axios_obj.interceptors.request.use(function (config) {
var urlsa = config.url;
var t = Date.parse(new Date()) / 1000;//时间戳
var login = window.localStorage.getItem('login');
if(urlsa.indexOf("?") != -1 ){
config.url = config.url + "&datest="+t+"&login_name="+login
}else{
config.url = config.url + "?datest="+t+"&login_name="+login
}
return config;
}, null, { runWhen: onGetCall });
// //发送请求返回拦载
axios_obj.interceptors.response.use(function (response) {
// 对响应数据做点什么
var data = response.data;
if(data == 206){
alert('没有操作权限');
window.localStorage.clear('login');
location.reload();//刷新
return false;
}
return response;
},
// function (error) {
// // 对响应错误做点什么
// return Promise.reject(error);
// }
);
Vue.prototype.$myhttp = axios_obj;
}
export default myaxios;
懒加载树Element
<el-form-item label="类型" :rules="[{required: true}]" v-if="csa==1">
<el-select v-model="dades.type" placeholder="请选择类型" @change="changesa(dades.type)">
<el-option label="住宅" value="1"></el-option>
<el-option label="车位" value="2"></el-option>
<el-option label="储藏室" value="3"></el-option>
<el-option label="商铺" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="绑定" :rules="[{required: true}]">
<div class="text item">
<el-tree
:props="datas"
:data="dataarr"
lazy
:load="loadNode"
show-checkbox
ref="tree"
node-key="id"
includeHalfChecked="false"
:default-expanded-keys="defaultcheckedkeyssa"
:default-checked-keys="defaultcheckedkeys">
</el-tree>
</div>
</el-form-item>
date部分
datas:{
label: 'label',
children: 'zones',
isLeaf: 'leaf',
value: 'id',
value1:'region',
varue2:'type',
value3:'pindex_id',
},
dataarr:[],
//监听
changesa(e){
this.node_had.childNodes = []; //把存起来的node的子节点清空,不然会界面会出现重复树!
this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
},
//绑定
loadNode(node, resolve) {
setTimeout(() => {
if (node.level === 0) {
this.node_had = node;
this.resolve_had = resolve;
return resolve([{label:this.name,id:this.id,region:0,type:this.dades.type,pindex_id:this.id,superior:'0'}]);
}
if(this.dades.type == ''){
this.$Message.error('请先选择类型,在来加载绑定!');
this.node_had.childNodes = []; //把存起来的node的子节点清空,不然会界面会出现重复树!
this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
return false;
}
//加载
this.$myhttp.post('admin/getbindingArrs',node.data,{
'Content-Type': 'application/json'
}).then(backdata=>{ // 异步执行成功后
return resolve(backdata.data);
});
}, 300);
},
axios的post请求obj数据转formdata
import axios from 'axios';
var myaxios = {};
myaxios.install = function(Vue){
var axios_obj = axios.create({
//支付接口
baseURL: 'http://www.dade.com:9000',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers:{'Content-Type': 'application/x-www-form-urlencoded'}
})
// axios_obj.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$payhttp = axios_obj;
}
export default myaxios;