1. 初识vue2

一. 引入vue

1. 下载文件，通过标签引入

 // 引入以后，全局添加了一个vue的构造函数
<script src="../js/vue.js"></script>

2. npm引入

3. 监测引入是否成功

二、安装开发者工具

1. 谷歌浏览器 =>【设置】 => 【扩展程序】 => 打开【开发者模式】 => 将文件拖入浏览器 => 【添加】

2.全局配置

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

=> 在浏览器控制台中，输入Vue.config，找到productionTip，改成false

// 关闭浏览器提示
Vue.config.productionTip = false;

3. 谷歌浏览器强制刷新：

shift+刷新

三、小案例

    <div id="root">
        <h2>Hello,{{name}}, {{Date.now()}}</h2>
    </div>
    <script>
        // 先整体调整vue的配置
        Vue.config.productionTip = false;
        // 再实例化vue,只穿一个参数，配置对象{}
        // const x = new Vue({ => const x = 可以去掉
        new Vue({
            // el: document.getElementById('root'),
            el: '#root',
            data: {
                name: 'vue222'
            }
            // data() {
            //     return {
            //         name: 'vue2'
            //     }
            // }
        })

注意事项：

1. root容器里面的代码被称为【vue模板】

        => 拿到模板【div】，将实例里的数据替换到模板上【解析】，再将模板放回去

2. 模板和vue实例，一一对应

四、模板语法

4.1 插值语法 —— {{}}

4.2 指令语法

    <div id="root">
        <!-- 插值语法 -->
        <h2>Hello,{{name}}</h2>
        <!-- 指令语法 -->
        <h3 :x="name">指令语法</h3>
    </div>

        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'vue222'
            }
        })