一、概述
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>