1、Vue简介

1.1、Vue是什么

Vue是一套构建用户界面的渐进式JavaScript框架。

• 渐进式：可以自底向上逐层的应用。
• 简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的Vue插件。

1.2、谁开发的

尤雨溪。

• 2013年：受到Angular框架的启发，尤雨溪开发出了一个轻量框架Seed。同年12月，Seed更名为Vue，版本号0.6.0；
• 2014年：Vue正式对外发布，版本号0.8.0。Taylor otwell 在 Twitter 上发表动态，说自己正在学习Vue.js；
• 2015年10月27日：正式发布Vue1.0.0 Evangelion（新世纪福音战士）；
• 2016年10月1日：正式发布Vue2.0.0 Ghost in the hell（攻壳机动队）；
• 2020年9月18日，正式发布Vue3.0.0 One Piece（海贼王）。

1.3、Vue的特点

采用组件化的方式，提高代码复用率，让代码更好维护；

声明式编码，让编码人员无需直接操作DOM，提高开发效率；

1.4、Vue引入

可使用 <script type="text/javascript" src="../js/vue.js"></script>。

关闭Vue开发环境提示：

<script type="text/javascript" >
    <Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示
</script>

1.5、Vue小案例

<!-- 想让Vue工作，就必须创建一个Vue实例且要传入一个配置对象 -->
<!-- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 -->
<!-- root容器里的代码被称为 Vue模板 -->
<!-- Vue实例和容器是一一对应的 -->
<!-- 真实开发中只有一个Vue实例，并且会配合着组件一起使用 -->
<!-- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 -->
<!-- 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新 -->
<!-- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 -->

<!-- 准备好一个容器 -->
<div id="root">
    <h1>Hello world</h1>
    <h1>年龄：{{name}}</h1>
</div>

<script type="text/javascript" >
    // 创建Vue实例
    const x = new Vue({
        el:'#root', // el 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        // 或者为 el:document.getElementById('root')
    
        // data 中用于存储数据，数据提供el所指定的容器使用，值我们暂时先写成一个对象
        data:{
            name:'张三'
        }
    })
</script>

2、模板语法

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url"}>点我去尚硅谷学习1</a> // 数据绑定方式1
    <a :href="school.url"}>点我去尚硅谷学习2</a> // 数据绑定方式2
</div>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'尚硅谷',
                url:"http://www.atguigu.com"
            }
        }
    })
    
</script>

2.1、插值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到daa中的所有属性；

2.2、指定语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）

写法：Vue中很多的指令，且形式都是 v-???，此处？？？可以是bind、if等等。

3、数据绑定

3.1、单向绑定 & 双向绑定

• 单向绑定（v-bind）：数据只能从data流向页面；
• 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

<div id = "root">
    <!-- 普通写法 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    
    <!-- 简单写法 -->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
    
    <!-- 如下代码是错误的，因为v-model只能应用在表单元素（输入类元素） -->
    <h2 v-module:x="name">你好啊</h2>
</div>
    

3.2、el 与 data 的两种写法

 1