一、Vue介绍
提高开发效率
Javascript 可以实现前端所有交互
document.getElementById()
JQuery 一个原生js封装的一个方法库
$(’’).appdenTo(’’)
Angular、React、Vue 数据驱动视图
不需要操作DOM,只需要操作数据
二、vue的基本使用
vue是一个渐进式的框架
把技术文档当做小说去看
new Vue({ //初始化Vue对象
el:'#app', //划定Vue方法所生效的区域
data:{ //需要使用Vue来呈现的数据包
msg:"Hello World"
}
})
三、vue常用语法
- 渲染数据
{{msg}}
{{abc ? '已收藏' : '收藏'}}
- 属性绑定
<div class="box" v-bind:class="isActive ? 'active' : ''"></div>
<img v-bind:src="imgSrc" alt="">
- 条件渲染
<div class="box" v-if="isShow"></div>
- 事件绑定
<button v-on:click="handleCollect">控制收藏文字的显示</button>
<button @click="handleBox">控制box显示隐藏</button>
四、vue指令内部可以写哪些语法?
<div class="cont" v-if="bool">内容1</div>
<div class="cont" v-if="!bool">内容2</div>
<div class="cont" v-if="n==1">内容2</div>
<div class="cont" v-if="n>=1">内容2</div>