01-Vue入门
- 学习Vue最好的方式:查看官网文档
- https://cn.vuejs.org/
1.1-Vue介绍
Vue介绍 | 描述 |
---|---|
1.Vue是一个JavaScript框架 | 框架:别人写好的js文件 |
2.作用 : 构建用户页面 | 将数据渲染到页面 |
3.特点:渐进式 | 组件式开发 |
- 1.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
- Vue是一个
JavaScript框架
- Vue是一个用于
构建用户页面
的框架- Vue是一个用于构建用户界面得
渐进式框架
- Vue是一个用于构建用户界面得
- Vue是一个用于
- Vue是一个
- 2.渐进式框架介绍
- a. Vue.js提供了很多的功能,但是这些功能并不是集成在一起的,而是分开的
- 类似于Nodejs,拆分成很多个小模块
- b. 在项目中我们用到什么,就导入什么
- 这样可以保证我们用到的最少
- c. 说人话:Vue相当于是一个五星级自助餐,我们想要用什么就拿什么,这样可以最大限度避免浪费资源
- a. Vue.js提供了很多的功能,但是这些功能并不是集成在一起的,而是分开的
1.2-Vue两个重要特点
1-数据驱动
- 1.数据驱动 :Vue会根据数据,自动渲染页面
- 无需DOM操作,修改了对象中的数据,页面会自动渲染
- Vue的底层使用了一种叫做虚拟DOM的技术,能够实时监听js对象的属性变化从而自动更新页面DOM元素
虚拟DOM本质是一个js对象
- 关于虚拟DOM了解传送门(难度较大,可以留着以后进阶学习)
- https://www.jianshu.com/p/ce2cdd4b1f04
- https://www.jianshu.com/p/d1afa813d566
原始的前端开发 | Vue.js的前端开发 |
---|---|
1.使用HTML+CSS搭建页面 | 1.使用HTML+CSS搭建页面 |
2.使用异步请求技术向后台请求数据 | 2.使用异步请求技术向后台请求数据 |
3.使用原生的js或者jQuery操作DOM,渲染数据 | 3.Vue自动渲染数据 |
2-组件化开发(盒子复用)
- 2.组件化开发 : 网页中的某一个部分,可能需要在多个地方被重复使用,就可以定义成一个组件
-
组件化开发好处
- a. 一次定义,多处使用
- b. 便于开发维护
- 类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件
-
数据驱动 : 没有dom操作,自动渲染数据
-
组件开发 : 元素复用
-
1.3-Vue基本使用
- 官方文档传送门:Vue官方文档
- 第三方框架通用的使用步骤
- 1.导包
- 2.写HTML结构
- 3.js中初始化配置
<!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>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
{{ message }}
<br>
{{ name }}
<br>
{{ age }}
<br>
{{ sex }}
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
//el: element 用来设置vue实例的挂载点(将数据渲染到哪个元素身上)
el: '#app',
//data: 要渲染的数据
/* 数据驱动:vue会根据data中的数据,自动渲染页面(无需DOM操作) */
data: {
message: 'Hello Vue!',
name:'坤哥',
age:32,
sex:'男'
}
})
</script>
</body>
</html>
1.4-Vue的挂载点介绍
- el挂载点官方文档传送门:https://cn.vuejs.org/v2/api/#el
- 1.挂载点
el
作用 : 告诉vue实例,你要将data中的数据渲染到哪一个视图 - 2.
注意点
- (1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器
- 开发中基本上都是id选择器,保证HTML标签唯一性
- 如果你希望data中的数据能够对多个元素生效,可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素,只会选择第一个元素
- (3)挂载点不能设置为html和body标签 (程序报错)
- (1)挂载点可以使用 id选择器(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>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="hm">
<div id="app">
{{ message }}
</div>
<hr>
<div id="box" class="container">
{{ message }}
</div>
<hr>
<div class="container">
{{ message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
//el: element 用来设置vue实例的挂载点(将数据渲染到哪个元素身上)
/*
(1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器
(2)如果选择器选中了多个元素,只会选择第一个元素
(3)挂载点不能设置为html和body标签 (程序报错)
*/
el: '#hm',
//data: 要渲染的数据
/* 数据驱动:vue会根据data中的数据,自动渲染页面(无需DOM操作) */
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
vue的挂载点el作用 告诉VUE 渲染哪个盒子
vue的挂载点使用什么选择器最好 id 如果可以选择多个盒子,vue只会渲染第一个
vue的挂载点el不能给什么标签设置 挂载点 不支持 body 和html 否则会报错
1.5-Vue的插值表达式介绍
- 插值表达式(模板语法)官网文档传送门:https://cn.vuejs.org/v2/guide/syntax.html
插值表达式
有点类似于
以前学习的art-template
模板语法,但是不同的框架有自己不同的语法规则
- 1.Vue会自动将data对象中的数据渲染到视图
- 2.在视图中,使用插值表达式来告诉vue,你想把数据渲染在什么位置
- 3.关于插值表达式一些
注意点
- (1)
{{ }}
: 插值表达式,也叫胡子语法 - (2) 插值表达式作用:将数据渲染到页面
- (3) 支持二元运算 {{ age + 1 }}
- (4) 支持三元运算 {{ age>30?‘老男人’:‘小鲜肉’ }}
- (5) 支持数组与对象的取值语法
- (6) 不支持分支语法与循环语法
- (1)
<!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>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
名字: {{ name }} <br>
年龄: {{ age + 1 }} <br>
介绍: {{ age>30?'大叔':'欧巴' }} <br>
女朋友:{{ girlFried[1] }} <br>
女儿: {{ daughter.name }} <br>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
//el: element 用来设置vue实例的挂载点(将数据渲染到哪个元素身上)
/*
(1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器
(2)如果选择器选中了多个元素,只会选择第一个元素
(3)挂载点不能设置为html和body标签 (程序报错)
*/
el: '#app',
//data: 要渲染的数据
/* 数据驱动:vue会根据data中的数据,自动渲染页面(无需DOM操作)
(1) {{ }} : 插值表达式,也叫胡子语法
(2) 插值表达式作用:将数据渲染到页面
(3) 支持二元运算 {{ age + 1 }}
(4) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}
(5) 支持数组与对象的取值语法
(6) 不支持分支语法与循环语法
*/
data: {
message: 'Hello Vue!',
name: '坤哥',
age: 32,
sex: '男',
girlFried:['代码','学生','咖啡'],
daughter:{
name:'小布丁',
age:1
}
}
})
</script>
</body>
</html>
vue的差值语法
支持 : 数组取值,对象取值,二元运算,三元运算
不支持 : if分支和for循环
Vue指令
指令名称 | 指令作用 | 示例 | 简写形式 |
---|---|---|---|
v-text | 设置元素的innerText | v-text="111" | 无 |
v-html | 设置元素的innerHTML | v-html="<p>111</p>" | 无 |
v-on | 给元素绑定事件 | v-on:click="doClick" | @click="doClick" |
v-bind | 设置元素的原生属性 | v-bind:src="./logo.png" | :src="./logo.png" |
v-for | 列表渲染 | <li v-for=(item,index) in list></li> | 无 |
1.1-Vue指令介绍
- Vue指令官网文档传送门:https://cn.vuejs.org/v2/api/#v-text
- 1.Vue指令的
本质是
: Vue为HTML标签新增的一些属性
- a. 每一个HTML标签都有自己的原生默认属性
- HTML标签的每一个属性都有自己独特的功能
- 例如 img标签的src属性,a标签的href属性
- b. Vue认为,HTML标签原生的属性还不够用,所以Vue为HTML标签新增了很多的属性,每一个属性(指令)都可以实现一个强大的功能
- a. 每一个HTML标签都有自己的原生默认属性
- 2.在Vue中每一个指令都是以
v-
开头 (用于区分HTML标签原生属性)- 语法 :
指令名=“指令值”
- 例如
v-text = msg
- 例如
- 语法 :
- 3.使用Vue的指令,就像使用HTML标签原生的属性一样去使用即可。
<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick"> |
---|
src" : 原生属性,设置图片的路径 |
alt : 原生属性 ,设置图片不存在时的文本 |
title :原生属性,设置鼠标悬停文本 |
v-on:click :vue给img标签新增的属性, 给元素绑定点击事件 |
问题1: 指令是vue框架的核心功能之一,请说出指令的作用?
标签新增一些功能
问题2: 指令的本质是什么?
自定义属性
1.2-v-text指令
- v-text指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-text
<!--
1.学习目标 : v-text 指令
2.学习路线
a.作用: 设置元素的文本 innerText
b.与插值表达式区别
v-text 设置元素的文本,如果元素有文本,则会覆盖现有的文本
{{ }} 只会替换当前位置文本
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p v-text="msg">传智播客</p>
<p v-text="msg1">传智播客</p>
<p>我爱你: {{ msg }}</p>
</div>
<!--
1.学习目标 : v-text 指令
2.学习路线
a.作用: 设置元素的文本 innerText
b.与插值表达式区别
v-text 设置元素的文本,如果元素有文本,则会覆盖现有的文本
{{ }} 只会替换当前位置文本
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
msg1:'<h1>黑马程序员</h1>'
}
})
</script>
</body>
</html>
1.3-v-html指令
- v-html指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-html
<!--
1.学习目标 : v-html 指令
2.学习路线
作用: 设置元素的innerHTM
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p v-text="msg">传智播客</p>
<p v-text="msg1">传智播客</p>
<p v-html="msg1">传智播客</p>
</div>
<!--
1.学习目标 : v-html 指令
2.学习路线
作用: 设置元素的innerHTM
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
msg1:'<h1>黑马程序员</h1>'
}
})
</script>
</body>
</html>
1.4-v-on指令(绑定事件)
1.4.1- v-on基本使用
- v-on指令官方文档传送门:https://cn.vuejs.org/v2/api/#v-on
<!--
1.学习目标 : v-on 指令
2.学习路线
a.作用: 给元素绑定事件
b.语法:
标准语法: v-on:事件名 = "方法名"
简洁语法: @事件名 = "方法名"
c.注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<button v-on:click="doClick">点我</button>
<div class="box" v-on:mouseenter="doEnter" v-on:mouseleave="doLeave"></div>
<hr>
<div class="box" @mouseenter="doEnter" @mouseleave="doLeave"></div>
</div>
<!--
1.学习目标 : v-on 指令
2.学习路线
a.作用: 给元素绑定事件
b.语法:
标准语法: v-on:事件名 = "方法名"
简洁语法: @事件名 = "方法名"
c.注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
},
//method:注册事件的方法名
methods: {
doClick: function () {
alert('我被点击了');
},
doEnter: function () {
console.log('鼠标移入我了');
},
doLeave: function () {
console.log('鼠标移出我了');
}
},
})
</script>
</body>
</html>
知识点验收
-
问题1:v-on指令的作用是什么?
- 给元素绑定事件
-
问题2: v-on指令有几种写法?
- 标准语法: v-on:事件名 = “方法名”
- 简洁语法: @事件名 = “方法名”
-
问题3: v-on指令使用时需要注意什么问题?
注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
1.4.2- vue事件修饰符
- vue事件修饰符官方文档传送门:事件修饰符使用
<!--
1.学习目标 : 事件修饰符
2.学习路线
a.作用: 限定事件触发行为(例如阻止冒泡,阻止默认行为等)
b.语法: @事件名.修饰符 = "方法名"
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
.father{
width: 300px;
height: 300px;
background-color: #f00;
}
.son{
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<div class="father" @click.once="fatherClick">
我是father
<div class="son" @click.stop="sonClick">我是son</div>
</div>
<form action="http://www.itheima.cn">
<button @click.prevent="doSubmit">点我啊</button>
</form>
<!-- 输入框 : enter键 -->
<!-- <input type="text" @keyup.13="doUp"> -->
<!-- 用enter,易读 -->
<input type="text" @keyup.enter="doEnter">
</div>
<!--
1.学习目标 : 事件修饰符
2.学习路线
a.作用: 限定事件触发行为(例如阻止冒泡,阻止默认行为等)
b.语法: @事件名.修饰符 = "方法名"
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
},
//method:注册事件的方法名
methods: {
fatherClick: function () {
console.log('我是父元素');
},
sonClick: function () {
console.log('我是子元素');
},
doSubmit: function () {
console.log('提交按钮');
},
doEnter:function(){
console.log('按了enter键')
}
},
})
</script>
</body>
</html>
知识点验收
-
问题1: 如何绑定enter键事件?
@keyup.enter=“dosomething”
-
问题2: 如何阻止事件冒泡?
@click.prevent=“dosomething”
-
问题3: 如何阻止事件默认行为?
@click.stop=“dosomething”
1.4.3- vue方法中的this
- 1.vue事件方法中的this指向 :
vue实例
- 2.vue事件方法中访问data对象中的成员 :
this.属性名
- vue会将data对象与methods对象中的成员
平铺
到 vue实例中
- vue会将data对象与methods对象中的成员
- 3.注意点: 如果事件处理代码没有写到methods中,而是写在行内则不需要this
就可以访问data对象中的成员
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
{{ msg }} <br>
<button @click="doClick">点我啊</button>
<br>
我的年龄:{{ age }}
<button @click="age++">我要成长</button>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
age:32
},
methods: {
/*
1. vue事件方法中的this指向 : vue实例
2. vue事件方法中访问data对象中的成员 : this.属性名
* vue会将data对象与methods对象中的成员 平铺到 vue实例中
3. 注意点: 如果事件处理代码没有写到methods中,而是在行内则不需要this
就可以访问data对象中的成员
*/
doClick:function(){
console.log(this);
//在这个事件中,如何获取data里面的成员呢?
//console.log(this.data.msg);//报错 无法获取
console.log(this.msg);// vue会将data与methos中的成员 平铺到vue实例中
this.msg = '爱你么么哒';
},
doClick1:function(){
this.age++;
}
},
})
</script>
</body>
</html>
在vue的事件处理函数methods中,可能会经常使用this
这个关键字,
- this 指向vue实例
如果在vue的methods中使用了箭头函数,则此时this会指向谁?为什么?
- 不应该使用箭头函数来定义 method 函数 (例如
plus: () => this.a++
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是 undefined。
1.4.4- vue事件传参
- 1.vue中每一个事件方法都有一个默认参数 , 就是事件对象
- 2.如果主动给事件传参,则传递的参数 会 覆盖默认参数
- 3.如果希望同时传入
事件对象
+自定义参数
,则可以使用$event
v-on:click="doClick($event,自定义参数)"
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
{{ msg }}
<div class="box" @click="boxClick(10)"></div>
<br>
<span v-text="news.title"></span>
<button @click="deleteClick(news.id)">删除</button>
<button @click="editClick($event,news.id)">编辑</button>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
news:{
title:'港独分子的下场就是牢底坐穿!',
id:10
}
},
methods: {
/*
1.vue中每一个事件方法都有一个默认参数 , 就是事件对象
2.如果主动给事件传参,则传递的参数 会 覆盖默认参数
3.如果希望 传递事件对象 + 自定义参数, 则可以使用 $event
*/
boxClick:function(e){
console.log(e);
},
deleteClick:function(id){
console.log(`id为${id}的文章被删除`);
},
editClick:function(e,id){
console.log(e);
console.log(id);
}
},
})
</script>
</body>
</html>
1.5-v-bind指令 (绑定标准属性的值)
- v-bind指令官网文档传送门:https://cn.vuejs.org/v2/api/#v-bind
- 默认情况下,HTML标签
原生属性
无法获取vue中的数据 - 如果希望
原生属性
也可以获取vue中的数据,就可以使用v-bind指令
- 默认情况下,HTML标签
1.5.1-v-bind指令基本使用
<!--
1.学习目标 : v-bind 指令
2.学习路线
a.作用: 设置HTML标签原生属性的值
b.语法:
标准语法: v-bind:原生属性名 = "属性值"
简洁语法: :原生属性名 = "属性值"
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<!--
默认情况下,HTML标签原生属性无法获取vue中的数据
如果希望原生属性也可以获取vue中的数据,就可以使用v-bind指令
-->
<img v-bind:src="imagePath" v-bind:title="imageTitle" alt="">
</div>
<!--
1.学习目标 : v-bind 指令
2.学习路线
a.作用: 设置HTML标签原生属性的值
b.语法:
标准语法: v-bind:原生属性名 = "属性值"
简洁语法: :原生属性名 = "属性值"
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
imagePath:'./images/logo.png',
imageTitle:'黑马程序员'
}
})
</script>
</body>
</html>
1.5.2-vue样式绑定
-
class与style样式绑定官方文档传送门:https://cn.vuejs.org/v2/guide/class-and-style.html
v-bind
可以简写成:
-
v-bind:class="{ '类名': bool, '类名': bool ......}" 如果值为true 该类样式就会被应用在元素身上, false则不会 注意点:如果类名有 - ,则需要使用引号包起来
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
div>div {
width: 100px;
height: 100px;
border: 1px solid #000;
margin-top: 20px;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}
.greenBorder {
border: 10px solid green;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<!-- 本小节内容:Vue设置元素CSS样式的3种方式 -->
<!-- v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点:如果类名有 - ,则需要使用引号包起来
-->
<button @click="changeClass">切换样式</button>
<div :class="{ greenBorder: true, 'blue-box': flag }"></div>
<hr>
</div>
<script>
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
flag:true,
},
methods: {
changeClass:function(){
this.flag = !this.flag;
}
},
})
</script>
</body>
</html>
让原生属性也可以获取vue中的数据,就可以使用v-bind指令
v-bind指令在使用时有什么需要注意的地方?如果类名有 - ,则需要加’ ’
1.6-vue指令案例:购物车加减
- Vue编程思维
- (1)写页面结构 HTML+CSS
- (2)分析页面需要显示什么数据,将其保存在vue实例的data对象中
- (3)在页面视图中使用插值语法或者指令显示data中的数据
1.6.1-计数器![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/005209bb0a15a0f16c8cc30af4048506.png)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
.input-num {
width: 180px;
height: 40px;
border: 1px solid gray;
display: flex;
border-radius: 5px;
overflow: hidden;
}
.input-num button {
width: 50px;
height: 100%;
font-size: 25px;
color: gray;
cursor: pointer;
}
.input-num span {
height: 100%;
border: 1px solid gray;
flex: 1;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<!-- 计数器 -->
<div class="input-num">
<button @click="minus" :disabled="minusDisabled" >
-
</button>
<span>{{ num }}</span>
<button @click="add" :disabled="addDisabled">
+
</button>
</div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
num: 0,
minusDisabled: true,
addDisabled: false
},
methods: {
add: function () {
//(1)只要点击了+号, 就要启用 - 号
this.minusDisabled = false;
//(2)数字+1
this.num++;
//(3)限制最大数字为10
if (this.num == 10) {
this.addDisabled = true;
};
},
minus: function () {
//(1)只要点击了-号, 就要启用 + 号
this.addDisabled = false;
//(2)数字-1
this.num--;
//(3)限制最小数字为0
if (this.num == 0) {
this.minusDisabled = true;
};
},
},
})
</script>
</body>
</html>
1.6.2-计数器优化版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
.input-num {
width: 180px;
height: 40px;
border: 1px solid gray;
display: flex;
border-radius: 5px;
overflow: hidden;
}
.input-num button {
width: 50px;
height: 100%;
font-size: 25px;
color: gray;
cursor: pointer;
}
.input-num span {
height: 100%;
border: 1px solid gray;
flex: 1;
text-align: center;
line-height: 40px;
}
.input-num button.disabled {
cursor: not-allowed;
color: #ccc;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<!-- 计数器 -->
<div class="input-num">
<button @click="num--" :disabled="num==0" :class="{disabled:num==0}">
-
</button>
<span>{{ num }}</span>
<button @click="num++" :disabled="num==10" :class="{disabled : num==10}">
+
</button>
</div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
num: 0,
}
})
</script>
</body>
</html>
案例验收
问题1:原生dom语法实现动态案例的思路?
传统DOM思维
(1)获取元素:按钮和span
(2)注册事件
(3)修改元素的文本innerText
问题2:vue语法实现动态案例思路?
Vue思维:数据驱动
(1)思维案例需要什么数据 : 数量count
(2)注册事件
(3)使用插值或指令 修改数据
1.7-v-for指令(列表渲染)
- v-for指令官方文档传送门:https://cn.vuejs.org/v2/guide/list.html
- 遍历数组语法:
v-for="(value,index) in arr"
- value:数组元素
- index:数组下标
- 遍历对象语法:
v-for="(value,key,index) in obj"
该语法使用较少,了解即可
- value:对象属性值
- key:对象属性名
- index:下标
- 遍历数组语法:
<!--
1.学习目标: v-for 指令
2.学习路线
(1)作用:遍历数组,并重复生成对应长度的相同标签
(2)语法: v-for="item in 数组名"
遍历下标: v-for="(item, index) in items"
(3)细节: 这个指令写在哪一个元素身上,就重复生成哪一个元素
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<li v-for="(item,index) in list" @click="doClick(item)">
这是第{{index}}个li元素: {{ item }}
</li>
</div>
<!--
1.学习目标: v-for 指令
2.学习路线
(1)作用:遍历数组,并重复生成对应长度的相同标签
(2)语法: v-for="item in 数组名"
遍历下标: v-for="(item, index) in items"
(3)细节: 这个指令写在哪一个元素身上,就重复生成哪一个元素
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list:[
'小明',
'小强',
'小花',
'小坤',
'小老弟'
]
},
methods: {
doClick:function(item){
alert(item);
}
},
})
</script>
</body>
</html>
知识点验收
- 问题1:请说出v-for指令的作用
- 列表渲染:根据数组元素,重复与渲染元素
- 问题2:请说出v-for指令使用时的注意点?
- 写在谁身上,就对谁生效
1.8-v-model指令(双向数据绑定)
1.8.1-双向数据绑定基本使用
- v-model指令官方文档传送们:https://cn.vuejs.org/v2/api/#v-model
v-model只能用于表单元素!
v-model只能用于表单元素!
v-model只能用于表单元素!
- 双向数据绑定
- 表单元素的值进行了修改,这个变量的值也会跟着修改
- 这个变量的值进行了修改,表单元素的值也会跟着修改
<!--
1.学习目标 : v-model 指令
2.学习路线
(1)作用 : 双向数据绑定
a. 表单元素的值进行了修改,这个变量的值也会跟着修改
b. 这个变量的值进行了修改,表单元素的值也会跟着修改
(2)语法: v-model="变量名"
(3)注意点:
a. v-model只能用于表单元素
b. 变量名要定义在data对象中
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
span{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<input type="text" v-model="name">
<p>我的名字是: <span>{{ name }}</span></p>
<button @click="doClick">点我修改model</button>
</div>
<!--
1.学习目标 : v-model 指令
2.学习路线
(1)作用 : 双向数据绑定
a. 表单元素的值进行了修改,这个变量的值也会跟着修改
b. 这个变量的值进行了修改,表单元素的值也会跟着修改
(2)语法: v-model="变量名"
(3)注意点:
a. v-model只能用于表单元素
b. 变量名要定义在data对象中
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
name:''
},
methods: {
doClick:function(){
this.name = '坤坤';
}
},
})
</script>
</body>
</html>
1.8.2-双向数据绑定的意义
- 双向数据绑定的意义
- 可以让我们
快速
的得到
表单元素的值 - 可以让我们
快速
的设置
表单元素的值- 双向绑定技术的底层原理是:js属性拦截
- 对双向数据绑定原理感兴趣的可以课后了解一下哈:JS双向数据绑定原理
- 可以让我们
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
登陆框: <input type="text" v-model="username" placeholder="请输入用户名">
<br>
密码框: <input type="password" v-model="password" placeholder="请输入密码">
<br>
<button @click="loginClick">登录</button>
</div>
<!--
1.学习目标:了解双向数据绑定的意义
可以让我们快速 (得到 | 设置) 表单元素的值
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
username:'',
password: ''
},
methods: {
loginClick:function(){
//修改了表单元素 -> 修改了password
if(this.password != '123456'){
alert('密码错误,请重新输入');
//修改password -> 修改了表单元素的值
this.password = '';
}
}
},
})
</script>
</body>
</html>
双向绑定v-model
- 修改表单的值,data的数据会自动变化
- 修改data的数据,表单值也会变化
- v-model绑定的数据一定要在data中声明
- v-model只能用于表单元素
1.9-综合案例:记事本
- 本案例涉及到的前置知识点
arr.splice()
: 删除元素- 第一个参数,从第几个下标开始删除
- 第二个参数:要删除几个元素
- 例如:
arr.splice(2,1)
删除下标为2的元素
<!--思路分析(交互)
1.输入框输入enter键,将数据添加到列表
2.双击列表li元素删除
Vue编程思维
* (1)写页面结构 HTML+CSS
* (2)分析页面需要显示什么数据,将其保存在vue实例的data对象中
* 表单的值 : v-model双向数据绑定 msg
* enter键事件: v-on 绑定enter键事件
* 数据添加到列表: v-for 渲染列表 list
* 双击列表删除: v-on 绑定双击事件,移除list元素
* (3)在页面视图中使用插值语法或者指令显示data中的数据
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
<style>
h2 {
text-align: center;
}
body {
text-align: center;
}
input {
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 22px;
padding-left: 10px;
outline: none;
border: 1px solid #000;
}
.items {
list-style: none;
padding: 0;
width: 300px;
margin: 0 auto;
text-align: left;
}
table,th,td,tr {
width: 600px;
margin: 50px auto;
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
transition: all 0.5s linear;
}
tr.over{
background-color: cyan;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<h2>小黑记事本</h2>
<input type="text" placeholder="请输入内容(双击删除)" v-model.trim="msg" @keydown.enter="add" />
<table>
<thead>
<th>索引</th>
<th>内容</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{ index+1 }}</td>
<td>{{item}}</td>
<td><button @click="delClick(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<!--思路分析(交互)
1.输入框输入enter键,将数据添加到列表
2.双击列表li元素删除
Vue编程思维
* (1)写页面结构 HTML+CSS
* (2)分析页面需要显示什么数据,将其保存在vue实例的data对象中
* 表单的值 : v-model双向数据绑定 msg
* enter键事件: v-on 绑定enter键事件
* 数据添加到列表: v-for 渲染列表 list
* 双击列表删除: v-on 绑定双击事件,移除list元素
* (3)在页面视图中使用插值语法或者指令显示data中的数据
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '',
list: []
},
methods: {
add: function () {
//1.添加记录(修改输入框文本,msg也会变化)
this.list.push(this.msg);
//2.清空输入框内容方便下一次输入(修改msg,输入框文本也会变化)
this.msg = '';
},
delClick: function (index) {
//1.事件传参 获取要删除的内容下标
alert(`您要删除第${index+1}条记录`);
//2.使用数组splice方法删除指定下标元素
//第一个参数:从第几个下标开始删除 第二个参数:要删除的个数
this.list.splice(index, 1);
}
},
})
</script>
</body>
</html>
03vue代码提示插件安装
-
1.vue代码错误提示插件:
Vetur
-
2.vue代码块提示插件:·
Vue 2 Snippets