后端狗的Vue学习历程(一) – demo示例与基本逻辑语法

  • A+
所属分类:Web前端
摘要

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

源码: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>