学习Vue的第一天
概述
实例化参数
指令
一、Vue概述
了解
- 作者: 尤雨溪 (现任阿里巴巴Weex团队技术顾问)。
- 官网: cn.vuejs.org
- vue的定位: 是一个渐进式框架 前端三大mvvm框架 vue , react ,angular。
- 特点:
- 简单,上手简单
- 结合Angular指令与react组件思维
- 生态丰富(插件多)api文档完善
二、实例化参数
- el:"#app"
选择目的标签
- data:{}
指定数据
- data(){return{}}
一个函数返回一个对象
<div id="app">
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"你好vue!",
msg2:"<i>河南</i>是个好地方!"
}
})
</script>
三、指令
- {
{指令值}}
- v-text 渲染input框文本,不能识别标签
- v-html 渲染html文本,可以识别标签
<div id="app">
<h1>{
{msg}}</h1>
<p v-text="msg.length"></p>
<p v-html="msg2"></p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"你好vue!",
msg2:"<i>河南</i>是个好地方!"
}
})
</script>
- v-bind
- :属性=“属性值”(简写)
- v-show
- v-if
频繁切换用v-show
一次性切换用v-if
v-show隐藏是css方式隐藏节点
v-if是直接清空节点