vue教程

大得369

已于 2023-04-10 06:54:34 修改

阅读量751

点赞数

文章标签： vue.js javascript 前端

于 2022-12-04 13:59:56 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/128171972

版权

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: ‘/’,

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

使用

图片上传

上传

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;