vue 基础
1. vue 是什么?
Vue.js (读音 /vju ː /, 类似于 view ) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
官网地址 API : https://cn.vuejs.org/v2/guide/index.html
2. MVVM 是什么?
MVC 拆分解释:
视图( View ):用户界面。
控制器( Controller ):业务逻辑
模型( Model ):数据保存
MVC 通信方式
View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View ,用户得到反馈
MVC 框架局限性
View 里会包含业务逻辑
View 当中的业务逻辑无法重用
模型的代码少,控制器的代码却是越写越多
MVVM 拆分解释:
Model: 负责数据存储
View: 负责页面展示
View Model: 负责业务逻辑处理(比如 Ajax 请求等),对数据进行加工后交给视图展示
3. 为什么要使用 MVVM
1. 低耦合。视图( View )可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同
的 "View" 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变
2. 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发( ViewModel ),设计人员可以专注
于页面设计
5. Vue.js 起步
实现步骤
第一步:下载 Vue.js 库并引入
<script type="text/javascript" src="vue.js"></script>
第二步 :创建 view 视图
<div id="box"> //确定一个范围,表示此范围内部都是 vue解析出来的
<h1> {{ msg }} </h1>
</div>
第三步 通过 Vue 实例化一个 vue 对象
var vm = new Vue({
el: '#box', // el:‘选择器’
data: {
msg: 'hello, world!'
},
// 实例中,可以设置很多配置项
});
第四步 使用数据
将 data 中变量 msg 放在 #box 内的双花括号内
修改 data 中的 msg ,会同步显示在页面中
实现原理分析
DOM 监听
视图层发生变化, DOM 监听到之后,会传到逻辑层进行处理
数据绑定
逻辑层把数据处理完成之后,通过数据绑定,把处理后的结构返回给视图层
6. 插值表达式
使用双大括号来包裹 js 代码构成插值表达式 , 如: {{msg}}
插值表达式将双大括号中的数据替换成对应属性值进行展示 , 也叫模板语法
插值表达式中可以写入哪些内容?
1. JSON 数据
<div id="wzy">
<p>{{obj.name}}</p>
</div>
<script>
new Vue({
el: '#wzy',
data: {
message: 'hello world',
obj:{ //插入json数据
name:'tom',
age:20
}
}
})
</script>
2. 数字 <p>{{ 10 }}</p>
3. 字符串 {{ "wzy" }}
4. 表达式 <h1>{{ 2>3?'true':'false' }}</h1>
注意:在表达式中可以调用 js 函数。如 {{msg.charAt(0)}}
7. Vue 指令
什么是 Vue.js 指令
指令( Directive )是特殊的带有 v- 前缀的特性
7.1 v-if 指令
被称为条件渲染指令,它根据表达式的真假来插入和删除元素
v-if = ' 表达式 '
根据表达式结果的真假,确定是否显示当前元素
true 表示显示该元素; false 表示隐藏该元素
<div id="wzy">
<p v-if="isShow">表达式的值为真,我就能显示</p>
</div>
var app3 = new Vue({
el: '#wzy',
data: {
isShow: true
}
})
7.2 v-else 指令
v-else 指令为 v-if 添加一个 “else 块 ” , v-else 元素必须立即跟在 v-if 元素的后面,否则不能被识别
v-else 后面不需要表达式
v-if 为 true ,后面的 v-else 不会渲染到 HTML
v-if 为 false ,后面的 v-else 才会渲染到 HTML
<body>
<div id="wzy">
<h1 v-if="isShow">表达式的值为真,我就能显示</h1>
<h1 v-else>v-if不成立的时候,我就显示出来了</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
isShow: false
}
})
</script>
7.3 v-show 指令
控制切换一个元素的显示和隐藏
v-show = ‘ 表达式 ’
根据表达式结果的真假,确定是否显示当前元素( true 表示显示该元素; false 表示隐藏该元素)
<div class="div1" v-show='isShow'></div>
v-if 与 v-show 区别
v-show 指令的元素始终会被渲染到 HTML
它只是简单地为元素设置 CSS 的 style 属性。当不满足条件的元素被设置 style="display:none" 样式
v-if 指令满足条件是,会渲染到 html 中,不满足条件时,是不会渲染到 html 中的
v-if 与 v-show 应用场景
v-if 指令有更高的 切换消耗
v-if 当条件成立的时候会将元素加上,不成立的时候,就会移除 dom ,并且内部的指令不会执行
v-show 指令有更高的 初始渲染消耗
v-show 只是简单的隐藏和显示
如果需要频繁切换使用 v ‐ show 较好,如果在运行时条件不大可能改变 使用 v ‐ if 较好
7.4 v-on 指令
为 HTML 元素绑定事件监听
v-on :事件名称 =‘ 函数名称 ()’ 或 @ 事件名称 =‘ 函数名称 ()’
<button v-on:click='fn()'>toggle</button>
//v-on: 可以简写成 @
<button @click='fn()'>toggle</button>
<body>
<div id="wzy">
<a v-on:click="show()">点击测试</a>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#wzy',
data: {
},
methods: {
show:function(){
alert("测试");
}
}
})
</script>
注意:函数定义在 methods 配置项中
案例:
<style type="text/css">
.div1 {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
}
</style>
<body>
<!-- view -->
<div id="box">
<!--第一种:click事件直接绑定一个方法,没有参数情况下,方法后面的括号可以去掉-->
<!-- <button v-on:click='fn()'>toggle</button> -->
<button v-on:click='fn'>toggle</button>
<!-- v-on: 可以简写成 @ -->
<!-- <button @click='fn()'>toggle</button> -->
<br/>
<div class="div1" v-show='bol'></div>
<!--第二种:传参情况下,click事件使用内联语句-->
<button v-on:click="say('Hi')">Hi</button>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 实例化对象
var vm = new Vue({
el: '#box',
data: {
// 数据
bol: false
},
// 事件统一写在methods里面
methods: {
fn: function() {
this.bol = !this.bol;
},
say: function(msg) {
alert(msg);
}
}
});
</script>
< 7.5 v-model 指令
能轻松实现表单输入和应用状态之间的 双向绑定
双向绑定
指的是我们在 vue 实例中的 data 与其渲染的 dom 元素上的内容保持一致,两者无论谁被改变,另
一方也会相应的更新为相同的数据
v-model = ‘ 变量 ’
v-model 指令只能用在
</span></p><pre>等这些表单元素
上
<body><div id="box"><input type="text" v-model='msg'></input><h1>{{ msg }}</h1><!-- v-model:进行双向绑定的(把用户输入的内容,同步显示在页面上)语法:v-model='变量'注:使用在表单元素上(常用在 type类型为text 上)--></div>
</body>
</html>
<script type="text/javascript">var vm = new Vue({el: '#box',data: {msg: 'hello'}});
</script>
7.6 v-bind 指令
v-bind 可以在其名称后面带一个参数,参数通常是 HTML 元素的特性( attribute ), v-bind 是动态绑定指令,默认 情况下自带属性的值是固定的,为了能够动态的给这些属性添加值可以使用v-bind 指令
v-bind: 属性名 = ‘ 表达式 ’
简写形式: v-bind 可以省略,直接书写为 : 属性名 = ‘ 表达式 ’
<img v - bind:src="imageSrc"> 等价于 <img :src="imageSrc"> // 绑定一个属性
<div id="box">
<!-- 第一种:图片的url地址 -->
<img v-bind:src="imageSrc">
<!-- 第二种:动态类名 v-bind:class={类名:表达式} -->
<div v-bind:class="{ divclass: isRed }"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
// 第一种:图片地址
imageSrc: "images/1.png",
// 第二种:class类名
isRed: true
}
});
</script>
7.7 v-for 指令
遍历 data 中的数据,并在页面进行数据展示
v-for = ‘(item, index) in items’
1. item 表示每次遍历得到的元素
2. index 表示 item 的索引,可选参数
3. items 表示数组或者对象
<body>
<div id="app">
<ul>
<!-- 1、遍历对象
value :表示对象的属性值
key :当前对象的属性名
index:当前对象的索引值
-->
<!-- <li v-for="(value, key, index) in person">
{{index}} - {{key}} - {{value}}
<br>
</li> -->
<!-- 2、遍历数组
item: 代表遍历的每一个数组对象
index:当前数组对象的索引值
-->
<!-- <li v-for="(item,index) in lesson">
{{index}} - {{item.name}} - {{item.type}}
<br>
</li> -->
<!-- 3、双层嵌套
把课程中内容遍历出来
-->
<!-- <li v-for="(item,index) in lesson">
<span v-for="(childValue,index) in item.type">
{{index}} - {{childValue}} <br>
</span>
</li> -->
<!-- 4、key 属性 :更高效的去重用和重新排序现有元素
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每
项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单
key的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 ,这里使用简写形式完成
-->
<li v-for="(item,index) in lesson" :key="index">
<!-- 这的 index是 唯一的存在,可以使用,如果有其他的也可以使用 -->
{{index}} - {{item.name}} - {{item.type}}
<br>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'zfpx',
age: 7,
},
lesson: [
{ name: '前端三大块', type: ['HTML', 'CSS', 'JavaScript'] },
{ name: '前端三大框架', type: ['vuejs', 'react', 'angularjs'] },
]
}
});
</script>
8. 总结
v-if :根据表达式的真假来插入和删除元素
v-else : v-else 指令为 v-if 添加一个 “else 块 ”
v-show :控制切换一个元素的显示和隐藏
v-on :为 HTML 元素绑定事件监听
v-model :将用户的输入同步到视图上
v-bind :绑定 HTML 元素的属性
v-for :遍历 data 中的数据,并在页面进行数据展示
vue 优点
简洁: HTML 模板 、 Vue 实例 、 JSON 数据
轻量: 35K ,性能好
渐进式:边学边用
设计思想:视图与数据分离,无需操作 DOM
社区:大量的中文资料和开源案例