vue教程

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'));
1
2
3
4
5
6
7
8
9
10
11
12

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

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
1
2
3
4

更新视图数据

this.$set(this,'shangp',0);
this是更新的位置，data的数据就是this
shangp是更新的名称，data里的shangp，
0表示数据改为0

下拉框不更新问题，改变以后，在写一条强制更新
this.$forceUpdate();
1
2
3
4
5
6
7

vue监听路由变化

//写在循环菜单列表界面就可以
watch:{
    $route(to,from){
        console.log(to.path);
    }
},
1
2
3
4
5
6

下载

var url = this.urlimg+"/excel/"+e+'.xlsx';
let a = document.createElement('a');
a.href = url;
a.click();
1
2
3
4

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

    
{class}}>
        

        

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

v-bind 属性绑定

动态绑定图片的路径

1
2
3
4
5
6
7
8
9

绑定a标签上的id

删除

1
2
3
4
5
6
7
8
9

绑定class

对象语法和数组语法

• 对象语法

  如果isActive为true，则返回的结果为

  <div id="app" v-bind:class="{active: isActive}">
      hei
  div>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              isActive: true
          }
      });
  script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 数组语法

  渲染的结果：

  <div id="app" v-bind:class="[activeClass, dangerClass]">
      hei
  div>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              activeClass: 'active',
              dangerClass: 'text-danger'
          }
      });
  script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

绑定style

对象语法和数组语法

• 对象语法

  渲染的结果：

  hei

  <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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 数组语法

  渲染结果：

  abc

  <div id="app" v-bind:style="[color, fontSize]">abcdiv>
  <script>
      var vm = new Vue({
          el: '#app',
          data: {
              color: {
                  color: 'red'
              },
              fontSize: {
                  'font-size': '18px'
              }
          }
      });
  script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

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>
1
2
3
4
5
6
7
8
9
10
11
12

双向数据绑定

<div id="div">
    <input type="text" v-model="input_val" >
div>

<script>
    var app = new Vue({
        el: '#div',
        data: {
            input_val: 'hello world '
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12

多行文本 / 文本域

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

绑定复选框

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

绑定单选框

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修饰符

.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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

向事件处理器中传参

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

而此时，如果在处理器中需要使用事件对象，则无法获取，我们可以用特殊变量 $event 把它传入方法

methods: {
    // 接受参数
    cli: function (a,b,ev) {
        alert(a+b);
        console.log(ev);
    }
}
1
2
3
4
5
6
7

事件修饰符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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用修饰符绑定一次性事件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

按键修饰符（键盘）

绑定键盘抬起事件，但是只有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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

系统修饰符按住 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

鼠标修饰符

鼠标中键触发事件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

v-show 显示隐藏

根据表达式之真假值，切换元素的 display CSS 属性。

<div id="app">
    <p v-show="is_show">Vuep>
div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            is_show:false
        },
        methods:{},
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12

点击按钮切换隐藏显示

<div id="app">
    <input type="button" value="按钮" @click="isshow">
    <p v-show="is_show">Vuep>
div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            is_show:false
        },
        methods:{
            isshow:function(){
                this.is_show = !this.is_show;
            }
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

js里遍历

this.data.forEach(item => {
  console.log(item) 
});
1
2
3

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]，该参数貌似没什么用
})
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

<div id="app">
    <p v-once>{{msg}}p>
div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'kkk'
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11

计算属性与侦听器

计算属性

注意，每次在模板中使用 {{ 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听器

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

通过上面的案例，我们基本掌握了侦听器的使用，但是我们也发现，与计算属性相比，侦听器并没有优势；也不见得好用，直观上反而比计算属性的使用更繁琐；

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

过滤器

过滤敏感词汇

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

全局过滤器

上面的代码中，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>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

项目安装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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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,
1
2
3

​ ] //子路由

])

路由另外一种写法

使用一个匿名函数, 返回导入的对象

 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"),
	 ]
  }
 ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用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
1

安装后看官方文档导入

一、安装

文件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)
1
2
3
4
5
6
7
8

二、安装

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>
1
2
3
4
5
6
7
8
9
10
11
12

• router-link: 可以理解成链接, to属性就是对应的路由

• router-view: 一个占位符, 会被替换成组件的内容

• 是一个占位符，用对应的组件来替换

• 指定跳转的URL地址

左侧导航

​ :mini-variant=“miniVariant”

​ :src=“bg”

​ absolute

​ dark

>

​

​ dense

​ nav

​ class=“py-0”

​ >

​

​

​ 方冠

​

​

​ 零售平台

​

​

​

​

​

​

​

​ 管理后台

​ 大得

​

​

​

​

​ v-for=“item in items_list”

​ :key=“item.title”

​ >

​

​

​ {{ item.icon }}

​

​

​

​

​

​

​ v-for=“subItem in item.item”

​ :key=“subItem.title”

​ :to=“subItem.path”

​ link

​ >

​

​ da

​

​

​

​ {{ subItem.title }}

​

​

​

​

​

​ v-for=“itemb in items”

​ :key=“itemb.title”

​ :to=“itemb.path”

​ link

​ >

​

​ {{ itemb.icon }}

​

​

​ {{ itemb.title }}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

富文本

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

二、局部引入

三、使用

1
2
3
4
5
6
7

显示富文本内容