Vue（就只了解了解）

引入vue.js的cdn

1
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

第一个vue的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            message: "hello Vue"
        }
    });
</script>

MVVM

Vue采用MVVM框架，即Model（模型层）、View（视图层）、ViewModel（视图模型对象，是连接view与model的桥梁，可类比控制层）。

在上述demo里我们创建了vue这个对象，可以在页面的控制台中使用vue.message = “xxx”进行动态赋值。

Vue七大属性

  • el：元素节点

  • data：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

  • template：设置模板，会替换页面元素，包括占位符

  • methods：定义方法，页面中的业务逻辑，js方法一般都放置在methods中

  • render：创建真正的Virtual Dom

  • computed：计算属性，可类比缓存

  • watch：

    • watch:function(new,old){}
    • 监听data中数据的变化
    • 两个参数，一个返回新值，一个返回旧值，

基本语法

绑定、判断、循环、监听

1
2
3
4
5
6
v-bind	绑定
v-if
v-else
v-else-if
v-for=("xxx in xxx")	类比foreach
v-on	监听事件

双向绑定（v-model）

实时更新表单、单选、下拉框等内容

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
<div id="app">
    输入：<input type="text" v-model="message"> {{message}}

    </br>性别单选：
    <input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女
    <p>
        性别是：{{sex}}
    </p>

    下拉框：
    <select v-model="selected">
        <option value="" disabled>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>{{selected}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: "123"
            , sex: ''
            , selected: ''
        }
    });
</script>

Vue组件（props）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <tang v-for="arr in arrays" v-bind:foreach="arr"></tang>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    Vue.component("tang",{
        props: ["foreach"]
        , template: "<li>{{foreach}}</li>"
    });

    var vue = new Vue({
        el: "#app"
        , data: {
            arrays: ["a","b","c"]
        }
    });
</script>

Vue.component声明了一个叫tang的组件，然后我们就可以使用tang标签。

vue对象有数组数据，在tang标签中继续for循环遍历数组，遍历出来的数据是arr，我们声明一个foreach的绑定变量来引用arr数据，随后在组件component中用props绑定这个foreach变量并应用它。

props就是组件来传递使用的变量。

Axios异步通信

相关cdn

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我们在钩子函数mounted()里应用axios，注意返回的数据格式必须与json的数据格式相对应。当然我们要自定义一个json来测试功能。

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
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>

    <a v-bind:href="info.url">dian ji</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app'
        , data(){
            return{
                info:{
                    name: null
                    , address: {
                        street: null,
                        city: null,
                        country: null
                    }
                    , url: null
                }
            }
        }
        , mounted(){
            axios.get('data.json').then(response=>(this.info = response.data));
        }
    });
</script>

slot插槽

v-bind: 可简写为 : ，通过插槽对组件进行组装以及数据的绑定

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
34
35
36
37
38
<div id="app">
    <list>
        <list-title slot="list-title" :title="title"></list-title>
        <list-arrs slot="list-arrs" v-for="arr in arrs" :thing="arr"></list-arrs>
    </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    Vue.component("list",{
        template:
            '<div>\
                <slot name="list-title"></slot>\
                <ul>\
                    <slot name="list-arrs"></slot>\
                </ul>\
            </div>'
    });

    Vue.component('list-title',{
        props: ['title'],
       	template:'<div>{{title}}</div>'
    });

    Vue.component('list-arrs',{
        props: ['thing'],
       	template:'<li>{{thing}}</li>'
    });

    var vue = new Vue({
        el: "#app",
        data:{
            title: "datalist",
            arrs:['tang1','tanmg2','tang9']
        }

    });
</script>

自定义事件内容分发（this.$emit）

使用 this.$emit 传参，可就是绑定我们的自定义事件。这里 @ 即 v-on:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="app"> 
    <list>
        <list-title slot="list-title" :title="title"></list-title>
        <list-arrs slot="list-arrs" v-for="(arr,index) in arrs"
                   :thing="arr" :index="index" @remove="removeArr(index)" ></list-arrs>
    </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
    Vue.component("list",{
        template:
            '<div>\
                <slot name="list-title"></slot>\
                <ul>\
                    <slot name="list-arrs"></slot>\
                </ul>\
            </div>'
    });

    Vue.component('list-title',{
        props: ['title'],
        template:'<div>{{title}}</div>'
    });

    Vue.component('list-arrs',{
        props: ['thing','index'],
        template:'<li>{{thing}}__{{index}} <button @click="remove">删除</button> </li>',
        methods:{
            remove: function(){
                this.$emit('remove');
            }
        }
    });

    var vue = new Vue({
        el: "#app",
        data:{
            title: "datalist",
            arrs:['tang1','tanmg2','tang9']
        },
        methods:{
            removeArr: function(index){
                console.log("删除"+this.arrs[index]);
                this.arrs.splice(index,1);
            }
        }
    });
</script>

vue-cli（脚手架）

  • 下载node.js，写博客就已经弄过了。。

  • 使用npm，下载cil

    1
    npm install -g @vue/cli

  • 新建项目

    1
    2
    3
    vue create my-project
    # OR
    vue ui

    强烈建议使用ui，虽然我不是专业前端，但这vue ui图形化界面用过绝壁都得说香

  • 启动项目

    命令行进入对应文件目录执行

    1
    2
    3
    4
    # vue3
    npm run serve
    # vue2
    npm run dev

    项目启动后直接哇塞，同一个局域网下可以直接访问网络地址，而且支持热更新，香真nm香，真他妈是真的爽，即改即试，都不用反复更新。

webpack

模块加载器 & 打包工具

1
2
npm install webpack -g
npm install webpack-cli -g

  • modules/hello.js

    1
    2
    3
    4
    //暴露一个方法
    exports.sayHello = function () {
        document.write("<h1>Hello!!</h1>");
    }

    modules/main.js

    1
    2
    var hello = require("./hello");
    hello.sayHello();

  • webpack打包

    1
    2
    3
    4
    5
    6
    module.exports = {
        entry: './modules/main.js',
        output: {
            filename: "./js/bundle.js"
        }
    };

  • index页面引用js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    <script src="dist/js/bundle.js"></script>

    </body>
    </html>

也就是说webpack类似我们java继承其他类，实现接口这样。打包方便第三方引用代码。

vue-router（官方路由管理器）

1
npm install vue-router@4

首先在项目录里安装router，主要是进行页面跳转。

我们事先写好组件，然后引用对应组件进行页面的跳转。

官网：https://next.router.vuejs.org/introduction.html

小博客：https://www.cnblogs.com/davina123/p/13371333.html

ElementUI

官网：https://element.eleme.cn/#/zh-CN

很类似java导包，这里直接引用别人写好的组件即可

小结

Vue3出了，导致前几年的视频很多命令对不上，正统学习时要找一下时效性强的来学习。