VUE入门(超级细致) （一）

一、Vue简介

1.Vue是什么

  一套用于构建用户界面的渐进式JavaScript框架

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

2.Vue特点

1. 采用组件化模式，提高代码的复用率、且让代码更好维护。
2. 声明式编码，让编程人员无需直接操作DOM,提高开发效率。
   （命令式：写一下动一下，需要拼接，原生js实现需要塞入DOM中）
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
   （数据更新时，采用Diff算法比较虚拟DOM数据，原来相同的数据直接复用）

二、初识Vue

1.创建一个HTML文件，引入vue.js

2.在浏览器中打开，打开控制台，发现有生产提示

3.Vue API中有一个全局配置productionTip，可以取消生产提示

4.将productionTip设为false

5.成功关闭，完美

tip:shift+点击刷新是强制刷新

error:

解决：

创建实例并绑定容器

例子：Hello,小程

工作流程：

1. 先有容器
2. vue实例工作时，绑定容器并解析，扫描是否存在vue语法，然后将data中相应的数据替换
3. 解析完替换整个容器，生成正常的HTML文件

tip:容器与实例是一对一的

1.多个容器对应一个实例时


总结：一个实例绑定两个容器此时只用第一个

2.多个实例对应一个容器


总结：此时会报错，vm1已经接管了root这个容器,虽然vm2还会执行，但是没有任何作用，一个容器只能被一个实例接管。

Q:为什么要这么写？
  应为我们的数据是动态的，而且数据以后还有可能变化，所以把数据交给vue实例，会自动更新，不用在操作dom。

扩展：vueDevtools

js表达式与js代码的区别

    {{}}中间可放js表达式
    注意区分：js表达式 和 js代码(语句)
    1.表达式：一个表达式会产生一个值，可以放到任何一个需要值的地方：
        1) a
        2) a+b 算术表达式
        3) demo(a) 函数调用表达式
        4) x == y ? 'a' : 'b'
    
    2.js代码(语句)
        1) if(){}
        2) for(){}

源码中定义的vue

VUE入门(超级细致) （一）
VUE入门(模板语法) （二）