认识Vue.js

认识Vue.js
   - Vue是一个渐进式的javascript框架
     - 渐进式 【 越学越难 】
     - Vue的作者是 尤雨溪  
     - Vue是一个个人项目 【 React是facebook的团队项目 】
     - Vue是一个MVVM框架 【 MVVM是MVC的衍生架构 】
       - 扩展： 司徒正美 avonlon.js 也是MVVM框架，也是个人项目
     - Vue是一个单项数据流的框架

   - Vue版本发布的时间
     - Vue 1.x        2014
     - Vue 2.x        2016  【 es6  vue  微信小程序 angular2.0 ...  】

指令
   - 使用形式：
     - 绑定在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

 

<div id="app">
    <div class="container">
      <h3> 数据展示 </h3>
        <p> {{ msg }} </p>
        <p v-html = "msg"></p>
        <p v-text = "msg"></p>
      <hr>
      <h3> 条件渲染 </h3>
        <h4> 条件渲染 - 单路分支 </h4>
        <p v-if = "flag"> 条件 - 单路分支 </p>

        <h4> 条件渲染 - 双路分支 </h4>
        <p v-if = "flag1"> 条件 - 双路 - 1 </p>
        <p v-else> 条件 - 双路 - 2 </p>

        <h4> 条件渲染 - 多路分支 </h4>
        <p v-if = " type === 'A'"> 条件 - A </p>
        <p v-else-if = "type === 'B'"> 条件 - B </p>
        <p v-else> 条件 - C </p>
      <hr>
      <h3> 条件展示 </h3>
        <p v-show = "flag2"> 条件 - 展示 </p>

      <hr>

      <h3> 列表渲染 </h3>
      <h4> 数组 </h4>
        <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>

      <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>
    </div>
</div>
 
</body>

<script src="../../../lib/vue.js"></script>

<script>

  new Vue({
    el: '#app',
    data: {
      msg: '<div> hello Vue.js</div>',
      flag: false,
      flag1: true,
      type: 'A',
      flag2: false,
      lists: [1,2,3,4],
      obj: {
        id: 1,
        name: 'Gabriel Yan',
        age: 16
      },
      json: [
        {
          id: 1,
          shopName: '商品一'
        },
        {
          id: 2,
          shopName: '商品二'
        },
        {
          id: 3,
          shopName: '商品三'
        }
      ],
      banners: [
        {
          id: 1,
          name: 'banner1',
          child: [
            {
              id: 1,
              name: 'banner1 - 1'
            }
          ]
        },
        {
          id: 2,
          name: 'banner2',
          child: [
            {
              id: 2,
              name: 'banner2 - 2'
            }
          ]
        },
        {
          id: 3,
          name: 'banner3',
          child: [
            {
              id: 3,
              name: 'banner3 - 3'
            }
          ]
        }
      ]
    }
  })