Vue笔记总结

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

• 必背单词
  • bind 绑定
  • property 属性
  • mount 挂载
  • createApp 创建App
• 特点
  • 结合angular的指令与react的组件，虚拟dom的渐进式javascript框架
• 优点
  • 中文文档完善
  • 上手简单
  • 生态丰富（插件多）
  • 指令，组件，虚拟dom
• 导入与实例化
  • 模板
    <div class="app">
    <h1>{{msg}}</h1>
    </div>
  • 引入
    <script src="./js/vue.js"></script>
  • 实例化
    new Vue({
    el: ".app", //模板范围（element）
    data: { //指定数据
    msg: "你好vue！"
    },
    })
• 指令与模板

  • 

  • 特点
    • 可以渲染实例的值
      v-text=‘msg’
    • v开头的特殊属性，它的值预期为javascript单行表达式
    • 数学运算
      v-text=“2+3”
    • 使用js表达式
      v-text=“msg.length”
    • 文本需要加单引号
      v-text=“‘中国’+msg”
  • 指令是联系模板与vue实例的桥梁
• vue的实例
  • var vm=new Vue({...})
• 文本渲染指令
  • {{ }}
  • v-text
    文本渲染指令
  • v-html
    html文本渲染指令
• 条件渲染指令
  • 有
    • v-if
    • v-else
    • v-else-if
    • v-show
      • 隐藏元素以css的方式
      • 频繁切换使用v-show，少量切换使用v-if
  • v-if与v-show的区别
    • 1.都是用来控制显示与隐藏
    • 2.v-if是通过dom操作实现隐藏，v-show通过css方式隐藏
    • 3.频繁切换用v-show 反之v-if
• 遍历指令
  • v-for
    • 字符串，数字，列表，对象进行遍历
    • <p v-for="(item,index) in list" v-key="item">{{index+1}}---{{item}}</p>
      item 遍历的元素（自定义的名称）
      index 遍历的下标（键名）
      list 被遍历的数据
  • v-bind:key
    • 让vue在渲染列表的时候更加优化，v-key的值必须是唯一的
      不建议使用随机或者index