Vue.js
是什么
?
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
- 自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
我的第一个vue代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 创建id为app的div -->
<div id="app">
<!-- {{}}双括号 差值表达式 可以获取vue实例中的数据(data) -->
{{name}}<br>
{{school.name}} - {{school.mobile}}<br>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}}</li>
</ul>
</div>
<div>
{{name}}
</div>
</body>
<script>
// 创建vue实例
var vm = new Vue({
// el 挂载点 作用：定义vue示例挂载的元素节点，表示vue接管该区域
el:"#app",
// vue中用到的数据，定义在data中 ，data中可以定义复杂数据
data:{
name:"hello Vue",
// 对象类型
school:{
name:"vue学习",
mobile:"1001001"
},
// 数组类型
names:["赵云","刘备","关羽"]
}
})
</script>
</html>
{{}}:
插值表达式
1.
插值表达式的作用
?
- 通常用来获取Vue实例中定义的数据(data)
- 属性节点中 不能够使用插值表达式
2. el:
挂载点
- 1. el的作用 ?
- 定义 Vue实例挂载的元素节点,表示vue接管该区域
- 2. Vue的作用范围是什么 ?
- Vue会管理el选项命中的元素,及其内部元素
- 3. el选择挂载点时,是否可以使用其他选择器 ?
- 可以,但是建议使用 ID选择器
- 4. 是否可以设置其他的DOM元素进行关联 ?
- 可以但是建议选择DIV, 不能使用HTML和Body标签
vue常用指令：
1. v-text
指令
- 作用: 获取data数据, 设置标签的内容.
- 注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 不会覆盖原来的内容 -->
<h2>{{message}}学习java</h2>
<!-- v-text 获取data数据 设置标签的内容，会覆盖之前的内容 -->
<h2 v-text="message">学习java</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"Java程序员"
}
})
</script>
</html>
2. v-html
指令
- 作用: 设置元素的 innerHTML (可以向元素中写入新的标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
v-html 指令：设置元素的innerHTML，向元素中写入标签
*/
</style>
</head>
<body>
<div id="app">
{{message}}
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 设置元素的innerHTML -->
<h2 v-html="url"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"java程序员",
url:"<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
</html>
3. v-on
指令
- 作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"
- 绑定的方法定义在 VUE实例的, method属性中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 绑定点击事件 -->
<input type="button" value="点击按钮" v-on:click="show">
<!-- 简写方式 -->
<input type="button" value="点击按钮" @click="show">
<!-- 绑定双击事件 -->
<input type="button" value="点击按钮" @dblclick="show">
<!-- 绑定点击事件，修改内容 -->
<h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
food:"麻辣小龙虾"
},
// 通过methods 专门存放Vue的方法
methods: {
show:function(){
alert("正在加班");
},
// 使用this获取data中的数据
// 在vue中 不需要考虑如何更改DOM，重点放在修改数据上，数据更新后 使用数据的那个元素也会同步更新
changeFood:function(){
this.food += "真好吃";
}
},
})
</script>
</html>
4.
计数器案例
- 1) 编码步骤
- 1. data中定义数据: 比如 num 值为1
- 2. methods中添加两个方法: 比如add(递增) ,sub(递减)
- 3. 使用{{}} 将num设置给 span标签
- 4. 使用v-on 将add,sub 分别绑定给 + ,- 按钮
- 5. 累加到10 停止
- 6. 递减到0 停止
- 2) 案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/inputNum.css">
</head>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" v-on:click="add">
<span>{{num}}</span>
<input type="button" class="btn btn_minus" @click="sub">
</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:1
},
methods: {
add:function(){
if(this.num < 10){
this.num++;
} else {
alert("最大了")
}
},
sub:function(){
if(this.num > 0){
this.num--;
} else {
alert("最小了")
}
}
},
})
</script>
<!--
案例总结：
1、创建Vue实例时：el(挂载点)，data(数据)，methods(方法)
2、v-on指令 作用是绑定事件，可以简写为 @事件名
3、方法中，使用this关键字 获取data中的数据
4、v-text 和 {{}} 都可以获取data中的数据，设置到元素中
-->
</html>
5. v-show
指令
- 作用: v-show指令, 根据真假值,切换元素的显示状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-show: 根据真假值，切换元素的显示状态
原理就是修改display 实现显示和隐藏
值为true 显示，false隐藏
数据改变后，显示的状态会同步更新
-->
<div id="app">
<input type="button" value="切换状态" @click="changeShow">
<img v-show="isShow" src="./img/car.gif" alt="">
<img v-show="age > 18" src="./img/car.gif" alt="">
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isShow:true,
age:19
},
methods: {
changeShow:function(){
// 触发方法，对isShow进行取反
this.isShow = !this.isShow;
}
},
})
</script>
</html>
6. v-if
指令
- 作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-if指令：根据表达式的真假，切换元素的显示和隐藏（操作是DOM）
频繁切换就使用v-show，反之v-if
本质上是通过操作DOM元素来切换状态
-->
<div id="app">
<input type="button" value="切换状态" @click="changeShow">
<img v-if="isShow" src="./img/car.gif" alt="">
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isShow:false
},
methods: {
changeShow:function(){
this.isShow = !this.isShow;
}
},
})
</script>
</html>
7. v-bind
指令
- 作用: 设置元素的属性 （比如:src,title,class）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-bind : 设置元素的属性 src class
语法：v-bind:属性名 = 表达式
作用：为元素绑定属性
完整写法：
v-bind:属性名 = 表达式
简写：
:属性名 = 表达式
-->
<div id="app">
<img src="./img/lagou.jpg" alt="">
<!-- 使用v-bind设置了src属性 -->
<img v-bind:src="imgSrc" alt="">
<!-- v-bind 可以简写为 : -->
<img v-bind:src="imgSrc" :title="imgTitle" alt="">
<!-- 设置class -->
<div :style="{fontSize:size+'px'}">v-bind指令</div>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
imgSrc:"./img/lagou.jpg",
imgTitle:"拉勾教育",
size:10
}
})
</script>
</html>
8. v-for
指令
- 作用: 根据数据生成列表结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-for指令：根据数据生成列表结构
1、数组经常和v-for结合使用
2、语法格式：(item,index) in 数据
3、数组的长度变化，会同步更新到页面上，响应式
-->
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<!-- 在li标签中 获取数组的元素 -->
<li v-for="(item,index) in arr">
{{index + 1}}城市：{{item}}
</li>
</ul>
<!-- 使用h2标签显示 -->
<h2 v-for="p in person">
{{p.name}}
</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
// 数组
arr:["上海","北京","深圳"],
// 对象数组
person:[
{name:"赵云"},
{name:"关羽"},
{name:"刘备"},
{name:"张飞"}
]
},methods: {
add:function(){
// 向数组添加元素 push
this.person.push({name:"小马"})
},remove:function(){
// 移除数据 移除第一个
this.person.shift();
}
},
})
</script>
</html>
9. v-on
指令补充
- 1. 传递自定义参数 : 函数调用传参
- 2. 事件修饰符: 对事件触发的方式进行限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
1、函数调用传参
事件绑定方法后，可以传递参数
定义方法时，需要定义形参，来接收参数
2、事件修饰符
可以对事件进行限制，.修饰符
.enter 可以限制触发的方式为回车
-->
<div id="app">
<!-- 函数传参 -->
<input type="button" value="礼物刷起来" @click="showTime(666,'爱你老铁！')">
<!-- 事件修饰符 指定那些方式可以触发事件-->
<input type="text" @keyup.enter="hi">
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods: {
showTime:function(p1,p2){
console.log(p1,p2);
},hi:function(){
alert("你好");
}
},
})
</script>
</html>
10. MVVM
模式
- MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式.
- MVVM模式将页面,分层了 M 、V、和VM ,解释为：
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
MVVM:前端的架构模式
M：Model 负责存储数据
V：View 负责页面展示
VM：ViewModel 负责业务处理(MVVM模式的核心)
-->
<div id="app">
<!-- View视图部分 -->
<h2>{{name}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
// 创建的vue实例就是VM ViewModel
var vm = new Vue({
el:"#app",
// data 就是MVVM模式中的Model
data:{
name:"hello"
}
})
</script>
</html>
- 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
- MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定
11. v-mode 指令
作用
:
获取和设置表单元素的值
(
实现双向数据绑定
)
- 双向数据绑定
- 单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
- 双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
- 什么情况下用户可以更新View呢？
- 填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
v-model: 实现双向数据绑定
单向数据绑定：将model绑定到view上，当model发生变化时，view会随之变化
双向数据绑定：view视图发生变化时，model也会随之改变
-->
<div id="app">
<input type="button" value="修改message" @click="update">
<!-- View视图 -->
<!-- <input type="text" v-bind:value="message"> -->
<!-- v-model实现双向数据绑定 -->
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
// VM 业务逻辑控制
var vm = new Vue({
el:"#app",
// Model 数据存储
data:{
message:"学习记录"
},methods: {
update:function(){
this.message = "学习"
}
},
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
