Vue是什么?
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种zhic结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
特点
1、结合了angular的指令与react的组件,虚拟dom。
2、渐进式javascript框架。
优点
1、中文文档完整。
2、生态丰富(插件多)。
3、上手简单。
4、指令,组件,虚拟dom。
导入与实例化
<body>
<!-- 模板 -->
<div id="app">
<h1>{{msg}}</h1>
</div>
</body>
<script src="./js/vue.min.js"></script> <!-- 引入 -->
<script>
//实例化
new Vue({
el: "#app",
data: {
msg: '你好vue!'
},
})
</script>
指令与模板
特点
1、可以渲染实例的值
v-text="msg"
2、数学运算
v-text="2+3"
3、使用js表达式
v-text="msg.length"
4、如果是文本需要加单引号
v-text=" '我在中国,'+msg "
指令
指令是联系模板与vue实例的桥梁
Vue的实例
var vm= new Vue({...})
vm就是new Vue创建的实例
文本渲染指令
1、{{}}
2、文本渲染指令:v-text
3、html文本渲染指令:v-html
条件渲染指令
1、v-if
2、v-else
3、v-else-if
4、v-show
v-if与v-show的区别:
答:1.都是用来控制显示与隐藏;2.v-if是通过dom操作事项隐藏,v-show通过css方式隐藏;3.频繁切换用v-show反之v-if
遍历指令
1、v-for
遍历对象:字符串,数字,列表,对象
实例:<p v-for="(item,index) in list" v-bind:key="item">{{index+1}}-{{item}}</p>
item 遍历的元素(自定义的名称); index 遍历的下标;list 被遍历的数据
2、v-bind:key
值必须是唯一;为了让vue更好的优化渲染列表