什么是vue.js
- vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计
- vue的核心库只关注图层(核心:数据驱动视图)
- 前端三大主流框架:vue.js、Angular.js、React.js
- 作者:尤雨溪
为什么使用vue.js
- 提高开发效率
- 减少DOM操作,更多关注业务逻辑
- 提高开发效率的发展历程
- 原生js—jQuery之类 的类库—前端模板引擎—Angular.js/Vue.js
框架与库的区别
框架:一套完整的解决方案,对项目的侵入性较大
库(插件):提供某一个小功能,对项目的侵入性较小
MVC与MVVM的区别
- MVC是后端的分层开发概念
- MVVM是前端视图层的概念,主要关注于试图从分离
v-text、v-html异同:
相同点:覆盖元素原来的节点
不同点:v-text:不能解析富文本
v-html:可以解析富文本
属性绑定、事件绑定
在这里插入<div id="app">
<!-- 属性绑定 -->
<img v-bind:src="imgSrc" alt="">
<!-- 事件绑定 -->
<button v-on:click="hit">点我</button>
<button @click="change">换图</button>
<!-- 箭头函数的this永远指向父作用域,不能发生改变,要想改变,就改变父作用域的this指向,通过apply/bind/call -->
</div>代码片
事件修饰符
<div id="app">
<!-- .stop阻止冒泡 -->
<header @click="log3">
<article @click="log2">
<button @click.stop="log1">点我</button>
</article>
</header>
<!-- .capture添加事件侦听器使用事件捕获模式 -->
<header @click="log3">
<article @click.capture="log2">
<button @click="log1">点我</button>
</article>
</header>
<!-- .seif只当事件在该元素本身出发时出发回调 -->
<header @click="log3">
<article @click.self="log2">
<button @click="log1">点我</button>
</article>
</header>
<!-- .once事件只触发一次 -->
<header @click.once="log3">
<article @click="log2">
<button @click="log1">点我</button>
</article>
</header>
<!-- .prevent阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent.once="target">百度一下</a>
</div>
v-model数据双向绑定
在这里插入代<div id="app">
<input type="text" :value="value">
<input type="text" v-model:value="value">
</div>码片
vue中样式的使用
<div id="app">
<!-- 三目运算符 -->
<div :class="flag?'big':'' ">很烦</div>
<!-- 数组的内置对象 -->
<div :class="[class1,{'big':false}]">想放假</div>
<!-- 对象 -->
<div :class="{'red':false,'italic':true}">头疼</div>
</div>
内联样式
直接在元素上通过:style的形式,书写样式对象
<div style="color: brown;">廊坊到石家庄高铁开通</div>
将样式对象,定义到data中,直接引用到:style中
<div :style="style1">廊坊到石家庄高铁开通</div>
let vm = new Vue({
el: '#app',
data: {
style1: 'color: brown',
},
methods: {
}
})
在:style中通过数组,引用多个data中的样式对象
<div :style="[style1,style2]">廊坊到石家庄高铁开通</div>
let vm = new Vue({
el: '#app',
data: {
style1: 'color: brown',
style2: {
color: 'hotpink',
fontSize: '30px'
}
},
methods: {
}
})
v-for和key属性
v-for
<!-- 遍历数组 -->
<li v-for="(item,index) in list" :key="index">
{{item}}...........{{index}}
</li>
在这里插入代<!-- 遍历对象 -->
<li v-for="(value,key,index) in obj" ::key="index">
{{value}}..........{{key}}...........{{index}}
</li>码片
<!-- 遍历数字 -->
<li v-for="(item,index) in 3" :key="index">777</li>
key属性
- key必须是唯一值,必须是字符串或者数字
- key的作用:提高重排效率,就地复用。
v-if和v-show区别
-
相同点:显示隐藏元素
-
不同点:v-if是删除DOM元素
v-show通过display:none隐藏元素 -
应用场景:v-if用于一次显示隐藏
v-show用于多次显示隐藏
<body>
<div id="app">
<div v-if=false>qwe</div>
<div v-show=false>qwe</div>
<div v-if="score<60">不及格</div>
<div v-else-if="score<80">良</div>
<div v-else-if="score<100">优</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
score: 77
},
methods: {
}
})
</script>