Vue.js

Vue 只关注视图层， 采用自底向上增量开发的设计。

MVVM 模式，顾名思义即 Model-View-ViewModel 模式

1. 第一个Vue程序{{ }}

    <div id="app">
        {{message}}
    </div>
    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app", // 元素绑定谁
            data: {
                message: "Hello Vue!"
            }

        })
    </script>

2. Vue基本语法

2.1 v-bind

    <div id="app">
        <span v-bind:title="message">鼠标悬停可以显示内容</span>
    </div>
    
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app", // 元素绑定谁
            data: {
                message: "Hello Vue!"
            }

        })
    </script>

2.2 v-if, v-else

    <div id="app">
        <h1 v-if="ok">
            Yes
        </h1>

        <h1 v-else>
            No
        </h1>

    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app", // 元素绑定谁
            data: {
                ok: true
            }
        })
    </script>

2.3 v-for

    <div id="app">
        <ul>
            <li v-for="item in items">
                {{item.message}}
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                items: [
                    {message: '狂神说java'},
                    {message: '狂神说前端'},
                    {message: '狂神说vue'}
                ]
            }
        })
    </script>

3. Vue 绑定事件

3.1 methods、v-on

<div id="app">
        <button v-on:click="sayHi">点这里</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: '狂神说java'
            },
            methods: {
                sayHi: function(){
                    alert(this.message)
                }
            }

        })
    </script>

4. Vue 双向绑定

4.1 v-model

<div id="app">

        输入的文本：
        
        <input type="text" v-model="message" /> 
     
        {{ message }}


    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: '狂神说java'
            }
        })
    </script>

    <div id="app">
        <input type="radio" name="sex" value="男" v-model="checked"/>
        <input type="radio" name="sex" value="女" v-model="checked" />

        <p>选中了谁: {{checked}}</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                checked : ''
            }
        })
    </script>

<div id="app">

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

        {{selected}}

    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                selected : ''
            }
        })
    </script>

5. Vue 组件

5.1 Component

<div id="app">
        <qinjiang v-for="item in items" v-bind:args="item"></qinjiang>
    </div>
    <script src="../vue.js"></script>
    <script>

        //定义一个Vue组件Component
        Vue.component("qinjiang", {
            props: ['args'],
            template: '<li>{{args}}</li>'
        })
        var vm = new Vue({
            el: "#app",
            data: {
                items: ["java","c++","linux"]
            }
        })
    </script>

6. Axios 异步通信

6.1 生命周期，mounted

{
    "name":"name",
    "url": "https://akfang.cn",
    "isHero": true,
    "address": {
        "a": "a",
        "b":"b",
        "c":"c"
    },
    "lists": [
        "a","b","c"
    ]
}

    <div id="app">
           {{info.name}}
    </div>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data(){
                return {
                    info: {}
                }
            },
            mounted () {
                axios.get('../demo.json').then(({data}) => {
                    this.info = data
                }).catch((err) => {
                    console.log(err)
                });
            }
        })
    </script>

TIP: 解决闪烁问题

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    
    ...
    <div id="app" v-cloak>
    ...
    </div>

7. 计算属性 computed

**和methods的区别：**计算出来的结果保存到属性中，相当于缓存

可以重名，但是methods方法的优先级要高

<div id="app" v-cloak>
           currnetTime1: {{ currnetTime1()}} <br />
           currnetTime2: {{ currnetTime2}}
    </div>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data:{
                message: "hello, kuangshen",
            }, methods: {
                    currnetTime1: function(){
                        return Date.now() // 返回当前时间（一个时间戳）
                    }
                },
                computed: {
                    currnetTime2: function(){
                        this.message
                        return Date.now() // 返回当前时间（一个时间戳）
                    }
                }

        })
    </script>

8. 插槽 slot

    <div id="app" v-cloak>
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
        </todo>
    </div>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>


        Vue.component("todo",{
            template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                </div>'
        })


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

        Vue.component("todo-items",{
            props: ['item'],
            template: '<li>{{item}}</li>'
        })
        var vm = new Vue({
            el: "#app",
            data:{
                title: '请老师',
                todoItems: ['java','python','web']
            }

        })
    </script>

9. 自定义方法

很诡异，emmm 只能说很诡异

    <div id="app" v-cloak>


        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" @remove="removeItems()" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items>
        </todo>


    </div>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>


        Vue.component("todo",{
            template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                </div>'
        })


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

        Vue.component("todo-items",{
            props: ['item','index'],
            template: '<li>{{item}}<button @click="remove">删除</button></li>',
            methods: {
                remove: function (index) { 
                    this.$emit('remove',index)
                 }
            }
        })
        var vm = new Vue({
            el: "#app",
            data:{
                title: '请老师',
                todoItems: ['java','python','web'],
                removeItems: function(index){
                    this.todoItems.splice(index,1)
                }
            }

        })
    </script>