Vue 教程

1 介绍

1.1 Vue介绍

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是。
Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层。

1.2 声明式渲染

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

<body>
    <div id="app">
        {{ message }}
    </div>
    
    <script>
        let v = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

1.3 条件与循环

<div id="app-3">
    <!-- v-if：控制一个元素是否显示 -->
    <p v-if="seen">现在你看到我了</p>
  
    <!-- 循环：v-for="(item, index) in items" -->
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
    </div>
    
    <script>
       let app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true
            }
        })
       
       let app4 = new Vue({
           el: '#app-4',
           data: {
               todos: [
                   { text: '学习 JavaScript' },
                   { text: '学习 Vue' },
                   { text: '整个牛项目' }
               ]
           }
       })
    </script>
</div>

1.4 处理用户输入

v-on: 为了让用户和你的应用进行交互，可以用v-on指令添加一个事件监听器。

<body>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    
    <script>
        let app5 = new Vue({
            el: '#app-5',
            data: {
                message: 'Hello Vue.js!'
            },
            methods: {
                reverseMessage: function () {
                    // split('')：划分单个字母
                    // reverse()：反转
                    // join('')：将字母连接，去掉''
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

v-model=""：实现表单输入和应用状态之间的双向绑定。

1.5 `组件化`应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<!-- 例子 -->
<body>
    <ul id="app-7">
        <todo-item 
            v-for="(item, index) in groceryList"
            v-bind:todo="item"></todo-item>
    </ul>

    <!-- JS -->
    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{todo.id}} - {{ todo.text }}</li>'
        })

        let app7 = new Vue({
            el: '#app-7',
            data: {
                groceryList: [
                    {id: 0, text: '蔬菜'},
                    {id: 1, text: '奶酪'},
                    {id: 2, text: '随便其他什么人吃的东西'}
                ]
            }
        })
    </script>
</body>

2 Vue实例

let vm1 = new Vue({
	el: '',
    data: {

    }
})

2.1 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

2.2 实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

Tips: !!!

不要在选项 property 或回调上使用箭头函数，

比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致

Uncaught TypeError: Cannot read property of undefined 或

Uncaught TypeError: this.myMethod is not a function 之类的错误。

Vue入门