040_Vue基本语法
2021/11/20 6:10:05
本文主要是介绍040_Vue基本语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- v-bind
- v-if,v-else-if,v-else
- v-for
- v-on 监听事件
v-bind
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!
我们还可以使用v-bind来绑定元素特性!
<div id="app" v-bind:title="message">{{message}}</div>
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--View--> <!--title绑定message值--> <div id="app" v-bind:title="message">{{message}}</div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> // vue实例 // ViewModel var vm = new Vue({ // 绑定元素的ID el: "#app", // 数据对象中有一个名为message的属性,并设置了初始值 hello,vue! // Model data: { message: "hello,vue!" } }); </script> </body> </html>
你看到的 v-bind 等被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台,输入 app.message = ‘新消息’,就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
v-if,v-else-if,v-else
<div id="vue"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el: "#vue", data: { ok: true } }); </script> </body> </html>
测试:
- 在浏览器上运行,打开控制台!
- 在控制台输入vm.ok = false,然后 回车,你会发现浏览器中显示的内容会直接变成 NO
注:使用 v-* 属性绑定数据是不需要 双花括号 包裹的
<div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else-if="type==='C'">C</h1> <h1 v-else>D</h1> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> <div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else-if="type==='C'">C</h1> <h1 v-else>D</h1> </div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el: "#vue", data: { ok: true } }); var vm2 = new Vue({ el: "#app", data: { type: "A" } }); </script> </body> </html>
注:=== 三个等号在 JS 中表示绝对等于(就是数据与类型都要相等)
测试:观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化
v-for
<div id="vue"> <li v-for="item in items"> {{item.message}} </li> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <li v-for="item in items"> {{item.message}} </li> </div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el: "#vue", data: { items: [ {message: "A"}, {message: "B"}, {message: "C"} ] } }); </script> </body> </html>
注:items 是数组,item是数组元素迭代的别名。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似!
测试 :在控制台输入 vm.items.push({message: 'D'}),尝试追加一条数据,你会发现浏览器中显示的内容会增加一条 D.
v-on 监听事件
事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件,可以绑定到Vue中的methods中的方法事件!
<div id="app"> <button v-on:click="clickMe">click me</button> </div>
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <button v-on:click="clickMe">click me</button> </div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: {message: "hello vue!"}, // 方法必须定义在vue的methods对象中 methods: { clickMe: function () { alert(this.message); } } }); </script> </body> </html>
点击测试
Vue还有一些基本的使用方式,大家有需要的可以再跟着官方文档看看,因为这些基本的指令几乎我们都见过了,一通百通!掌握学习的方式!
这篇关于040_Vue基本语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用