Vue2学习日记：1

什么是Vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

介绍 — Vue.js (vuejs.org)

此为Vue的官方网站

学习Vue必须要掌握HTML、CSS、JS等基础知识。

开始：

第一步：导入核心库

<script src="../vue.min.js"></script>

第二步：创建容器

<div id="app">

    </div>

记住该标签的id，很重要！！！

第三步：创建实例

此步骤有两种写法，更推介下面介绍的第二种

        （1）在<script>标签中创建一个实例 创建实例的同时绑定视图

new Vue({
        el:"#app",
        data:{
            str:"这是VUE中的数据"
            num:10,
            bol:true,
            arr:["hahaha","heiheihei","houhouhou"],
            obj:{
                uname:"sarah",
                phone:"12781246781234678"
            }
        }
    })

el后的#app代表着容器的id，告诉Vue将data中的数据和哪个容器进行填充。

data后的str是准备好的数据

        （2）先创建实例，再绑定视图

new Vue({

    data(){
        return{
            str:"<h2>这是vue中的数据</h2>",
            num:10,
            bol:true,
            arr:["hahaha","heiheihei","houhouhou"],
            obj:{
                uname:"sarah",
                phone:"12781246781234678"
            }
        }
    }
    })
    vm.$mount("#app")

最后一行("#app)依旧代表的是和哪个视图进行数据填充。

官方推荐使用第二种先创建实例，再绑定视图的方法

第一种方法，相当于是new了一个Vue对象，当我们将他当做一个组件让多个HTML界面来共同使用时，我们在使用的过程中肯定会对其中的属性值做出修改，这样的话，一个HTML界面对其修改，会对其他使用该组件的HTML界面也会做出修改，相当于单例模式一样，线程不安全。

第二种方法，我们可以将其看作成一个方法，谁用，谁调，互不干扰。线程安全。

第四步：插值语法

此时，我们已将将数据准备好了，使用插值语法将数据和页面进行绑定

在刚刚定义的容器中（id为“app”的div）使用插值语法

<div id="app">
        <div>{{str}}</div>
        <div>{{num*2}}</div>
        <div>{{bol}}</div>
        <div>{{arr[1]}}</div>
        <div>{{obj.uname}}</div>
        <div>{{obj.phone}}</div>
    </div>

我们可以看到，插值语法可以将字符串、数字（运算）、布尔、数组、对象等都可插入HTML中。