编程知识 cdmana.com

后端狗的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&.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4715010

Scroll to Top