Vue.js----入门 (3)----v-bind、v-on、v-model等指令以及其语法糖的用法
2024-06-19 15:21:02
文章目录
- 一、指令
- 1、v-bind指令
- 2、v-on指令
- 3、v-model指令
一、指令
1、v-bind指令
v-bind指令是用来更新HTML元素的属性，其语法糖写法为用 ： 代替v-bind
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Vue案例--南一小宝宝啊</title><style>.active {color: #ff0000;}</style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><p>{{msg}}</p><!-- 传统写法--><img v-bing:src="url"></img><a v-bind:href="url"></a><!-- 语法糖：简写--><img :src="url"></img><a :href="url">百度一下</a><!-- 添加class属性,类名后面的boolen为true则赋予class--><!-- 对象语法<h2 :class="{类名1：true,类名2：false}"></h2>--><h2 :class="{active：isActive,line：isLine}">{{msg}}</h2><button @click="btnClick">BUTTON</button><h2 :class="getClass()"></h2><!-- 数组语法--><h2 :class="[active,line]">{{msg}}</h2>
</div>
<script>const app = new Vue({el: '#app',data: {msg: 'hello!',url: 'hhhh',isActive: false,isLine: false,active: 'hh',line: 'dd'},methods: {btnClick: function () {alert("hhh")this.isActive = !this.isActive},getClass: function () {return {active: this.isActive, line: this.isLine}},get: function () {return [this.active, this.line]}}})
</script></body>
</html>（1）：v-bind动态绑定style-对象语法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Vue案例--南一小宝宝啊</title><style>.active {color: red;}</style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><!-- <p :style="{key(属性名字)：value(属性值)}">{{msg}}</p>--><!-- <p :style="{fontSize:'50px'}">{{msg}}</p>--><p :style="{fontSize:finalSize,color:finalColor}">{{msg}}</p><p :style="getStyle()">{{msg}}</p>
</div>
</div>
<script>const app = new Vue({el: '#app',data: {msg: 'hello!',finalSize: '100px',finalColor: 'red'},methods: {btnClick: function () {alert("hhh")this.isActive = !this.isActive},getClass: function () {return {active: this.isActive, line: this.isLine}},get: function () {return [this.active, this.line]},getStyle: function () {return {fontSize: this.finalSize, color: this.finalColor}}}})
</script></body>
</html>
（2）v-bind动态绑定style-数组语法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Vue案例--南一小宝宝啊</title><style>.active {color: red;}</style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><p :style="[baseStyle,baseStyle]">{{msg}}</p><p :style="getStyle()">{{msg}}</p>
</div>
</div>
<script>const app = new Vue({el: '#app',data: {msg: 'hello!',baseStyle: {backgroundColor: 'red'},baseStyle: {fontSize: '100px'}},methods: {getStyle: function () {return [[this.baseStyle, this.baseStyle]]}}})
</script></body>
</html>2、v-on指令
v-on指令是用于监听DMO事件，并在触发的时候运行一些JavaScript代码
（1）v-on基本使用及语法糖
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><button v-on:click="increment">+</button><span>{{counter}}</span><button v-on:click="decrement">-</button><!-- 语法糖--><button @click="increment">+</button><span>{{counter}}</span><button @click="decrement">-</button>
</div>
<script>const app = new Vue({el: '#app',data: {counter: 1},methods: {increment() {if (this.counter >= 0) {this.counter++}},decrement() {if (this.counter > 0) {this.counter--}}}})
</script>
</body>
</html>
（2）v-on的参数问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><!-- 1.事件调用方法没有参数--><button @click="int()">按钮一</button><button @click="int">按钮二</button><!-- 在事件定义时候,写函数时候正常传参数--><button @click="out(123)">按钮三</button><!-- 需要参数,带()了,但是没传会把undefined输出--><button @click="out()">按钮四</button><!-- 页面上的每一个操作,Vue都会自动生成一个event事件对象--><!-- 2.在事件定义时候,写函数时候省略了小括号,但是方法本身是需要一个参数的,这时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法中--><button @click="out">按钮五</button><!-- 只需要一个event对象--><button @click="xuY">按钮六</button><!-- 3.方法定义时,我们需要event对象,同时又需要其他参数此时需要写成$event--><button @click="xuYao('哈哈哈',$event)">按钮七</button>
</div>
<!--
情况一 :如果该方法不需要额外参数，那么方法后的()可以不添加。I
但是注意:如果方法本身中有一个参数，那么会默认将原生事件event参数undefined传递进去.
情况二:如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
-->
<script>const app = new Vue({el: '#app',methods: {int() {alert('被调用了')},out(abc) {alert(abc + '被调用了')},xuY(event) {alert(event + '被调用了')},xuYao(abc, event) {alert(abc + '被调用了----' + event)}}})
</script>
</body>
</html>
（3）v-on的修饰符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><title>Title</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"><!-- 1: .stop修饰符 阻止事件间的冒泡传递--><div @click="fu"><button @click.stop="zi">按钮1</button></div><!-- 2: .prevent修饰符 阻止默认事件--><form action="baiDu"><!-- 没用.prevent,点击提交按钮会自动提交有了.prevent,点击提交后会执行@click绑定的事件后再提交--><input type="submit" value="提交" @click.prevent="submitClick"></form><!-- 3:监听某个键盘按键的点击--><input type="text" @keyup.enter="keyUp"><!-- 4:.once修饰符,只允许执行一次--><button @click.once="but">按钮2</button>
</div>
<script>const app = new Vue({el: '#app',methods: {fu() {alert("父亲")},zi() {alert("儿子事件冒泡传递给")},submitClick() {alert("确认提交吗?")},keyUp() {alert('hhh')},but() {alert('点击')}}})
</script>
</body>
</html>
3、v-model指令
（1）v-model的双向绑定
<!DOCTYPE HTML>
<html lang="zn"><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>Vue 测试实例 - 南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app"><!-- 1.v-model实现双向绑定--><input type="text" v-model="msg"><!-- 2.手动实现双向绑定--><input type="text" :value="msg" @input="change"><input type="text" :value="msg" @input="msg=$event.target.value"><br><!--3.也可以是多行文本域--><textarea v-model="msg"></textarea><p>{{msg}}</p>
</div>
<script>var app = new Vue({el: '#app',data: {msg: "music"}})
</script>
</body>
</html>
（2）v-model的修饰符
lazy修饰符:
1.默认情况下, v-model默认是在input事件中同步输入框的数据的。
2.也就是说,一旦有数据发生改变对应的data中的数据就会自动发生
改变。
3.lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符:
1-默认情况下，在输入框中无论我们输入的是字母还是数字,都会被
当做字符串类型进行处理。
2-但是如果我们希望处理的是数字类型,那么最好直接将内容当做数
字处理。
3-number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符:
1-如果输入的内容首尾有很多空格，通常我们希望将其去除
2-trim修饰符可以过滤内容左右两边的空格
<!DOCTYPE HTML>
<html lang="zn"><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>Vue 测试实例 - 南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app"><!-- 1.lazy--><input type="text" v-model.lazy="msg"><p>{{msg}}</p><!-- 2.number--><input type="text" v-model.number="age"><p>{{typeof age}}</p><!--3.trim--><input type="text" v-model.trim="msg"><p>{{msg}}</p>
</div>
<script>var app = new Vue({el: '#app',data: {msg: "music",age: 18},})
</script>
</body>
</html>
（3）v-model结合radio单选框的使用
<!DOCTYPE HTML>
<html lang="zn"><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>Vue 测试实例 - 南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app"><input type="radio" id="male" value="男" v-model="sex">男<input type="radio" id="female" value="女" v-model="sex">女<p>{{sex}}</p>
</div>
<script>var app = new Vue({el: '#app',data: {msg: "music",sex: '男'},methods: {change(event) {this.msg = event.target.value}}})
</script>
</body>
</html>（4）v-model结合checkbox多选框
<!DOCTYPE HTML>
<html lang="zn"><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>Vue 测试实例 - 南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app"><!-- checkbox单选框--><label for="agree"><input type="checkbox" id="agree" v-model="isAgree">同意协议</label><p>您选择的是{{isAgree}}</p><!-- 只有选择了，才能进行下一步--><button :disabled="!isAgree">下一步</button><p>---------------------------------------</p><!-- 2.多选框--><input type="checkbox" value="篮球" v-model="hobbies">篮球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="街舞" v-model="hobbies">街舞<p>您的爱好是{{hobbies}}</p><!-- 3.input的值绑定,其实就是v-bind--><!--我们前面的value中的值,可以回头去看-下，都是在定义input的时候直接给定的。但是真实开发中,这些input的值可能是从网络获取或定义在data中的。所以我们可以通过v-bind:value动态的给value绑定值。--><label v-for="item in originHobbies" :for="item"><input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}</label><p>您的爱好是{{hobbies}}</p>
</div>
<script>var app = new Vue({el: '#app',data: {msg: "music",isAgree: false,hobbies: [],originHobbies: ['篮球', '足球', '街舞']},methods: {change(event) {this.msg = event.target.value}}})
</script>
</body>
</html>
（5）v-model结合select
<!DOCTYPE HTML>
<html lang="zn"><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>Vue 测试实例 - 南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body>
<div id="app"><!-- 1.select单选--><select name="abc" id="" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="草莓">草莓</option></select><p>您选择的是-{{fruit}}</p><!-- 只有选择了，才能进行下一步--><button :disabled="!isAgree">下一步</button><p>---------------------------------------</p><!-- 2.select多选,选择时候需要按Ctrl--><select name="abc" v-model="fruits" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="草莓">草莓</option></select><p>您的爱好是{{fruits}}</p>
</div>
<script>var app = new Vue({el: '#app',data: {fruit: '苹果',fruits: []},})
</script>
</body>
</html>
Vue.js----入门 (3)----v-bind、v-on、v-model等指令以及其语法糖的用法相关推荐
- Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- html中事件监听的使用,Vue.JS入门篇--事件监听
你可以使用 v-on 指令来绑定并监听 DOM 事件.绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式.如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数 ...
- Vue.js 入门教程
Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 A ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
原文:https://mp.weixin.qq.com/s/HWRYAR16vLE1XFep6_i1tA 松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的, ...
- Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的"入门",就算是"入门指南&quo ...
- vue.js 入门，简介
vue的源代码下载--开发版本和生产版本 https://cn.vuejs.org/js/vue.js https://cn.vuejs.org/js/vue.min.js vue中文学习官网 htt ...
最新文章
- java gui 案例_JavaGui入门—布局的嵌套使用附实例
- Udacity机器人软件工程师课程笔记（三十二) - 卡尔曼滤波器 - 一维卡尔曼滤波器 - 多维卡尔曼滤波器 - 拓展卡尔曼滤波器（EKF）
- 【极光推送】给指定用户发送消息
- Linux基础 —— 操作系统简介
- 你没有看错，爬网页数据，C# 也可以像 Jquery 那样
- 数据科学家需要掌握的10项统计技术，快来测一测吧
- 为SQL Server Always On可用性组配置托管服务帐户
- Bootstrap学习（一）：Bootstrap简介
- （6）通过输入参数（测量数据）构建三维体模型
- unknow host service.gradle.org， proxy settings in gradle
- 【 Educational Codeforces Round 51 (Rated for Div. 2) F】The Shortest Statement
- 计算机网络数据通信基础题,数据通信基础练习题(含答案)
- Unity 导入高分辨率图片
- 计算机毕业设计jspm平面设计类众包威客网网站mjmBBmysql程序
- Apollo详解之canbus模块——车辆底层协议调试
- 如何禁止拼音加加自动修改IE首页
- 计算机内存不足 无法使用,电脑内存不足怎么办,教您解决电脑内存不足
- php实现秒数倒计时,jQuery网页倒计时代码 显示天、小时、分钟与秒数
- 18个无版权（免费可商用）图片网站
- 阿拉伯字母及阿拉伯文排版规则