1.1-Vue指令介绍
-
Vue指令官网文档传送门：API —
-
指令的
本质是： 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/" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick"> |
|---|
src" : 原生属性，设置图片的路径 |
alt : 原生属性 ，设置图片不存在时的文本 |
title：原生属性，设置鼠标悬停文本 |
v-on:click:vue给img标签新增的属性, 给元素绑定点击事件 |
==知识点验收==
问题1： 指令是vue框架的核心功能之一，请说出指令的作用？
给标签新增一些功能
问题2： 指令的本质是什么？
自定义属性
1.2-v-text指令
-
v-text指令官方文档传送门：API —
<!--
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="./"></script>
</head>
<body>
<!-- HTML结构 -->
<div >
<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指令与差值语法 {{ }}的区别是什么？
1.3-v-html指令
-
v-html指令官方文档传送门：API —
<!-- 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="./"></script>
</head>
<body>
<!-- HTML结构 -->
<div >
<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指令区别是什么？
1.4-v-on指令（绑定事件）
1.4.1- v-on基本使用
-
v-on指令官方文档传送门:API —
<!-- 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="./"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div >
<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() {
('鼠标移入我了')
},
doLeave() {
('鼠标移出我了')
}
},
})
</script>
</body>
</html>==知识点验收==
-
问题1：v-on指令的作用是什么？
-
给元素绑定事件
-
-
问题2： v-on指令有几种写法？
-
两种写法
-
标准写法 v-on:事件名 = "事件处理函数"
-
简洁写法 @事件名 = "事件处理函数"
-
-
-
问题3： v-on指令使用时需要注意什么问题？
-
事件名不要on, click mouseenter
-
事件处理函数写在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="./"></script>
<style>
.father{
width: 300px;
height: 300px;
background-color: #f00;
}
.son{
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div >
<div class="father" @="fatherClick">
我是father
<div class="son" @="sonClick">我是son</div>
</div>
<form action="">
<button @="doSubmit">点我啊</button>
</form>
<!-- 输入框 ： enter键 -->
<!-- <input type="text" @keyup.13="doUp"> -->
<!-- 用enter,易读 -->
<input type="text" @="doEnter">
</div>
<!--
1.学习目标 ： 事件修饰符
2.学习路线
a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
b.语法： @事件名.修饰符 = "方法名"
-->
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
},
//method:注册事件的方法名
methods: {
fatherClick () {
('我是父元素');
},
sonClick () {
('我是子元素');
},
doSubmit () {
('提交按钮');
},
doEnter(){
('按了enter键')
}
},
})
</script>
</body>
</html>==知识点验收==
-
问题1： 如何绑定enter键事件？
-
@
-
-
问题2： 如何阻止事件冒泡？
-
@
-
-
问题3： 如何阻止事件默认行为？
-
@
-