认识Vue.js+Vue.js的指令上

1、认识Vue.js

• Vue 是一套用于构建用户界面的渐进式框架。
  • Vue的作者是 尤雨溪，是一个个人项目。
  • Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】
    • 拓展：司徒正美 avonlon.js 也是MVVM框架，也是个人项目。
  • Vue是一个单项数据流的框架
• Vue版本发布的时间
  • Vue 1.x 2014
  • Vue 2.x 2016(前端技术大爆发) 【 es6 vue 微信小程序 angular2.0 … 】

2、MVC

• MVC是一个软件架构思维，它将一个软件分为三个部分

  • M Model 数据

  • V View 视图

  • C Controller 控制器

• MVC衍生

  • mvc backbone 【 前端框架 】

    1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
    2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
    3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

  • mvp

    1. 各部分之间的通信，都是双向的。
    2. View 与 Model 不发生联系，都通过 Presenter 传递。
    3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

  • mvvm Vue Angular.ts 【 Angular2.0】

    与MVP唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

  • 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类型数据

    <div v-html="html"></div>
    

  • v-text

    <span v-text="msg"></span>
    

• 条件渲染

  • v-if

    <h1 v-if="awesome">Vue is awesome!</h1>
    

  • v-else-if

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no</h1>
    

  • v-else

• 条件展示

  • v-show

    <h1 v-show="ok">Hello!</h1>
    

  • 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

• v-for

  • 数组

    <ul>
        <li v-for=" (item,index) in lists">
              {{ item }} -- {{ index }}
         </li>
     </ul>
    

  • 对象

    <h4> 对象 </h4>
     <ul>
        <li v-for=" (value,key,index) in obj ">
            {{ value }} --- {{ key }} --- {{ index }}
         </li>
     </ul>
    

  • json

    <h4> json </h4>
     <ul>
        <li v-for="(item,index) in json">
            <p> 商品名称： {{ item.shopName }} -- {{ index }} -- {{ item.id }} </p>
         </li>
     </ul>
    

  • 列表渲染特殊数据

    <h4> 列表渲染特殊数据 </h4>
    <ul>
      <li v-for="item in 10">
           {{ item }}
       </li>
     </ul>
    

  • 嵌套数据

    <h4> 列表渲染嵌套 </h4>
    
    <ul>
       <li v-for="item in banners">
          <p> {{ item.name }} </p>
            <ul>
               <li v-for="val in item.child">
                  {{ val.name }}
               </li>
             /ul>
        </li>
     </ul>
    

  • …