什么是Vue.js？
- Vue.js是目前最火的前端主流框架之一，和Angular、React一起，并成为前端三大框架。
- Vue.js是一套构建用户界面的框架，只关注视图层。
框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目需要更换框架，则需要重新构建整个项目。
- 库/插件：提供一个小功能，对项目侵入性较小，可以随时切换的小部分模块。
MVC和MVVM区别
- MVC是后台的分层开发概念；
-
MVVM是前端视图层的概念，MVVM把前端的视图层分为三部分：Model、View、ViewModel
MVVM.png
Vue实例中MVVM对应的内容
//Vue实例所控制的这个元素（app），就是View
<div id="app">
<span>{{ name }}</span>
</div>
<script>
//new出来的vm对象就是ViewModel
var vm = new Vue({
el:'#app',
data: { //data就是model，用来保存每个页面的数据
name:RPP
}
})
</script>
v-cloak
用于解决插值表达式闪烁的问题
<style>
[v-cloak] {
display:nome;
}
</style>
<div id="app">
<span v-cloak>{{ name }}</span>
</div>
v-text
- 用于渲染数据，同插值表达式一样，但是v-text默认没有闪烁问题
- v-text与插值表达式的不同点：
插值表达式可以渲染出来“我的名字是：”
<span>我的名字式{{ name }}</span>
v-text无法渲染“我的名字是”，而是加载完成后直接覆盖标签内的文本
<p v-text="name">我的名字是：</p>
v-html
可以输出html元素,v-text和插值表达式输出的是普通字符串
<div id="app">
<span>{{ title }}</span>
<span v-text="title"></span>
<span v-html="title"></span>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
title:'<h2>我是h2标签</h2>'
}
})
</script>
v-bind
Vue提供的用于绑定属性的指令，可以简写为 :要绑定的属性，v-bind中可以写合法的表达式
<div id="app">
<input type="button" value="按钮" v-bind:title="title">
<input type="button" value="按钮" :title="title+'123' ">
<input type="button" value="按钮" v-bind:title="title+'123' ">
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
title:'这是一个按钮'
}
})
</script>
v-on
Vue中提供的事件绑定机制,可以简写为 @事件名
methids为存放方法的对象
<div id="app">
<button v-on:click="show">按钮</button>
<button @click="show">按钮</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
}，
methods:{
show(){
console.log('RPP')
}
}
})
</script>
Vue实例中想要获取data上的数据，或者调用methods中的方法，必须通过 this.数据名/方法名 来进行访问，这里的this表示new出来的vm实例对象
<div id="app">
<button @click="show">按钮</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
name:'RPP'
}，
methods:{
fn(){
alert(this.name)
}
show(){
this.fn
}
}
})
</script>
事件修饰符(可串写)
- .stop 阻止冒泡(冒泡是从里到外，捕获是从外到里)
<div @click="divShow">
<button @click.stop="show">按钮</button>
</div>
- .prevent 阻止默认事件
<a href="http://baidu.com" @click.prevent ="show">按钮</a>
- .capture 添加事件侦听器时使用事件捕获模式(冒泡是从里到外，捕获是从外到里)
<div @click="divShow">
<button @click.stop="capture ">按钮</button>
</div>
- .self 只当事件在元素本身（比如不是子元素）触发时回调
<div @click.self ="divShow">
<button @click.stop="capture ">按钮</button>
</div>
- .once 事件只触发一次
<button @click.once ="show">按钮</button>
v-model和双向数据绑定
使用v-model 指令，可以实现表单元素和Model 中数据的双向数据绑定
<div id="app">
<h2>{{ name }}</h2>
<input type="text" v-model="name">
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
name:'RPP'
}
})
</script>
Vue中样式的设置
-
使用Class类
1、数组
<h1 :class=" [ 'active' , 'red' ] ">我的名字叫H1</h1>
2、数组中使用三元表达式
<h1 :class=" [ 'active' , flag?'red':' ' ] ">我的名字叫H1</h1>
data:{
flag:true
}
3、数组中使用对象
<h1 :class=" [ 'active' , {'red':flag ] ">我的名字叫H1</h1>
data:{
flag:true
}
4、直接使用对象
<h1 :class="{ active : true , red : false}">我的名字叫H1</h1>
-
使用内联样式
1、直接绑定
<h1 :style="{ color: '#666', 'font-size' : '18px'}">我的名字叫H1</h1>
2、在data上定义样式
<h1 :style="active">我的名字叫H1</h1>
data:{
active:{ color: '#666', 'font-size' : '18px'}
}
3、多个样式组合使用
<h1 :style="[ ' active ' , ' back ' ]">我的名字叫H1</h1>
data:{
active:{ color: '#666', 'font-size' : '18px'},
back:{ background : 'red'}
}
v-for
- 循环数组
<span v-for="(item,index) in list"> {{ item }} ---{{ index }} </span>
data:{
list:[ ' 一 ' , ' 二 ' , ' 三 ' ,]
}
- 循环对象
<span v-for="(val,key,index) in list"> {{ val }} ---{{ key}} ---{{index}} </span>
data:{
list: { id:1 , name:'bob1' },
}
- 循环带对象的数组
<span v-for="(item,index) in list"> {{ item.id }} ---{{ item.name}}---{{ index }} </span>
data:{
list:[
{ id:1 , name:'bob1' },
{ id:2 , name:'bob2' },
{ id:3 , name:'bob3' },
]
}
- 迭代数字（使用v-for迭代数字时，前边的count值时从1开始而不时从0开始）
<span v-for="count in 10"> 这是第{{count}} 次循环</span>
v-for的key值
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
注意：只能为number或者string类型，并且需要v-bing绑定到元素上
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
v-if和v-show
- v-if特点：
每次都回重新删除或者创建元素
有较高的切换性能消耗 - v-show特点：
每次不会重新进行DOM的删除和创建操作，知识切换了元素的 display:none/block样式 - 建议：
如果涉及频繁的切换，最好不要使用v-if，而是使用v-show
如果元素可能永远也不会显示或者隐藏出来，则推荐使用v-if
<span v-if="flag"> 标签 </span>
<span v-show="flag"> 标签 </span>
data:{
flag:true
}
