當前位置：
首頁 >
Vue入门 ---- 简易留言板
發布時間：2025/3/15
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Vue入门 ---- 简易留言板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
##簡述
初學vue，比Angular要簡單易學一點，基本就是html代碼+json。這是第一個小的例子，用到了vue的幾個常用方法，其中v-for的$index稍微有點迷惑，也影響了完成的速度，網上說是vue2.0已經取消了這種用法，也不是很明白，跟著教程走的，后面的教程有講解vue2.0的新特性，所以到后面完善吧。同時復習到了bootstrap的知識，之前知識稍微用過，現在才漸漸的明白這種css框架的內涵—賦class和角色role，bootstrap依賴于jQuery，所以庫文件也要有jQuery的文件，而bootstrap.js主要提供各種組件，諸如模態框之類的。
注：不要弄混v-model和模態框的modal
##基本知識：
vue
bootstrap:
//class .container（外部容器） .fade（從上滑入） .data-toggle和.data-target（處理模態框） .text-muted（文本灰色） //role form dialog modal-dialog##配置庫文件
<!-- 引入bootstrap.min.css --><link rel="stylesheet" href="lib\bootstrap.min.css"><!-- 引入jquery --><script src="lib\jquery-3.3.1.min.js"></script><!-- 引入bootstrap.js --><script src="lib\bootstrap.js"></script><!-- 引入vue.js --><script src="lib\vue.js"></script>##Script
<script>window.onload = function() {new Vue({el: '#box',// 注意這里面的內容為json，不要出現"="data: {myData: [],username: '',age: '',nowIndex: -100,deletemsg: '',},methods: {add: function() {this.myData.push({name: this.username,age: this.age,});this.username = '';this.age = '';},deleteMsg: function(n) {if (n == -1) {this.myData = ''; };this.myData.splice(n, 1);}},})}</script>兩個方法：add()，添加數據；deleteMsg()，刪除數據
##html
##效果
總結
以上是生活随笔為你收集整理的Vue入门 ---- 简易留言板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AJAX ControlToolkit学
- 下一篇： avue下拉框中属性可以显示，但不能选中