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

源码:Github

demo的三部分结构
  • 通过script src引入``vue相关js`文件
  1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • body中的div里通过id绑定``vue`对象
  1. <div id="app">
  2. <!-- message output -->
  3. <h1>{{message}}</h1>
  4. </div>
  • js代码里实现对象的绑定,初始化值、成员函数已经其他在生命周期里可能存在的钩子函数。
  1. <script>
  2. var vm = new Vue({
  3. el: "#app",
  4. data: {
  5. message: "hello Vue",
  6. ok: true,
  7. items: [{
  8. value: "List item 1"
  9. }, {
  10. value: "List item 2"
  11. }, {
  12. value: "List item 3"
  13. }],
  14. username: "",
  15. input2: "",
  16. },
  17. methods: {
  18. clickButton: function() {
  19. this.message = "button clicked ... ";
  20. this.ok = false;
  21. }
  22. },
  23. })
  24. </script>
判断:v-if、v-else-if、v-else
  1. <!-- if else -->
  2. <h2 v-if="ok===true">Yes</h2>
  3. <h2 v-else>No</h2>
循环:v-for
  1. <!-- for loop -->
  2. <ol v-for="(item, index) in items" :key="index">
  3. <li>{{index}}--{{item.value}}</li>
  4. </ol>
事件绑定 v-on:eventType
  1. <button v-on:click="clickButton()">Click me</button>
内容输入的双向绑定v-model

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

  1. <!-- v-model bind -->
  2. <div>
  3. <span>input value:</span>
  4. <input type="text" v-model="username"><br>
  5. <!-- <input type="text" v-model.lazy="username"><br> -->
  6. <span> value is:</span>
  7. <label>{{username}}</label>
  8. </div>

原文链接:http://www.cnblogs.com/lunarche/p/13965752.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号