00vue简介

1.Vue是什么？

1.Vue是一套用于构建用户界面的渐进式JavaScript框架。
2.构建用户界面：把数据构建成用户可以看见的界面。
3.前端工程师：在合适的时候，发出合适的请求，最后把数据展示到合适的位置。
4.vue关注的是怎么把数据变成用户界面。
5.渐进式：Vue可以自底向上逐层的应用。
简单应用：只需呀一个轻量小巧的核心库。
复杂应用：可以引入各式各样的Vue插件库。

2.谁开发的？

—尤雨溪
2013年收到Angular启发，也参考了React。

3.Vue的特点

1.采用组件化模式，提高代码复用率，且让代码更好维护。
组件化： 一个Vue实现一块界面，一个Vue里面由html,css,js的交互。一个Vue就是一个组件。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
声明式更简单，更智能。之前的html和js基础内容都是命令式编码，代码很长很机械。

3.使用虚拟DOM+优先的Diff算法，尽量复用DOM节点。
-虚拟DOM就是内存里面的数据。
-Diff算法，将原始虚拟DOM和新的虚拟DOM中的数据做一个比较，一样的数据复用，新的数据加进来。

4.学习Vue之前需要掌握的JavaScript基础知识？
ES6语法规范、ES6模块化、包管理器npm、原型和原型链、数组常用方法、axios、promise

4.初识Vue

1.在官网下载vue.js
2.创建一个html,引入vue.js文件：<script src="../js/vue.js"></script>
3.引入文件后，多了一个内置的Vue构造函数/对象。
4.如何验证是vue构造函数？
1）执行html，在console中出现两个提示：

Download the Vue Devtools extension for a better development experience: 请你下载一个vue开发者工具，达到一个更好的开发体验。
https://github.com/vuejs/vue-devtools

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.你正在运行一个开发版本的vue,请你确定，你在生产环境下不要这样做。
See more tips at https://vuejs.org/guide/deployment.html

2）在console中输入Vue，出现一个函数：

ƒ Vue(options) {
    if (!(this instanceof Vue)) {
        warn$2('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}

3）在console中输入Vue.config,得到一个对象，里面所有的东西都是对vue进行一个全局的配置，一次修改，到处都可用。

productionTip: true  生产提示，如果改为false就阻止vue在启动时生成的生产提示。

在html的script中，写一行代码：`Vue.config.productionTip = false;`

4）如果仍不能消除提示，可以在不删除上面Vue.config.productionTip = false;代码的基础上将生产版本的Vue和开发版本的Vue都引入进来，记住开发版本的Vue要写在下面。

<!-- 引入生产版本的Vue-->
<script type="text/javascript" src="../js/vue.min.js"></script>
<!-- 引入开发版本的Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
--这样既可以保证不出现提示，也可以用Vue检查出自己写的错误代码。

5.错误点

1.Vue.js插件中点击Root无反应。

1.原因：Vue.js devtools对于纯中文数据的兼容性不是很好，所以会出现点击无任何反应的情况。
2.解决：如果数据中有纯中文的数据，在纯中文的数据中加入字母或者干脆输入非中文数据，重新打开实例网页即可解决问题。

3.例子：Vue实例中，之前是name:‘尚硅谷’,改为name:‘尚硅谷atGuiGu’

    <!-- 准备号一个容器 -->
    <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>

        <h2 v-bind:x="name">你好啊</h2>
        <!-- <h2 v-model:x="name">你好啊！</h2>   代码错误-->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; 
        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷atGuiGu'
            }
        });   
    </script>