Vue 基础语法_Training.L

irpas 02-07 4318

Vue 基础语法 1.v-bind2.条件渲染3.列表渲染4.绑定事件5.双向数据绑定6.组件的使用【狂神说Java】Vue最新快速上手教程通俗易懂笔记：Vue 基本语法、Vue 绑定事件、Vue 双向绑定、Vue 组件讲解。

1.v-bind

v-bind 主要用于属性绑定。示例如下：

<body> <div id="app"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ message:"页面加载于" + new Date().toLocaleString() } }) </script>

这里看到的 v-bind 被称为指令，指令带有前缀 v-，以表示他们是 Vue 提供的特殊特性，可能你已经猜到了，它们会在渲染 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 属性和 Vue 实例的 message 保持一致。”

2.条件渲染

v-if 指令用于条件性地渲染一块内容。

<div id="app"> <div v-if="happy">我非常高兴!</div> <div v-else>哦不，我现在很心烦.</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ happy: true, } }) </script>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app"> <div v-if="score >= 90">优秀</div> <div v-else-if="score >= 80">良好</div> <div v-else-if="score >= 70">一般</div> <div v-else-if="score >= 60">及格</div> <div v-else>不及格</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ score: 75, } }) </script> 3.列表渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是原数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> </head> <body> <div id="app"> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr v-for="item in items"> <td>{{item.user}}</td> <td>{{item.age}}</td> <td>{{item.gender}}</td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ items: [ { user:'张三', age: 18, gender: '男' }, { user:'李四', age: 24, gender: '女' }, { user:'王五', age: 25, gender: '男' }, ] } }) </script> </body> </html>

v-for 还支持一个可选的参数，即当前项的索引 index。

<table> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr v-for="(item, index) in items"> <td>{{index}}</td> <td>{{item.user}}</td> <td>{{item.age}}</td> <td>{{item.gender}}</td> </tr> </table>

4.绑定事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例如下：给按钮绑定一个点击事件，点击按钮弹出提示语。

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://·ponent("topbar",{ props: ['data'], template: '<li>{{data}}</li>' }); var vm = new Vue({ el:"#app", data:{ items: ["Java", "Linux", "前端", "Python"] } }) </script>

说明：

v-for="item in items"：变量 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件；v-bind:data="item"：将遍历的 item 项绑定到组件中 props 定义的名为 data 属性上；= 号左边的 data 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值。