01-Vue介绍
-
==学习Vue最好的方式：查看官网文档==
| Vue介绍 | 描述 |
|---|---|
| 1.Vue是一个JavaScript框架 | 框架：别人写好的代码文件 |
| 2.作用 ： 构建用户页面 | 将数据渲染到页面 |
| 3.特点：渐进式 | 自助餐。vue提供了非常多的功能，开发者按需所取 |
-
1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
-
Vue是一个
JavaScript框架-
Vue是一个用于
构建用户页面的框架-
Vue是一个用于构建用户界面得
渐进式框架
-
-
-
-
2.渐进式框架介绍
-
a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的
-
类似于Nodejs,拆分成很多个小模块
-
-
b. 在项目中我们用到什么，就导入什么
-
这样可以保证我们用到的最少
-
-
c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源
-
小结
1.Vue是什么？
答案
2.Vue干什么用的?
答案
02-MVVM框架了解
1.库和框架区别
-
1.库（Library）：本质上是一些函数的集合。每次调用函数，实现一个特定的功能。
-
例如：axios、moment
-
使用库的时候，把库当成工具使用，调用函数即可
-
-
2.框架（Framework）：由很多个库组成的一套完整的解决方案
-
例如： vue、react
-
-
3.库和框架区别
-
如果说库是一台电脑的某一个零部件，比如显卡、显示器。那么框架就是一整台组装好的电脑。
-
使用库的时候会更加的自由，但是使用框架的话就需要按照框架的规则写代码，限制非常多但是同时框架的功能也更加的强大，可以极大的提升开发效率
-
一个最直接的例子就是： axios库和moment库你的项目可以都用也可以都不用，但是vue框架和react框架你的项目只能选一个。 使用了vue框架就不能使用react框架。
-
-
2.vue是MVVM设计模式的框架
-
MVVM设计模式：一种软件架构模式，决定了写代码的方式。
-
M：model数据模型(ajax获取到的数据)
-
V：view视图（页面）
-
VM：ViewModel 视图模型(vue实例)
-
-
MVVM通过
数据双向绑定让数据自动地双向同步 不在需要操作DOM-
V（修改视图） -> M（数据自动同步）
-
M（修改数据） -> V（视图自动同步）
1. 在vue中，不推荐直接手动操作DOM！！！
2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！
-
03-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 }}
</div>
<script>
/* 3.初始化vue实例 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)app是调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
//el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
el: '#app',
//data: 要渲染的数据
/* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
data: {
message: 'Hello Vue!',
name:'坤哥',
age:32,
}
})
</script>
</body>
</html>==知识点验收==
-
问题1：请说出使用vue框架的三个流程
-
问题2：如果没有设置vue挂载点el，会导致什么后果？
-
问题3：如果没有设置vue的数据data,会导致什么后果？
04-Vue的挂载点介绍
-
el挂载点官方文档传送门：API — Vue.js
-
1.挂载点
el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图 -
2.
注意点-
(1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器
-
开发中基本上都是id选择器，保证HTML标签唯一性
-
如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
-
-
(2)如果选择器选中了多个元素，只会选择第一个元素
-
(3)挂载点不能设置为html和body标签 （程序报错）
-
(1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器
(2)如果选择器选中了多个元素，只会选择第一个元素
(3)挂载点不能设置为html和body标签 （程序报错）
*/
el: '#hm',
//data: 要渲染的数据
/* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
知识点验收
问题1：vue的挂载点el作用是什么？
设置挂载点： 告诉vue，数据渲染到哪个元素上
问题2：vue的挂载点使用什么选择器最好？ 为什么？
id选择器 ： 具有唯一性。 类选择器和标签选择器如果选中多个元素，vue只会渲染第一个
问题3：vue的挂载点el不能给什么标签设置？
body,html
05-Vue的插值表达式
-
插值表达式(模板语法)官网文档传送门：模板语法 — Vue.js
-
1.插值表达式作用
-
使用data中的数据渲染视图(模板) -
在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置
-
-
2.插值表达式语法:
{{ 表达式 }}
-
3.关于插值表达式一些
注意点-
基本语法, 支持三元运算符
{{ name }} {{ list[1] }} {{ list.join() }} {{ age > 18 ? '成年' : '未成年' }}
-
vue中插值表达式的注意点
(1) 使用的数据在 data 中要存在
<h1>{{ gaga }}</h1>(2) 不支持分支和循环
<h1>{{ if age > 18 ) { } }}</h1>(3) 不能写在元素行内
<h1 id="box" class="box" title="{{ name }}"></h1>
-
<!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">
<p>数据： {{ name }}</p>
<p>二元： {{ age + 1 }}</p>
<p>三元： {{ age > 30 ? '大叔' : '欧巴' }}</p>
<p>数组： {{ list[1] }}</p>
<p>方法: {{ list.join() }}</p>
<p>对象： {{ data.title }}</p>
</div>
<script>
/* 3.初始化配置 */
let app = new Vue({
//el: 挂载点
el: '#app',
//data: 数据
/*
(1) {{ }} : 插值表达式，也叫胡子语法
(2) 插值表达式作用：使用data数据渲染到视图(模板)
(3) 支持二元、三元、数组、对象语法
(4) 不支持分支与循环
(5) 不能写在元素行内
*/
data: {
name: '坤哥',
age: 32,
list:['代码','学生','咖啡'],
data:{
title:'黑马程序员'
}
}
})
</script>
</body>
</html>06-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> | 无 |
-
Vue指令官网文档传送门：API — Vue.js
-
1.Vue指令的
本质是： Vue为HTML标签新增的一些属性,-
a. 每一个HTML标签都有自己的原生默认属性
-
HTML标签的每一个属性都有自己独特的功能
-
例如 img标签的src属性，a标签的href属性
-
-
b. Vue认为,HTML标签原生的属性还不够用，所以Vue为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： 指令的本质是什么？
自定义属性
07-v-text指令
-
v-text指令官方文档传送门：API — Vue.js
<!--
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： v-text指令作用是什么？
-
设置元素的innerText
-
-
问题2： v-text指令与差值语法 {{ }}的区别是什么？
08-v-html指令
-
v-html指令官方文档传送门：API — Vue.js
<!--
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：v-html指定作用是什么？
问题2：v-html指令与v-text指令区别是什么？
09- v-on指令(绑定事件)
-
v-on指令官方文档传送门:API — Vue.js
<!--
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() {
alert('我被点击了')
},
doEnter() {
console.log('鼠标移入我了')
},
doLeave() {
console.log('鼠标移出我了')
}
},
})
</script>
</body>
</html>==知识点验收==
-
问题1：v-on指令的作用是什么？
-
给元素绑定事件
-
-
问题2： v-on指令有几种写法？
-
两种写法
-
标准写法 v-on:事件名 = "事件处理函数"
-
简洁写法 @事件名 = "事件处理函数"
-
-
-
问题3： v-on指令使用时需要注意什么问题？
-
事件名不要on, click mouseenter
-
事件处理函数写在methods
-
10- v-on事件修饰符
-
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.com">
<button @click.prevent="doSubmit">点我啊</button>
</form>
<!-- 输入框 ： enter键 -->
<!-- <input type="text" @keyup.13="doUp"> -->
<!-- 用enter,易读 -->
<input type="text" @keydown.enter="doEnter">
</div>
<!--
1.学习目标 ： 事件修饰符
2.学习路线
a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
b.语法： @事件名.修饰符 = "方法名"
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
},
//method:注册事件的方法名
methods: {
fatherClick () {
console.log('我是父元素');
},
sonClick () {
console.log('我是子元素');
},
doSubmit () {
console.log('提交按钮');
},
doEnter(){
console.log('按了enter键')
}
},
})
</script>
</body>
</html>==知识点验收==
-
问题1： 如何绑定enter键事件？
-
@keyup.enter
-
-
问题2： 如何阻止事件冒泡？
-
@click.stop
-
-
问题3： 如何阻止事件默认行为？
-
@click.prevent
-
11- vue方法中的this
-
1.vue事件方法中的this指向 ：
vue实例 -
2.vue事件方法中访问data对象中的成员 :
this.属性名-
vue会将data对象与methods对象中的成员
平铺到 vue实例中
-
-
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 () {
console.log(this)
//在这个事件中，如何获取data里面的成员呢？
//console.log(this.data.msg);//报错 无法获取
console.log(this.msg)// vue会将data与methos中的成员 平铺到vue实例中
this.msg = '爱你么么哒'
},
doClick1 () {
this.age++
}
},
})
</script>
</body>
</html>==知识点验收==
-
问题1：在vue的事件处理函数methods中，我们可能会经常使用
this这个关键字，请说出vue事件处理函数中的指向谁？-
this指向vue实例对象
-
访问data成员: this.属性名
-
原因： vue会平铺data与methods成员到vue实例中
-
-
-
问题2：如果在vue的methods中使用了箭头函数，则此时this会指向谁？为什么？
-
this指向window，因为箭头函数this指向上级作用域的this。（app所在的作用域）
-
注意： vue事件处理方法不要使用箭头函数
-
12- v-on事件传参
-
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(e){
console.log(e)
},
deleteClick(id){
console.log(`id为${id}的文章被删除`);
},
editClick(e,id){
console.log(e)
console.log(id)
}
},
})
</script>
</body>
</html>13-v-bind指令
-
v-bind指令官网文档传送门：API — Vue.js
-
默认情况下，
HTML属性无法获取vue中的数据 -
如果希望
HTML属性也可以获取vue中的数据，就可以使用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>
14-v-bind样式绑定
-
class与style样式绑定官方文档传送门：Class 与 Style 绑定 — Vue.js
-
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 :style="{ width:width , height , 'background-color':bgc}"></div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
flag:true,
width:'200px',
height:'200px',
bgc:'cyan'
},
methods: {
changeClass(){
this.flag = !this.flag;
}
},
})
</script>
</body>
</html>
==知识点验收==
问题1：请说出v-bind指令作用？
* 绑定HTML属性 ： src title href class style
问题2：v-bind指令在使用时有什么需要注意的地方?
* 如果属性有-，则需要使用''引号包起来
15-案例:计数器
-
Vue编程思维: 数据驱动、数据驱动、数据驱动
-
(1)思考这个功能需要哪些数据，把数据写在在data里面
-
(2)使用插值或指令来
处理数据-
渲染数据： 插值、很多指令也有渲染功能
-
绑定事件：v-on指令
-
-
-
优化点：一般事件处理函数只有一行代码的时候，直接写在行内
-
<标签 @事件名=" 代码 "></标签>
<!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 > 0 ? num-- : num">
-
</button>
<span>{{ num }}</span>
<button @click="num < 10 ? num++ : num">
+
</button>
</div>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
num: 0,
}
})
</script>
</body>
</html>
==案例验收==
问题1：原生dom语法实现动态案例的思路？
问题2：vue语法实现动态案例思路？
问题3：vue与以前的dom语法最大的区别是什么？
16-v-for指令(列表渲染)
-
v-for指令官方文档传送门：列表渲染 — Vue.js
-
遍历数组语法：
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(item){
alert(item)
}
},
})
</script>
</body>
</html>
==知识点验收==
-
问题1：请说出v-for指令的作用
-
问题2：请说出v-for指令使用时的注意点?
17-案例：排他思想
<!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>
.active{
background-color: pink;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<button v-for="(item,index) in list" :class=" { active:currentIndex == index } " @click=" currentIndex = index ">{{ item }}</button>
</div>
<script>
/* 排他思想 ： 多个元素只能选中一个（多选一）
1.以前dom思维 ： DOM操作
(1)使用选择器找到当前选中的元素，移除类名
(2)给自己添加类名
2.vue思维 : 数据驱动(数据+指令)
(1)给data添加一个变量currentIndex记录当前选中的下标
(2)使用v-bind指令绑定样式
*/
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list:["前端学科","java学科","python学科","测试学科"],
currentIndex:0
},
//methods: 事件处理函数
methods: {
},
})
</script>
</body>
</html>
18-v-model指令(双向数据绑定)
-
v-model指令官方文档传送们：API — Vue.js
-
v-model只能用于表单元素! -
v-model只能用于表单元素! -
v-model只能用于表单元素! -
双向数据绑定
-
表单元素的值进行了修改，这个变量的值也会跟着修改
-
这个变量的值进行了修改，表单元素的值也会跟着修改
-
-
双向数据绑定的意义
-
可以让我们
快速的得到表单元素的值 -
可以让我们
快速的设置表单元素的值-
双向绑定技术的底层原理是：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(){
//修改了表单元素 -> 修改了password
if(this.password != '123456'){
alert('密码错误，请重新输入')
//修改password -> 修改了表单元素的值
this.password = ''
}
}
},
})
</script>
</body>
</html>
==知识点验收==
-
问题1：双向绑定v-model作用？
-
问题2：双向绑定v-model应用场景？
-
问题3：双向绑定v-model注意点？
19-v-model修饰符
-
官方文档：API — Vue.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.lazy="name" placeholder="请输入姓名"><br>
<p>您的姓名是:{{ name }}</p><hr>
<input type="text" v-model.number="age" placeholder="请输入年龄"><br>
<p>您的年龄是:{{ age }}</p><hr>
<input type="text" v-model.trim="score" placeholder="请输入分数">
<p>您的分数是:{{ score }}</p><hr>
</div>
<!--
1.学习目标： v-model修饰符用法
2.语法
v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）
v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)
v-model.trim : 去掉字符串首尾空格
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
name: '',
age: '',
score: '',
}
})
</script>
</body>
</html>
20-综合案例：记事本
-
本案例涉及到的前置知识点
-
arr.splice()： 删除元素-
第一个参数，从第几个下标开始删除
-
第二个参数：要删除几个元素
-
例如：
arr.splice(2,1)删除下标为2的元素
-
-
<!--Vue编程思维
* (1)分析页面需要显示什么数据，将其保存在vue实例的data对象中
* 表单的值 ： v-model双向数据绑定 msg
* enter键事件： v-on 绑定enter键事件
* 数据添加到列表: v-for 渲染列表 list
* 双击列表删除: v-on 绑定双击事件，移除list元素
* (2)在页面视图中使用插值语法或者指令显示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)分析页面需要显示什么数据，将其保存在vue实例的data对象中
* 表单的值 ： v-model双向数据绑定 msg
* enter键事件： v-on 绑定enter键事件
* 数据添加到列表: v-for 渲染列表 list
* 双击列表删除: v-on 绑定双击事件，移除list元素
* (2)在页面视图中使用插值语法或者指令显示data中的数据
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '',
list: []
},
methods: {
add () {
//1.添加记录（修改输入框文本，msg也会变化）
this.list.push(this.msg)
//2.清空输入框内容方便下一次输入（修改msg，输入框文本也会变化）
this.msg = ''
},
delClick(index) {
//1.事件传参 获取要删除的内容下标
alert(`您要删除第${index+1}条记录`)
//2.使用数组splice方法删除指定下标元素
//第一个参数：从第几个下标开始删除 第二个参数：要删除的个数
this.list.splice(index, 1)
}
},
})
</script>
</body>
</html>
Vue不常用指令
| 指令名称 | 指令作用 | 示例 | 简写形式 |
|---|---|---|---|
| v-clock | 设置元素vue加载前的默认样式 | <p v-clock>{{msg}}</p> | 无 |
| v-once | 设置元素只能被vue渲染一次 | <p v-once>{{msg}}</p> | 无 |
| v-pre | 让元素不被vue渲染 | <p v-pre>{{msg}}</p> | 无 |
1.1-v-cloak指令(了解)
-
v-cloak官网文档：API — Vue.js
<!--
1.学习目标： v-cloak指令
2.学习路线
(1)作用： 给元素设置 vue加载前 的默认css样式
(2)语法： v-cloak
* 需要在style中写css样式: [v-cloak]{ css样式 }
(3)原理：v-cloak本质是一个属性选择器，vue在完成加载后会移除这个行内属性
-->
<!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>
/* 属性选择器： [属性名]{ css样式 } */
[v-cloak]{
color: red;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
<!--
1.学习目标： v-cloak指令
2.学习路线
(1)作用： 给元素设置 vue加载前 的默认css样式
(2)语法： v-cloak
* 需要在style中写css样式: [v-cloak]{ css样式 }
(3)原理：v-cloak本质是一个属性选择器，vue在完成加载后会移除这个行内属性
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
}
})
</script>
</body>
</html>
1.2-v-once指令(了解)
-
v-once官网文档：API — Vue.js
<!--
1.学习目标： v-once指令
2.学习路线：
(1)作用： 让元素只渲染一次
(2)语法： v-once
-->
<!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-once，我的名字叫：{{ msg }}</p>
<button @click="doClick">点我改数据</button>
<p v-once>我使用了v-once，我的名字叫：{{ msg }}</p>
</div>
<!--
1.学习目标： v-once指令
2.学习路线：
(1)作用： 让元素只渲染一次
(2)语法： v-once
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
},
methods: {
doClick:function(){
this.msg = '我是黑马李宗盛!'
}
},
})
</script>
</body>
</html>
1.3-v-pre指令(了解)
-
v-pre官方文档：API — Vue.js
<!--
1.学习目标： v-pre指令
2.学习路线：
(1)作用： 让元素不被vue渲染 (说人话：让vue语法失效)
(2)语法： v-pre
(3)应用场景 ： vue教程博客，为了在网页显示某个具体的vue语法，所以就不能渲染这个元素
* 如果被vue渲染了，那用户就看不到vue的语法，只能看见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">
<p>我没有使用v-pre，我的名字叫：{{ msg }}</p>
<button @click="doClick">点我改数据</button>
<p v-pre>我使用了v-pre，我的名字叫：{{ msg }}</p>
</div>
<!--
1.学习目标： v-pre指令
2.学习路线：
(1)作用： 让元素不被vue渲染 (说人话：让vue语法失效)
(2)语法： v-pre
(3)应用场景 ： vue教程博客，为了在网页显示某个具体的vue语法，所以就不能渲染这个元素
* 如果被vue渲染了，那用户就看不到vue的语法，只能看见data里面的渲染数据了
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
},
methods: {
doClick:function(){
this.msg = '我是黑马李宗盛!'
}
},
})
</script>
</body>
</html>
扫一扫
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
