vue的介绍
vue的官网:https://cn.vuejs.org/
1.定义
2.MVC和MVVM的概念
- MVC 是后端的分层开发概念；
- MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
下面用一幅图来分析他们之间的关系:
3.常见的指令
3.1插值表达式
{{msg}}
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<div id="app">
<!-- {{插值表达式}} -->
<p>{{ msg }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
3.2 v开头的内置指令
3.2-1 渲染文本
v-text
3.2-2渲染html
v-html
注意:v-text和v-html会将标签的内容完全覆盖,而插值表达式可以在前后拼接内容
3.2-3解决插值表达式的闪烁问题
v-cloak
css代码:
<style>
[v-cloak] {
display: none;
}
</style>
html代码:
<div id="app">
<div v-cloak>{{ msg }}</div>
</div>
解决闪烁问题的思路:将标签添加v-cloak属性,给标签添加样式,当插值表达式有数据的时候就会将标签自动显示
3.2-4. 绑定属性
v-bind 简写 :
HTML代码:
<input type='text' v-bind:value='msg'/>
<input type='text' :value='msg + "123"'/>
绑定属性可以针对标签自带的属性, 也可以针对自定义属性
<input type='text' :flag='msg' :value='msg + "123"'/>
**注意: 以上的所有指令用到的msg都需要放到Vue实例的data属性中**
vm实例代码:
let vm = new Vue({
el: '#app', // el对应的是vm的控制视图区域, 传入选择器即可
data: { // data对应的是Model层, 也就是数据对象, 该页面所有的数据都会存放在该对象中
msg: 'hello' // msg就是存储在这里
}
})
3.2-5. 绑定事件
v-on 简写 @
HTML代码:
<button value='按钮' v-on:click="show" />
<button value='按钮' @click="show" />
vm实例对象:
let vm = new Vue({
el: '#app', // el对应的是vm的控制视图区域, 传入选择器即可
data: { // data对应的是Model层, 也就是数据对象, 该页面所有的数据都会存放在该对象中
msg: 'hello' // msg就是存储在这里
},
methods: {
show: function() {
alert('helloworld')
}
}
})
4 在methods的函数中访问data的数据
- 在vm实例创建时, 会将methods和data对象中的所有成员挂载到vm实例本身
- 在methods中所有的函数内部this都会指向vm实例
- 所以需要在methods中的函数内部访问data中的xxx数据, 应该 this.xxx
5 事件修饰符
事件修饰符需要加在绑定事件的后面
例如:
<div @click.stop="divClickHandler"></div>
-
.stop
阻止冒泡
-
.prevent
阻止默认行为
-
.self
只有点击自己的时候才会触发事件, 其他情况都不会触发(例如点击了子元素, 默认情况会冒泡到当前元素, 如果加了self事件修饰符则不会触发当前元素的事件)
-
.once
只触发一次
-
.capture
事件捕获
注意: 多个事件修饰符可以同时添加给一个事件, 例如: @click.once.prevent 表示点击事件只触发一次并阻止默认行为, 第二次点击既不会触发事件也不会阻止默认行为
6 双向数据绑定的指令
在vue中实现双向数据绑定的指令只有:
v-model
v-model指令也只能用在表单元素身上, 不需要像v-bind那样指定要绑定的属性, 因为v-model只能绑定表单元素的value属性, 所以用法如下:
<input type="text" v-model="msg">
使用v-model绑定变量时一定要在data中先声明好变量
7 绑定class完成样式修改
通过v-bind绑定class属性
-
以前的使用方式, 不使用v-bind绑定, 适用于类样式固定的场景
-
个别类样式需要根据标识符来切换, 例如active类样式, 推荐使用v-bind数组的方式来绑定
<div :class="['red', 'thin', {active: flag}]"></div> -
很多类样式都需要根据标识符来切换, 推荐使用v-bind对象的方式来绑定
<div :class="{red: true, thin: flag2, 'form-control': flag}"></div>
8 绑定style完成样式修改
通过v-bind绑定style属性
-
绑定对象
<div :style="{ width: '200px', height: '300px', 'background-color': 'red', 'font-weight': 200 }"></div> -
绑定数组, 树中存放多个样式对象, 可以将多个样式对象的样式属性设置上去
9 循环渲染
v-for指令
-
循环数组
数组有几个元素, 就会循环创建几个p标签
普通数组:<p v-for="(item, index) in arr">{{ item }}</p>如果数组中存储的是对象
<p v-for="(item, index) in arr">{{ item.name }}</p> -
循环对象
对象有几个属性, 就会循环创建几个p标签
<p v-for="(value, key) in obj">{{ value }}</p> -
迭代数字(从1开始)
从1开始迭代循环到指定的值, 如果需要用到35-45之间的值
<p v-for="count in 10">{{ count + 34 }}</p>