Vue（就只了解了解）

引入vue.js的cdn

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

第一个vue的demo

<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中数据的变化
- 两个参数，一个返回新值，一个返回旧值，

基本语法

绑定、判断、循环、监听

v-bind	绑定
v-if
v-else
v-else-if
v-for=("xxx in xxx")	类比foreach
v-on	监听事件

双向绑定（v-model）

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

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

<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异步通信

slot插槽

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

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

<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

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

modules/main.js

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

webpack打包

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
};

index页面引用js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</body>
</html>