当前位置：首页 > news >正文

vue教程

news 来源：原创 2024/4/29 8:02:46

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，3console.log(key)      // 结尾依次为0，1，2console.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: ‘/’,

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 },

})

css生效包裹在

//…

路由s6写法

{

path: ‘/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”

<v-list-item

v-for=“subItem in item.item”

:key=“subItem.title”

:to=“subItem.path”

link

<v-list-item

v-for=“itemb in items”

:key=“itemb.title”

:to=“itemb.path”

link

<div class=“kuang1 ydong” v-if=“miniVariant==true”

<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-editorv-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)">
</quill-editor>

显示富文本内容

<quill-editorv-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

使用

图片上传

上传

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'] = treturn 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-checkboxref="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;

vue

window本地保存Local Storage

vue路由报错，虽然不影响，index.js加上

更新视图数据

vue监听路由变化

下载

vue打包

vue打包出现白屏es6语法转es5

vue标签

事件

加载界面前加载（节点没出来）

加载界面前加载（节点出来）

被动触发事件

计算属性

侦听器

过滤器

v-text / v-html 文本

v-bind 属性绑定

动态绑定图片的路径

绑定a标签上的id

绑定class

绑定style

v-model 双向数据绑定

单向数据绑定

双向数据绑定

多行文本 / 文本域

绑定复选框

绑定单选框

修饰符

v-on 绑定事件监听

click点击事件

事件修饰符a标签阻止浏览器的跳转

按键修饰符（键盘）

系统修饰符按住 shift 后才能触发点击事件

鼠标修饰符

v-show 显示隐藏

v-if / v-else / v-else-if 条件判断

v-for 循环

js里遍历

v-cloak没加载好的时候隐藏

v-once只渲染元素和组件一次

计算属性与侦听器

计算属性

侦听器

过滤器

全局过滤器

项目安装Element

安装网络请求axios

路由

路由另外一种写法

Vuetify

安装

一、安装

二、安装

css生效包裹在

路由s6写法

左侧导航

富文本

Vue-Quill-Editor

一、安装

二、局部引入

三、使用

安装网络请求axios封装

新建assets/js/http.js封装

main.js引入

.vue文件使用

属于img图片遍历

横线

路由跳转带参数

获得路由url上的参数

iview

安装iview

配置maun.js

克隆

vue删除data数据

单选框

获得axios网络url

城市三连动百度网盘php/citydatas.js文件

图片上传

判断是不是在微信打开js

系统修饰符按住 `shift` 后才能触发点击事件