开始Vue征程，路漫漫其修远兮，吾将上下而求索-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

1.Vue.js

是一套构建用户界面的渐进式框架、采用自底向上增量开发的设计、核心库只关注视图层。

2.声明式渲染

Vue.js的核心：一个采用简洁的模板语法来声明式的将数据渲染进DOM的系统

(1)文本插值

所有的元素都是响应式的：可以在浏览器开发者模式下面Console中修改app.message,页面会相应改变

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello YJ'
            }
        })

    </script>
</body>
</html>

(2)绑定DOM元素

v-bind属性为指令：将这个元素节点的title属性和Vue实例的message属性保持一致

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息
        </span>
    </div>


    <script>
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: '页面加载于' + new Date().toLocaleString()
            }
        })

    </script>
</body>
</html>

3.条件循环

(1)v-if:可以绑定DOM结构到数据

Vue提供了一个强大的过渡效果系统，可以在Vue插入、更新、删除元素时自动应用过渡效果

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app3">
       <p v-if="seen">你看到我了</p>
    </div>


    <script>
        var app3 = new Vue({
            el: '#app3',
            data: {
                seen: true
            }
        })

    </script>
</body>
</html>

(2)v-for:可以绑定数组的数据来渲染一个项目列表

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>


    <script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                todos: [
                    {text: 'Hello'},
                    {text: 'World'},
                    {text: 'Go'}
                ]
            }
        })

    </script>
</body>
</html>

4.处理用户输入

(1)v-on:绑定一个事件监听器，通过它调用在Vue实例中定义的方法

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app5">
       <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>


    <script>
        var app5 = new Vue({
            el: '#app5',
            data: {
                message: 'Hello'
            },
            methods: {
                reverseMessage: function () {
                    // 更新了应用的状态，单没有触碰DOM，所有的DOM操作都由Vue来处理，不再需要关注底层逻辑
                    this.message = this.message.split('').reverse().join('')
                }
            }

        })

    </script>
</body>
</html>

(2)v-model:能轻松实现表单输入和应用状态之间的双向绑定

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app6">
       <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>


    <script>
        var app6 = new Vue({
            el: '#app6',
            data: {
                message: 'Hello'
            }
        })

    </script>
</body>
</html>

5.组件化应用构建

组件系统：是一种抽象，允许使用小型、独立和通常可复用的组件构建大型应用

(1)在Vue中，一个组件本质上是一个拥有预定义选项的一个Vue实例

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

    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="app7">
        <ol>
            <!--创建一个todo-item组件的实例-->
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
                <!--item现在就是{ id: 0, text: 'hello'}-->
                <!--todo是todo-item组件的一个属性，将这个属性和item关联起来-->
                <!--key目前不清楚-->

            </todo-item>
        </ol>
    </div>


    <script>
        // 定义名为todo-item的新组件
        Vue.component('todo-item', {
            props: ['todo'],    // 类似于一个自定义属性，名字叫todo
            template: '<li>{{ todo.text }}</li>'
        });

        var app7 = new Vue({
            el: '#app7',
            data: {
                groceryList: [
                    { id: 0, text: 'hello'},
                    { id: 1, text: 'world'},
                    { id: 2, text: 'yj'}
                ]
            }
        })

    </script>
</body>
</html>