后端狗的Vue学习历程(一)

目录

• demo的三部分结构
• 判断：v-if、v-else-if、v-else
• 循环：v-for
• 事件绑定 v-on:eventType
• 内容输入的双向绑定v-model

源码：Github

demo的三部分结构

• 通过script src引入``vue相关js`文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 在body中的div里通过id绑定``vue`对象

<div id="app"> <!-- message output --> <h1>{{message}}</h1></div>

• 在js代码里实现对象的绑定，初始化值、成员函数已经其他在生命周期里可能存在的钩子函数。

<script> var vm = new Vue({  el: "#app",  data: {   message: "hello Vue",   ok: true,   items: [{    value: "List item 1"   }, {    value: "List item 2"   }, {    value: "List item 3"   }],   username: "",   input2: "",  },  methods: {   clickButton: function() {    this.message = "button clicked ... ";    this.ok = false;   }  }, })</script>

判断：v-if、v-else-if、v-else

<!-- if else --><h2 v-if="ok===true">Yes</h2><h2 v-else>No</h2>

循环：v-for

<!-- for loop --><ol v-for="(item, index) in items" :key="index">	<li>{{index}}--{{item.value}}</li></ol>

事件绑定 v-on:eventType

<button v-on:click="clickButton()">Click me</button>

内容输入的双向绑定v-model

在v-model.lazy情况下，更改了输入框内容后不会即时更新，而是在输入框失去焦点后更新。

<!-- v-model bind --><div> <span>input value:</span> <input type="text" v-model="username"><br> <!-- <input type="text" v-model.lazy="username"><br> --> <span> value is:</span> <label>{{username}}</label></div>

原文转载：http://www.shaoqun.com/a/489933.html

mymall：https://www.ikjzd.com/w/1050

塔图：https://www.ikjzd.com/w/2274

promoted：https://www.ikjzd.com/w/971

目录demo的三部分结构判断：v-if、v-else-if、v-else循环：v-for事件绑定v-on:eventType内容输入的双向绑定v-model源码：Githubdemo的三部分结构通过scriptsrc引入``vue相关js`文件<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><
zappos：zappos
worldfirst：worldfirst
清远漂流景点，哪些项目需要另付款？：清远漂流景点，哪些项目需要另付款？
7、8月欧洲客户都陆续休假，外贸人怎么对付淡季！：7、8月欧洲客户都陆续休假，外贸人怎么对付淡季！
广西北海小吃有哪些：广西北海小吃有哪些