网站空间可以自己做服务器,广州市网站建站,餐饮vi设计网站,北京网站建设哪个好vue基本语法1. 前言2. 数据绑定v-bind3. v-if || v-else-if || v-else 条件判断4. v-for 循环5. v-on 元素监听事件1. 前言 vue语法#xff0c;基本照着官网的来的#xff0c;也有一些看了b站某kuang的视频#xff0c;受了些启发。 div idapp// 取dat… vue基本语法1. 前言2. 数据绑定v-bind3. v-if || v-else-if || v-else 条件判断4. v-for 循环5. v-on 元素监听事件1. 前言 vue语法基本照着官网的来的也有一些看了b站某kuang的视频受了些启发。 div idapp// 取data 中show标签的值label{{ show }}/label /divnew Vue({// 根据id获取对应的元素el: #app1,data: {// 数据存放的地方show为自定义标签show: bitQian adorable..} })2. 数据绑定v-bind 可以动态的给页面元素绑定数据数据写在data自定义标签中。 页面元素使用v-bind语法绑定html的属性。 !-- 给label标签设置标题 -- div idapp1label v-bind:titleshowhello vue.js/label /divnew Vue({el: #app1,data: {show: bitQian adorable..} })在生产中也可以在组件循环中绑定值绑定a标签的href属性等等 3. v-if || v-else-if || v-else 条件判断 if-else div idappspan v-ifokok/spanspan v-elsebad/span /divnew Vue({el: #app,data: {ok: 11} });if else if else 组合type的bool判断通过三个等号 div idapp1span v-iftypeAA/spanspan v-else-iftypeBB/spanspan v-elseC/span /divnew Vue({el: #app1,data: {type: A} });4. v-for 循环 item是每一项items对应data里面的items div idapp3span v-foritem in itemsitem: {{ item }}, id: {{ item.id }}, name: {{ item.name }} br//span /divlet app3 new Vue({el: #app3,data: {// items表示一个数组里面装了两个人items: [{id: 1, name: jack},{id: 2, name: rose}]} });5. v-on 元素监听事件 简单来说就是给元素绑定js事件如点击鼠标悬浮键盘触发事件等 这里以点击事件绑定展示反转消息 !-- v-on 绑定方法 -- div idapp3p{{ message }}/p!-- click为点击事件也可根据场景换成其它事件 --input typebutton v-on:clickreverseMessage valuereverse /divnew Vue({el: #app3,data: {message: hello world!},methods: {reverseMessage: function () {// 当我点击按钮时显示在p标签里面的hello world!反转this.message this.message.split().reverse().join()}} });