Vue.js基础

Vue.js

1. 认识Vue.js

   • Vue是一个渐进式的javascript框架
     • 渐进式
     • Vue的作者是尤雨溪
     • Vue是一个个人项目
     • Vue是一个MVVM框架
     • Vue是一个单向数据流框架
   • Vue版本发布的时间
     • Vue 1-x 2014年
     • Vue 2-x 2016年

2. MVC

   • mvc backbone【前端框架】
   • mvp
   • mvvm Vue Angular.ts【Angular2.0】
   • ember

3. MVVM

   • M----Model 数据
   • V----View 视图
   • VM—ViewModel 视图模型

   V的变化会反映到VM上，反之同理，也就是VM的改变也会影响到V

4. Vue源代码

   • 行数：11945 开发环境

   • Vue的源代码是通过匿名函数【自执行函数】来进行封装的

     • 匿名函数的好处

       • 解决了命名冲突
       • 规定了一个独立的作用域
       • 安全性高
         • xss攻击脚本
         • CRSF攻击脚本

     • 格式

             参数： 第一个括号中的参数为 形式参数
                   第二个括号中的参数为 实际参数
       
             this - 指的就是window对象
             factory - 工厂函数   返回值就是Vue构造函数
             el不能是body
       
             Vue是通过面向对象原型继承 + 工厂函数进行底层代码封装的 
            */
           (function ( global,factory) {
       
           })( this,function () {})
       

   5. Vue学习思路
      1. Vue有指令和组件系统两大功能
      2. 通过JS想操作DOM->Vue也想操作DOM
         • 问题：Vue中建议不要像二阶段一样直接去操作DOM
         • 解决方案：指令
   6. 指令
      • 使用形式：
        • 绑定在dom属性身上
        • 为了区别自定义属性，vue提供的指令都携带v-
      • 数据展示
        • v-html非转义输出，可以解析xml类型数据
        • v-text
      • 条件渲染
        • v-if
        • v-else-if
        • v-else
      • 条件展示
        • v-show
        • v-if VS v-show
          • v-if 是真正的控制dom的存在与否，v-show是控制dom的display：none属性
          • 如果初始条件都为false ，v-if会惰性渲染【不渲染】，但是v-show不管条件是什么都会渲染，所以v-show的初始渲染开销较高
          • 如果我们要频繁的切换flag，那么我们使用v-show比较好，反之则使用v-if比较合适。