Vue 简介

• 特点
  • 尤雨溪创造，v2,v3两个版本
  • 结合了angular的指令与react的组件，虚拟dom
  • 渐进式javascript
• 优点
  • 中文文档完毕 生态丰富（插件多） 上手简单
  • 指令， 组件， 虚拟dom
• 导入与实例化
  • 模板
    <div id="app">
    <h1>{{msg}}</h1>
    </div>
  • 引入
    <script src="./js/vue.js"></script>
  • 实例化
    new Vue{{
    el : "#app",
    data : {msg : "你好 vue ！" }
    }}
• 指令与模板
  • vue 01引入vue
  • 特点
    • 就是v开头的特殊属性 它的值预期为 JavaScript 单行表达式
    • 可以渲染实例的值
      v-text="msg"
    • 数学运算
      v-text = "2+3"
    • 使用js表达式
      v-text = "msg.length"
    • 如果是文本需要加单引号
      v-text = " '我在中国' +msg "
  • 指令是联系模板与vue实例的桥梁
• vue的实例
  • var vm = new Vue( { ...} )
  • vm 就是new Vue 创建的实例
• 文本渲染指令
  • {{}}
  • v-text
    文本渲染指令
  • v-html
    html文本渲染指令
• 条件渲染指令
  • v-if
  • v-else
  • v-else-if
  • v-show
• 遍历指令
  • v-for
    • 字符串，数字，列表，对象进行遍历
      <p v-for= " (item,index) in list " v-key = "item"> { { item } } </p>
    • item 遍历的元素（自定义的名称）
    • index 遍历的下标（键名）
    • list 被遍历的数据
  • v-key
    • 值必须是唯一
      为了让vue更好的优化渲染i额表