文章目录
Vue基础语法
05、Vue：插值表达式
- 语法: {{数据对象中的属性|运算表达式}}
demo_01.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<!-- 引入Vue -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- View 视图 -->
<div id="app">
{{message}}
<br/>
<!-- 插值表达式: 算术运算符 -->
{{x + 200}}
<br/>
<!-- 插值表达式: 三目运算符 -->
{{x > 50 ? '大于50' : '小于50'}}
</div>
<!-- Vuejs代码 -->
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 指定Vue渲染的html元素 element
data : { // 数据对象 Model
message : 'Vuejs入门到精通...',
x : 100
}
});
</script>
</body>
</html>
06、Vue：数据绑定指令
目标: 掌握v-model指令的使用
-
作用:【双向绑定】
v-model绑定html元素的value值到data对象，data对象中的属性又可以绑定到html元素的value。
-
语法: v-model=”数据对象中的属性名” 或 v-model=”数据对象中的属性名.变量名”
-
开发API：https://cn.vuejs.org/v2/api/
- 核心代码：
demo_02.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs数据绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：<input type="text" v-model="name"/><br/>
年龄：<input type="text" v-model="user.age"/><br/>
性别：<input type="text" v-model="user.sex"/><br/>
<hr/>
姓名：{{name}} 年龄：{{user.age}} 性别：{{user.sex}}
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先初始化)
name : '周星星',
user : {
age : '18',
sex : '男'
}
}
});
</script>
</body>
</html>
注意：数据对象中的属性必须先定义，才能使用！
07、Vue：属性绑定指令
目标: 掌握v-bind指令的使用
-
作用:【单向绑定】
v-bind绑定html元素的属性值，只能从data对象中取属性绑定到html元素的属性值。
-
语法: v-bind:html元素的属性值=”数据对象中的属性名”
-
简写: :html元素的属性值=”数据对象中的属性名”
demo_03.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs属性绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind: 绑定html元素的属性值 -->
<font v-bind:color="color" v-bind:size="size">周星星</font>
<hr/>
<!-- 简写: html元素的属性值 -->
<font :color="color" :size="size">周小星</font>
<hr/>
<!-- 拼接多个颜色值 -->
<font :color="color1 + color2" :size="size">周大星</font>
<!-- url带参数值 -->
<a :href="'http://www.baidu.com?id='+ id">百度</a>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先初始化)
color : 'red',
color1 : 'yellow',
color2 : 'green',
size: 10,
id : 100
}
});
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48FNqbyz-1613908156886)(assets/image-20200810112546890.png)]](https://img-blog.csdnimg.cn/20210221195220149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkxNDk4OQ==,size_16,color_FFFFFF,t_70)
点击上图百度超链接：
08、Vue：事件处理之事件指令
目标: 掌握vuejs的事件指令使用
- 作用: 为html元素绑定事件
- 语法: @click=”函数名()” @html元素的事件名把前面的on去掉
- 说明: 过时写法：v-on:click=”函数名()”， 此写法在Vue.js 1.x版本中使用，2.x版本中推荐使用@click
常用事件指令:
- @click：单击事件
- @blur：失去焦点事件
- @keyup：键盘按键按下并松开事件
- @focus：获取焦点事件
- @change：对应onchange改变事件
- @keydown：键盘按键按下事件
- @keypress：同上
- @mousedown：鼠标按下事件
- @mouseup：鼠标按下弹起事件
- @mouseenter：鼠标进入事件
- @mouseleave：鼠标离开事件
- @mouseover：鼠标进入事件
demo_04.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs事件绑定</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model.number : 指定x变量的数据类型 -->
x值：<input type="text" v-model.number="x" @keyup="keyup()"/><br/>
y值：<input type="text" v-model.number="y" @blur="blur()"/><br/>
<input type="button" @click="calc()" value="计算一"/>
<!--
@事件名 这种方式绑定事件在Vue2.0推荐使用
过时的事件绑定(了解 1.x版本)
v-on:事件名 已放弃
-->
<input type="button" v-on:click="calc()" value="计算二"/>
<hr/>
{{count}}
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象(必须先定义，才能使用)
x : '',
y : '',
count : ''
},
methods : { // 事件方法
calc() {
this.count = this.x + this.y;
},
keyup() {
alert(this.x);
},
blur() {
alert(this.y);
}
}
});
</script>
</body>
</html>
注意：
1、v-model.number=”x”绑定数据时指定x变量的数据类型。(默认都是字符串类型)
2、触发事件调用的方法，必须在vue实例中的methods里定义
09、Vue：事件处理之事件修饰符（了解）
目标: 掌握事件修饰符的使用
- 语法: 事件指令.事件修饰符。
- 例如: @submit.prevent 或 @click.stop
事件修饰符概述
- Vue.js为绑定事件提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。
- Vue.js通过由点(.)表示的指令后缀来调用修饰符。
- .stop 阻止事件传播(冒泡)
- .prevent 取消事件默认行为
demo_05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs事件修饰符</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- @submit.prevent: 取消事件默认行为 -->
<!-- onsumbit事件的默认行为就是跳转到京东-->
<form @submit.prevent action="http://www.jd.com" method="get">
<input type="submit" value="请求京东"/>
</form>
<div @click="fun1()">
<!-- @click.stop: 阻止事件传播(冒泡) -->
<a @click.stop href="http://www.itcast.cn">itcast</a>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
methods : { // 方法
fun1 () {
alert('22');
}
}
});
</script>
</body>
</html>
10、Vue：事件处理之按键修饰符
目标: 掌握按键修饰符的使用
- 语法: 事件指令.按键修饰符=”函数名()” 【只针对按键相关事件有效】
- 例如: @keydown.enter=”fun1()” 或 @keyup.enter=”fun1()”
- 典型应用场景：按回车（即enter键）进行表单提交
Vue.js允许在绑定事件时可以指定具体的按键事件，按键别名:
- .enter (回车键)
- .tab (Tab键)
- .delete (捕获 “删除” 和 “退格” 键)
- .esc (Esc键)
- .space (Space键)
- .up (向上键)
- .down (向下键)
- .left (向左键)
- .right (向右键)
- .ctrl (Ctrl键)
- .alt (Alt键)
- .shift (Shift键)
demo_06.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs按键修饰符</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 判断按下了什么键才触发事件：
@keydown.enter: 按下了回车键
$event: Vue事件对象
-->
姓名：<input type="text" @keydown.enter="fun1($event)"/>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
methods : {
fun1 (e) {
alert('按下了回车键！' + e.keyCode);
}
}
});
</script>
</body>
</html>
说明：$event为Vue.js的事件对象它封装了(dom的event对象)。
$event.keyCode: 获取按键代号。
11、Vue：数据迭代指令
目标: 掌握v-for迭代指令的使用
- 作用: v-for 迭代数组 或 json对象
11.1 迭代数组
语法: v-for="item in 数组" 或 v-for="(item,index) in 数组"
demo_07.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs迭代指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 迭代数组 -->
<li v-for="(item,index) in dataList">
索引号：{{index}} === 数组元素：{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
data : {
dataList : [100,200,300,400,500]
}
});
</script>
</body>
</html>
11.2 迭代对象
语法：v-for="(value,key) in 对象"
demo_08.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs迭代指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 迭代对象 -->
<li v-for="(value,key) in user">
{{key}} = {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
user: {
name : "张三",
age : 18,
sex : "男"
}
}
});
</script>
</body>
</html>
11.3 迭代对象数组
语法：v-for="item in 对象数组” 或 v-for=”(item,index) in 对象数组"
demo_09.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs迭代指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<!-- 迭代对象数组 -->
<tr v-for="(u, index) in users">
<td>{{index + 1}}</td>
<td>{{u.name}}</td>
<td>{{u.sex}}</td>
<td>{{u.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data: { // 数据对象
// 定义数组对象
users: [
{
name: "张学友",
age: 58,
sex: "男"
},
{
name: "刘德华",
age: 60,
sex: "男"
},
{
name: "郭富城",
age: 59,
sex: "男"
}
]
}
});
</script>
</body>
</html>
12、Vue：v-text&v-html指令
目标: 掌握v-text|v-html指令的使用
-
v-text: 为html元素添加text相当于innerText (原样输出)
语法: <html标签名 v-text=”数据对象中的属性名”></html标签名>
-
v-html: 为html元素添加html相当于innerHTML (格式化输出)
语法: <html标签名 v-html=”数据对象中的属性名”></html标签名>
demo_10.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs文本指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
message : "<h1>html标签</h1>"
}
});
</script>
</body>
</html>
13、Vue：v-if&v-show指令
目标: 掌握如何控制html元素显示或隐藏
-
v-if: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
语法：<html标签名 v-if=”true|false”></html标签名>
-
v-show: 控制html元素是显示还是隐藏(true:显示、false:隐藏)
语法：<html标签名 v-show=”true|false”></html标签名>
不同之处:
- v-if: 显示(插入该html元素)、隐藏(删除该html元素)
- v-show: 显示(删除style的display)、隐藏(设置style=”display:none”)
demo_11.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs显示与隐藏</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="flag">我可是最牛div层一</div>
<div v-show="flag">我可是最牛div层二</div>
<input type="button" @click="toggle()" value="开关"/>
</div>
<script type="text/javascript">
var vue = new Vue({
el : '#app',
data : {
flag : true
},
methods : {
toggle : function () {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
14、Vue：条件指令
目标: 掌握条件指令的使用
- v-if: 条件成立输出该html标签中的内容。
- v-else-if: 如果v-if条件不成立，才会判断该条件，如果条件成立输出该html标签中的内容。
- v-else: 如果v-if或v-else-if条件不成立，输出该html标签中的内容。
demo_12.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs条件指令</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if / v-else-if / v-else -->
<div>
<span v-if="sex == 1">男</span>
<span v-else-if="sex == 2">女</span>
<span v-else>保密</span>
</div>
<!-- v-if / v-else-if -->
<div>
<span v-if="sex == 1">男</span>
<span v-else-if="sex == 2">女</span>
</div>
<!-- v-if / v-else -->
<div>
<span v-if="sex == 1">男</span>
<span v-else>保密</span>
</div>
</div>
<script type="text/javascript">
// 创建Vue实例
var vue = new Vue({
el : '#app', // 渲染的html元素
data : { // 数据对象
sex: "1"
}
});
</script>
</body>
</html>
Memorial Day is 509 days |
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
