vue 回车查询 按钮_从零开始学习vue
在github搜小程序我們可以看到許多用許多用vue開發的實例。
到底什么是vue，我們不妨浪費一天時間來了解一下。
一、什么是vue
Vue是一個JavaScript框架。作者是國內常年混跡知乎的一個前端大神。
它的特點是響應式的雙向數據綁定，和小程序很相似。
vue官網地址：https://cn.vuejs.org/
二、學習vue需要掌握什么基礎
1、掌握HTML/CSS/JavaScript/AJAX基礎知識
2、掌握VSCode基本操作，如果對這個工具不了解可以看我上一篇文章
三、vue入門
1、安裝vue非常簡單，只需要新建一個html，通過如下方式引入vue：
2、vue一個完整的入門案例
Vue基礎 {{ message }} var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })運行結果。可以看到div里展示的是js里面的data的值
四、el掛載點
js里有一句話：el: '.app'。意思是html里id="app"的標簽里的數據都受vue管理，可以使用{{xxx}}的方式去獲取data里的值。
el注意事項：
el元素命中的外部，不被vue管理
el元素命中的內部也被vue管理，可以被其他元素嵌套
el可以用其他選擇器，但是主要推薦用id選擇器
el支持大部分雙標簽(不支持html和body標簽)，不支持單標簽
五、data數據對象
data里的數據可以是字符串、對象、數據。
獲取具體值的方式和小程序一樣。
下面是data數據對象案例：
{{ list[0] }} {{ school }}{{ school.mobile }}
var app = new Vue({ //el: '#app', el: '.app', data: { message: 'Hello Vue!', list:['a','b','c'], school:{ "name":"大地幼兒園", "mobile":"123456" } } })六、vue常用指令
1、v-text
v-text的作用是設置標簽的內容
默認的寫法會替換全部內容
如果要部分替換，使用{{}}
快樂
快樂
{{ message }}快樂
var app = new Vue({ //el: '#app', el: '#app', data: { message: "你好中國!!!", info: "前端" } })頁面展示：
2、v-html
v-html的作用是設置語速的innerHTML
內容中有html結構會被解析成為標簽
v-text指令無論什么內容，只會被解析為文本
頁面展示：
3、v-on為元素綁定事件
v-on的作用：為元素綁定事件
事件名不需要寫on
指令可以簡寫成@
綁定的方法定義在methods屬性中
方法內部通過this關鍵字可以訪問定義在data中的數據
{{food}}
var app = new Vue({ el: '#app', data:{ food:"番茄" }, methods:{ doIt:function(){ alert("hello") }, changefood:function(){ // console.log(this.food) this.food += "炒蛋" } } })頁面展示：
4、v-show
v-show的作用：根據表達式的真假切換元素的顯示狀態
指令后面的內容，最終都會解析為布爾值
值為true元素顯示，值為false元素隱藏
數據改變之后，對應元素的顯示狀態會同步更新
頁面展示：
5、v-if
v-if作用是根據表達式的真假切換元素的顯示狀態
本質是通過操縱dom元素來切換顯示狀態
頻繁切換用v-show，反之用v-if，因為前者的切換消耗小
路飛
熱死啦
var app = new Vue({ el: '#app', data: { isShow: false, temp: 20 }, methods:{ change:function(){ this.isShow = !this.isShow; } } })頁面展示：
6、v-bind
v-bind的作用是為元素綁定屬性
完整寫法是v-bind:屬性名
簡寫的話可以省略v-bind，直接寫:屬性名
需要動態的增刪class建議使用對象的方式
7、v-for
v-for的作用是根據數據生成列表結構
數組經常和v-for結合使用
語法是(item,index) in 數據
item和index可以結合其他指令一起使用
數組長度的更新會同步到頁面上，是響應式的
8、v-on補充
事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法時需要定義形參來接收傳入的實參
時間的后面跟上 .修飾符 可以對事件進行限制
.enter 可以限制觸發的按鍵為回車
事件修飾符有多鐘
9、v-model 獲取和設置表單元素的值(雙向數據綁定)
v-model的作用是便捷的設置和獲取表單元素的值
綁定的數據會和表單元素值相關聯
綁定的元素表單元素的值
{{ message }}
var app = new Vue({ el: '#app', data: { message:"王路飛" }, methods:{ getM:function(){ alert(this.message) }, setM:function(){ this.message = "李索隆" } } })七、小案例
1、案例——計數器
功能：有左右兩個按鈕，點擊調整數字大小，超過數字最大最小值報錯
案例代碼：
- {{ num }} + var app = new Vue({ el: '#app', data:{ num:1 }, methods:{ sub:function(){ if(this.num>0){ this.num -- }else{ alert("0是最小值") } }, add:function(){ if(this.num<10){ this.num ++ }else{ alert("10是最大值") } } } })body>案例展示：
2、案例——記事本
功能：輸入框記錄后點回車保存記錄，點擊刪除按鈕刪除記錄，點擊清空按鈕清空記錄。
案例代碼：
<body> <section id="todoapp"> <header class="header"> <h1>記事本h1> <input type="text" autofocus="autofocus" autocomplete="off" placeholder="請輸入任務" v-model="inputValue" @keyup.enter="add"> header> <section class="main"> <ul> <li v-for="(item,index) in list"> <span> {{ index+1 }} span> <label>{{ item }}label> <button @click="del(index)">刪除button> li> ul> section> <footer class="footer"> <span v-if="list.length!=0"> <strong> {{ list.length}} strong> items leftspan> <br> <button @click="clear" v-if="list.length!=0"> 清空button> footer> section> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> var app = new Vue({ el:"#todoapp", data:{ list:[], inputValue:"" }, methods:{ add:function(){ this.list.push(this.inputValue); this.inputValue="" }, del:function(index){ //從第index位刪除0個，新增一個hello // this.list.splice(index,0,'hello') //從第index位開始刪除1個，添加0個 this.list.splice(index,1); }, clear:function(){ this.list=[]; } } })script>body>案例展示：
以上教程都是基于vue2.0版本來編寫。
上周作者發布了vue3.0版本——One Piece，官網地址：
https://github.com/vuejs/vue-next/releases/tag/v3.0.0
在大航海時代，你更愿意當路飛還是克比呢？
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的vue 回车查询 按钮_从零开始学习vue的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iQOO发布会大赞中国电竞亚运会 网友集
- 下一篇： 怎么改vue项目的标题_如何动态修改Vu