[vue]2-vue初了解

数据绑定

上一节提到了数据绑定，也提到了数据变页面也变

<div id="app">{{name}}</div>
let app = new Vue({
    el: 'app',
    data: {
    name: 'vue'
}
})

当我们运行这段代码的时候页面中会显示vue，当我们按F12打开控制台，输入app.name = ‘hello vue’

可以看到，我在控制台输入了app.name = “hello vue”

我们在修改我们的data里面的数据的时候，我们的页面渲染也跟着改变了。

这个就是数据绑定，通过数据绑定，实现数据改变，页面也跟着改变， data -> view

当然这个也被称为vue数据的响应式

• 数据变，页面自动变，不需要开发者操作dom

• 将开发者的经历从dom的操作转移到数据的操作

mustache语法 —> {{ }}

vue的mustache支持的数据类型包括

​ boolean

​ 数组

​ 对象

​ 字符串

​ 数字

以上五种数据类型在mustache语法中可以正常显示

但是null、undefined只能绑定，但是不能显示。

    <div id="app">
        boolean: {{true}}
        <br />
        array: {{[2, 3, 4]}}
        <br />
        string: {{'hello, vue'}}
        <br />
        number: {{3,1415926}}
        <br />
        obj1: {{{name:'vue'}.name}}
        <br />
        obj2: {{obj.name}}
        <br />
        null: {{null}}
        <br />
        undefined: {{undefined}}
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                obj:{
                    name: 'vue'
                }
            }
        })
    </script>

注意：传入的对象只能是一个对象的值，不能是一个键值对。

既然null和undefined不能显示在页面中那么他们有什么用？

​ 通常可以用null和undefined做逻辑运算，例如后端返回的数据可能是null，也可能某个对象没有某个属性，那么访问的结果就是undefined，这个时候我们就可以通过结果来判断显示什么内容了。

{{null ? '真的':'假的'}}    //null和undefined可以通过三元表达式，来显示，虽然它一定会是假的。
{{undefined ? '真的':'假的'}}

vue的列表显示，了解vue中的循环

现在，我们来展示一个更加复杂的数据：数据列表。

比如我们现在从服务器请求过来一个列表 希望展示到HTML中。

HTML代码中，使用v-for指令

指令在后面还会有笔记，这里只是认识一下。

    <div id="app">
        <ul>
            <!-- 通过v-for的形式来进行循环  plays是需要循环的数组，item是每一个值，item是变量，所以它一定要写在muastache语法里面 -->
            <li v-for="item in plays">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                plays:['英雄联盟', '魔兽世界', '穿越火线', '地下城与勇士']
            }
        })
    </script>

页面显示

我们之前说过data数据和view视图是响应式的，那么我们改变一下数据视图依然会改变。

是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了

案例：计数器

现在，我们来实现一个小的计数器

• 点击 + 计数器+1

• 点击 - 计数器 -1

这里，我们又要使用新的指令和属性了

• 新的属性：methods，该属性用于在Vue对象中定义方法。

• 新的指令：v-on:click, 该指令用于监听某个元素的点击事件,并且执行事件处理函数)

你可能会疑惑？这些v-on:click是什么东西？

Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？

这些疑惑在后续笔记中都会一一解开。

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter--;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--下面是语法糖写法-->    <div id="app">
        <!-- 如果数据发生改变，页面也跟随改变 -->
        当前计数：{{number}}
        <br />
        <!-- v-on:click  和原生的onclick或者click的效果一样，都是点击事件，后面跟一个事件处理函数，这个事件处理函数是一个方法，放在methods里定义。 -->
        <button v-on:click="increment">+</button>

        <!-- 语法糖写法，后期用这个写的比较多 -->
        <!-- <button @click="increment">+</button> -->

        <button v-on:click="decrement">-</button>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            
            data: {
                number: 0
            },
            
            // methods翻译为中文就是方法的意思，vue的方法都是放到这个对象里面。
            methods: {
                increment() {
                    // 数据变
                    this.number++
                },
                decrement() {
                    this.number--
                }
            }
        })
    </script>
    <!--<button @click="sub">-</button>-->
</div>

另外关于案例中的语法糖，官方说了

​ 它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

​ 所以我们可以放心的使用，因为它写起来更方便，所以我们以后用@会更多，但是我们不要忘记，@是v-on:的语法糖

上面是一个简单的计数器案例，虽然简单，但是体现出了vue框架的一小部分规则

• 1、el 表示挂载到哪一个dom
• 2、data用来存储数据
• 3、methods是一个对象，里面放着关于业务逻辑的一些方法。
• 4、数据发生改变，相应的视图也会发生改变
• 5、点击事件实际上使用的是vue的v-on指令

这里总结的是一小部分，随着学习的深入，会发现vue有更多的规则，虽然规则多，但是相应的带给我们的便利也会更多。

MVVM

什么是MVVM（Model-View-ViewModel）呢？

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)

https://zh.wikipedia.org/wiki/MVVM

维基百科的官方解释，我们这里不再赘述。

我们直接来看Vue的MVVM

View层：

• 视图层

• 在我们前端开发中，通常就是DOM层。

• 主要的作用是给用户展示各种信息。

Model层：

• 数据层

• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

• 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层：

• 视图模型层视图模型层是View和Model沟通的桥梁。

• 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中

• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

计数器的MVVM

计数器的MVVM

• 我们的计数器中就有严格的MVVM思想

• View依然是我们的DOM

• Model就是我们我们抽离出来的obj

• ViewModel就是我们创建的Vue对象实例

它们之间如何工作呢？

• 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。

• 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

• 有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。

创建Vue实例传入的options

你会发现，我们在创建Vue实例的时候，传入了一个对象options。

这个options中可以包含哪些选项呢？

详细解析： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

目前学过了这些：

el:

类型：string | HTMLElement

作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）

作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。