本文详细介绍了Vue实例的属性，如`el`、`data`和`methods`，以及Vue模板的指令，包括插值表达式、内容渲染、属性绑定和事件绑定。通过实例展示了如何使用`v-on`、`v-bind`和`v-model`等指令，并提供了丰富的代码示例，涵盖了事件修饰符和双向数据绑定。文章还包含了几个练习题，帮助读者巩固所学知识。
提示： 很多都是参考官方加自己总结的 多多努力 多多加油 编译软件为vscode
Vue实例对象的常用属性与Vue模板的指令
`正文：
一、Vue实例对象的常用属性
el:'选择器’ -----要操作的页面元素
data:{}-----数据源
里面的数据以键值对形式展示
如：
data: {
count: 0,
obj: {},
arry: [],
buer: Boolean
}
methods:{}------用于定义Vue的方法
额外补充：methods属性实际为一个对象
// es6允许在大括号内 直接写入变量和函数 作为对象的属性和方法
// es6的语法允许我们在对象中定义方法时省略冒号和function关键字
let name = '來吧 '
let change = () => {
console.log('哈喽!');
}
const myDream = {
name,
change,
dream() {
console.log('嘿嘿嘿!');
}
}
myDream.change()
myDream.dream()
二、指令1(Directives）
1.插值表达式(Mustache): {{}}
{{data数据源的属性/简单的js运算}}
本质上{{}}内部放的是js代码块 当声明Vue实例并指定数据的渲染区域时 此时里面的js代码块就指向了data内的代码(大概是这样吧 哈哈)
<body>
<div id="app">
<h3>{{arry}}</h3>
<h3>{{1+1}}</h3>
<h3>{{obj}}</h3>
<h3>{{buer}}</h3>
</div>
</body>
</html>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 0,
obj: {
name: 'zs',
age: 14
},
arry: [1, 2, 3, 4, 5],
buer: true
},
})
</script>
2.内容渲染指令
v-text =“简单的js运算/data节点的属性/字符串” —不会解析标签字符串
v-html=“简单的js运算/data节点的属性/字符串” —解析标签字符串
<div id="app">
<p v-text="username"></p>
<p v-text="gender"></p>
<hr/>
<p>姓名:{{username}}</p>
<p>性別:{{gender}}</p>
<hr/>
<p v-text="info"></p>
<p v-html="info"></p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
num1: 10,
num2: 20,
hh: '<h1>来自猩猩的你</h1>'
},
})
</script>
3.属性绑定指令
属性绑定指令 用于给属性动态绑定值
v-bind可以简写为冒号
基本语法：v-bind:属性名=“属性值/简单的js运算/data节点的属性”
<body>
<div id="app">
<input type="text" v-bind:placeholder="tips">
<img :src="photo" alt="" style="width: 100px;" :title="message">
<hr/>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
tips: '請輸入用戶名',
photo: 'https://cn.vuejs.org/images/logo.svg',
index: 3,
message: 'vue圖片'
}
})
</script>
4.事件绑定指令与常用的事件修饰符
1.事件绑定指令 用来辅助程序员为DOM元素绑定事件
语法:
v-on:事件名=“函数名/函数名()/简单的语句”
注意注意:
a.绑定函数时,函数名后面的小括号可加可不加;取决于是否需要传递参数,如果需要传递参数小括号必须写!
b.绑定函数时,没有添加小括号,系统默认第一个形参为event事件对象!
c.绑定函数时,加了小括号,需要用过传入$event获取事件对象!!!
d.事件函数里,可以通过直接添加this.变量名,来获取data数据源中的变量!并且进行设置修改值!!!
简写形式
@事件名=“函数名/函数名()/简单的语句”
2.事件修饰符
vue的事件修饰符:我们在处理事件的逻辑时,有一些常用且书写固定的方法,vue觉得没有必要写的过于复杂,应该有更边界的方式快速实现;
语法:
@事件名.修饰符=“函数名/函数名()/简单语句”
a.普通事件修饰符
阻止冒泡事件传播 stop
阻止默认事件执行 prevent
一次性事件 once
b.键盘事件修饰符
left,right,up,down,ctrl,enter,tab,space,shift,alt等
或者直接写 keyCode值
c.鼠标事件修饰符
left,right,middle
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
.c1 {
color: seagreen;
font-size: 30px;
}
.c2 {
display: none;
}
.c3 {
background-color: salmon;
}
</style>
</head>
<body>
<div id="root">
<fieldset>
<legend>
<h2>事件绑定</h2>
</legend>
<button v-on:click="btnClick1">按钮1,无参</button>
<button v-on:click="btnClick2(666,'hello vue')">按钮2,有参</button>
<button v-on:click="btnClick3">无括号获取事件对象</button>
<button v-on:click="btnClick4('哈哈', $event, 100)">有小括号获取事件对象</button>
<h2>{{msg}}</h2>
<button @click="changeData" v-on:mouseleave="" @mouseenter="">点击修改data数据源</button>
<hr/>
<!-- 练习1:点击div,修改其背景色-->
<div :style="myDivS" @click="divClickChange"></div>
<!-- 练习2：鼠标移入div改变其背景色，离开div还原背景色-->
<div style="width: 230px;height: 150px;" :style="{backgroundColor:divBgc, border:'3px solid red'}" @mouseenter="enterChange" @mouseleave="leaveChange"></div>
<!--练习3: 类似导航栏效果, 点击一个选项让其文本变红字号变大, 让其他选项取消选中-->
<span :class="{c1:str1=='评价'}" @click="click1('评价')">评价</span>
<span :class="{c1:str1=='点赞'}" @click="click1('点赞')">点赞</span>
<span :class="{c1:str1=='举报'}" @click="click1('举报')">举报</span>
<!-- 练习4:点击显示/隐藏元素-->
<hr/>
<button @click="isHide = !isHide">{{isHide ? "显示":"隐藏"}}</button>
<h2 :class="{c3:true, c2:isHide}">需要显示/隐藏这个标签</h2>
</fieldset>
</div>
</body>
</html>
<script>
new Vue({
el: "#root",
data: {
msg: "今天是周四!",
myDivS: {
width: "200px",
height: "100px",
backgroundColor: "pink"
},
divBgc: "skyblue",
str1: "评价",
isHide: false
},
// 事件对应的触发函数,需要写在methods中! data是数据源不能写事件!!
methods: {
//实现函数
btnClick1() {
alert("按钮1被点击了!!!");
},
btnClick2(a, b) {
console.log("按钮2被点击了!!!", a, b);
},
btnClick3(e) {
//无小括号 默认第一个参数就是事件对象
console.log(e);
},
btnClick4(a, b, c) {
//手动传入事件对象!!!
console.log(a, b, c);
},
changeData() {
// this指代当前vue实例对象!!
this.msg = "哈哈哈哈";
},
divClickChange() {
this.myDivS = {
width: "300px",
height: "150px",
backgroundColor: "yellowgreen"
}
},
//也支持匿名函数写法
enterChange: function() {
this.divBgc = "yellow";
},
leaveChange() {
this.divBgc = "skyblue";
},
click1(s) {
this.str1 = s;
}
}
})
</script>
5.双向数据绑定指令
v-model:value 用来辅助开发者在不操作DOM元素的前提下 快速获取表单的数据
即数据源决定页面数据的变化 页面数据的变化也可以决定数据源的变化
v-model指令的修饰符：
v-model.number—自动将用户的值转换为Number类型
v-model.trim—自动过滤用户输入的首尾空字符
v-model.lazy—当鼠标离开input表单元素时更新数据
第三方layui与v-mode的l联合使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./node_modules/layui/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入张三" v-model:value="username">
<input type="text" placeholder="请输入123456" v-model:value="password">
<button @click="sub">提交</button>
</div>
</body>
</html>
<script src="../lib/vue-2.6.12.js"></script>
<script>
const layer = layui.layer;
const vm = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
sub() {
if (this.username == '张三' && this.password == '123456') {
layer.msg('登录成功')
} else {
layer.msg('登录失败')
}
this.username = ''
this.password = ''
}
},
})
</script>
总结
都是一些小练习和基础的语法哈 虽然注册csdn的时间有两年了 但这是第二次发博客 可能写的不是太好 （=-=卑微）
扫一扫
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
