经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
后端狗的Vue学习历程(一) - demo示例与基本逻辑语法
来源:cnblogs  作者:lunarche  时间:2020/11/16 10:25:09  对本文有异议

源码: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.cnblogs.com/lunarche/p/13965752.html

 友情链接: NPS  问卷模板