當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 回车查询按钮_从零开始学习vue

發布時間：2024/9/19 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 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標簽)，不支持單標簽

Vue基礎 {{ message }} {{ message }} {{ message }} var app = new Vue({ //el: '#app', el: '.app', data: { message: 'Hello Vue!' } })

五、data數據對象

data里的數據可以是字符串、對象、數據。

獲取具體值的方式和小程序一樣。

下面是data數據對象案例：

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指令無論什么內容，只會被解析為文本

var app = new Vue({ //el: '#app', el: '#app', data: { // content:"你好" content:"你好" } })

頁面展示：

3、v-on為元素綁定事件

v-on的作用：為元素綁定事件
事件名不需要寫on
指令可以簡寫成@
綁定的方法定義在methods屬性中
方法內部通過this關鍵字可以訪問定義在data中的數據

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元素隱藏
數據改變之后，對應元素的顯示狀態會同步更新

切換 var app = new Vue({ el: '#app', data: { isShow: false, age:19 }, methods:{ change:function(){ this.isShow = !this.isShow; } } })

頁面展示：

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建議使用對象的方式

Vue基礎 .active{ border: 1px solid red; } var app = new Vue({ el: '#app', data: { imgSrc: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1132362758,4197603989&fm=26&gp=0.jpg", imgTitle: "Test", isActive:false }, methods:{ changeActive:function(){ this.isActive = !this.isActive; } } })

7、v-for

v-for的作用是根據數據生成列表結構
數組經常和v-for結合使用
語法是(item,index) in 數據
item和index可以結合其他指令一起使用
數組長度的更新會同步到頁面上，是響應式的

{{ index+1 }}、城市:{{ item }}

{{ ind }} {{ it.name }} var app = new Vue({ el: '#app', data: { arr:['北京','上海','廣州','深圳'], vagetables:[{name:'番茄'},{name:'雞蛋'}] }, methods:{ add:function(){ this.vagetables.push({name:'添加'}) }, remove:function(){ this.vagetables.shift(); } } })

8、v-on補充

事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法時需要定義形參來接收傳入的實參
時間的后面跟上 .修飾符可以對事件進行限制
.enter 可以限制觸發的按鍵為回車
事件修飾符有多鐘

var app = new Vue({ el: '#app',????????????methods:{ doIt:function(p1,p2){ console.log(p1); console.log(p2) }, sayHi:function(){ alert("吃了沒") } } })

9、v-model 獲取和設置表單元素的值(雙向數據綁定)

v-model的作用是便捷的設置和獲取表單元素的值
綁定的數據會和表單元素值相關聯
綁定的元素表單元素的值

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

vue 回车查询按钮_从零开始学习vue

{{ school.mobile }}

快樂

快樂

{{ message }}快樂

{{food}}

熱死啦

{{ message }}

總結

vue

vue 回车查询 按钮_从零开始学习vue

{{ school.mobile }}

快樂

快樂

{{ message }}快樂

{{food}}

熱死啦

{{ message }}

總結

vue 回车查询按钮_从零开始学习vue