带你畅游Vue的世界，跟我一起来吧

一、概述

Vue：构建用户界面的渐进式JavaScript框架；

特点：简单、高效、生态丰富（插件多）；

前端的三大框架：

React：Facebook 脸书

Vue：尤雨溪

Angular：Google

二、安装

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

三、实例化

• 模板 
  • <div id="app"></div>
• 创建app
  • const app=Vue.createApp({data(){return{}}})
• 挂载
  • app.mount("#app")
• 例子：

四、内置指令

• 模板语法介绍

        内置指令 是带有 v- 前缀的特殊属性

        联系html模板与JavaScript数据模型

• 文本渲染
  • v-text
  • {{msg}}
    • 只能写一行表达式
    • 不能写复杂js  如果if
  • v-html
• 属性渲染
  • v-bind:属性名=“值”
  • 简写： 
    • ：属性名=“值”
• 条件渲染
  • v-if
  • v-else-if
  • v-else
  • v-show
• v-show与v-if的区别：
  • v-show  隐藏式css方式
  • v-if  隐藏式移除节点
  • 频繁切换用v-show，反之用v-if

五、列表渲染指令

v-for=“(item,index) in list” :key="item"

• item  变量的当前数据
• index  当前的下标
• key  是给Vue遍历的节点一个唯一的标识符，更好的让Vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

遍历对象

• v-for="(value,key) in obj"

范围

• v-for="item in 5

v-for与v-if用template

• <template v-for="item in 10">
          <p v-if="item%2===0">{{item}}</p>
  </template>