Vue2（一）：初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件

一、初始Vue

Vue是一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引入各式各样的Vue插件。

1. Vue的特点

1、采用组件化模式，提高代码复用率、且让代码更好维护。

2、声名式编码，让编码人员无需直接操作DOM，提高开发效率。
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

2. Vue实例中的el和data配置

• el: 用来指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。一般为id选择器，当然也可以换成其他的选择器
• data: 用来存储数据，数据给el指定的容器所使用。值可以写成对象，也可以写成函数（学到组件时必须写成函数）
• 容器的作用：1、为Vue提供渲染模板 2、把Vue的工作成果（即生成的数据）让知道往哪放

<!-- 准备一个容器 -->
<div id="hello">
    <h1>你好，{
   
   {
   
   name}}</h1>
</div>

<script>
    Vue.config.productionTip = false; //阻止vue启动时弹出生产者开发者提示

    //创建Vue实例，这个声明可以省略，直接new Vue也可以
    const vm = new Vue({
   
   
        el: '#hello',  //el用来指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {
   
            //data用来存储数据，数据给el指定的容器所使用，值可以写成对象，也可以写成函数
            name: 'zzy',
            age: 18
        }
    })
</script>

3. 总结

1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2、root容器里代码依然符合HTML规范，只不过混入了一些特殊的Vue语法。
3、root容器里的代码被称为【Vue模板】。
4、Vue容器与与Vue实例是一对一关系，一个容器只能被一个Vue实例接管，一个Vue实例只能接管一个容器。
5、真实开发中只有Vue实例，并且会配合着组件一起使用。
6、{ {xxx}}中的xxx要写js表达式（不能写if，for这样的js代码），且xxx可以自动读取到data中的所有属性。
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

二、模板语法

1. 插值语法

功能：用于解析标签体内容。也就是插值语法都是写在html标签内容里的
写法：{ {xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
js表达式：可以被求值并产生一个结果的代码片段。例如加减乘除和三元表达式

2. 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等等）。
举例：v-bind:href="xxx"或简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多指令，且形式都为：v-???，此时仅用v-bind举例。

<div id="demo">
    <h1>模板语法</h1>
    <h3>你好，{
   
   {
   
   name}}</h3>

    <h1>指令语法</h1>
    <a v-bind:href="url">冷饭对决1</a>
   <!-- v-bind可以直接简写成冒号: -->
    <a :href="url.toUpperCase()">冷饭对决2</a> <!-- 这个url直接就当成表达式来执行了 -->
</div>

<script>
    new Vue({
   
   
        el: '#demo',
        data: {
   
   
            name: 'zzy',
            url: 'http://www.baidu.com'
        }
    })
</script>

注意：使用指令时引号里面的东西要写js表达式，比如我写url.toUpperCase()就是大写，效果是下面这样

三、数据绑定

1. 单向数据绑定（v-bind）

数据只能从data流向页面。
单向数据绑定：<input type="text" v-bind:value="name">
单向数据绑定简写：<input type="text" :value="name">

2. 双向数据绑定（v-model）

• 双向绑定一般都应用在表单类元素上（如：input、select等）
• v-model:value可以简写为v-model，因此v-model默认收集的就是value值

双向数据绑定：<input type="text" v-model:value="name">
双向数据绑定简写：<input type="text" v-model="name">

单向数据绑定：<input type="text"  v-bind:value="name"> <br>
双向数据绑定：<input type="text" v-model:value