當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue笔记——本地应用

發(fā)布時(shí)間：2024/1/8 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue笔记——本地应用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本地應(yīng)用

文章目錄

本地應(yīng)用
- - 1.內(nèi)容綁定，事件綁定
  - - v-text
    - v-html
    - v-on(為元素綁定事件)
    - - 事件引發(fā)彈出窗口
      - 點(diǎn)擊改變文本
      - **計(jì)數(shù)器**
  - 2.顯示切換，屬性綁定
  - - v-show
    - v-if
    - v-bind
    - 實(shí)例：圖片切換
  - 3.列表循環(huán)，表單元素綁定
  - - v-for
    - v-on補(bǔ)充
    - v-model
  - 案例：記事本
  - - - 1.新增（使用v-for顯示列表，用v-on綁定回車鍵，添加任務(wù)）
      - 2.刪除（splice刪除數(shù)組元素，響應(yīng)式更新頁面）
      - 3.統(tǒng)計(jì)（數(shù)組length）
      - 4.清空(清空數(shù)組)
      - 5.隱藏（沒有元數(shù)據(jù)時(shí)隱藏元素v-show，v-if）
  - 總結(jié)

DOM：獲取元素，操縱它們

vue.js: v開頭語法 --> vue指令

1.內(nèi)容綁定，事件綁定

v-text

<div id="app"><h2 v-text="message+'!'">四川</h2><h2 v-text="info+'!'">四川</h2><h2>{{ message+"!" }}四川</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:"李云龍",info:"意大利炮"}})</script>

v-text替換全部，{{}}替換部分

字符串拼接用+（邏輯運(yùn)算）

v-html

當(dāng)data內(nèi)容為html內(nèi)容可以解析出來，普通文本和v-text相同

<div id="app"><p v-html="content"></p><p v-text="content"></p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{content:"<a href='http://www.baidu.com'>李云龍</a>"}})</script>

v-on(為元素綁定事件)

methods(與data，el平級)

事件引發(fā)彈出窗口

<div id="app"><input type="button" value="單擊" v-on:click="doWr"><input type="button" value="移到" v-on:mouseenter="doWr"><input type="button" value="雙擊" v-on:dblclick="doWr"><input type="button" value="簡寫雙擊" @dblclick="doWr"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",methods:{doWr:function(){alert("按錯(cuò)了！！！");}}})</script>

更復(fù)雜的方法（如修改頁面元素顯示），不用操作DOM元素

vue特點(diǎn)是頁面由數(shù)據(jù)生成，數(shù)據(jù)改變，頁面就會(huì)改變

點(diǎn)擊改變文本

<div id="app"><h2 @click="changeWeapon">{{ weapon }}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{weapon:"意大利炮"},methods:{changeWeapon:function(){this.weapon+="哪兒呢？"}}})</script>

計(jì)數(shù)器

<div id="app"><div class="input-num"><button @click="sub">-</button><span>{{ num }}</span><button @click="add">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{num:1},methods:{add:function(){//console.log('add');if(this.num<10){this.num++}else{alert("數(shù)字不能超過10！")}},sub:function(){if(this.num>0){this.num--}else{alert("數(shù)字不能小于0！")}}}})</script>

2.顯示切換，屬性綁定

根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏

img src使用相對路徑，考慮服務(wù)器的安全性，瀏覽器是不允許頁面直接讀取本地硬盤資源的，因?yàn)檫@違反了瀏覽器的同源策略（即html文件與圖片不在用一個(gè)域）。HTML 里用的是相對路徑，即用網(wǎng)頁服務(wù)器的root 文件夾為起始，而不允許進(jìn)入與root平行的或高于網(wǎng)頁服務(wù)器root 的其它分支路徑。

v-show

<div id="app"><input type="button" value="hide and appear" @click="changeIsShow"><img v-show="isShow" src="1.jpg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{isShow:"false"},methods:{changeIsShow:function(){this.isShow=!this.isShow;}}})</script>

v-if

操縱dom元素

<div id="app"><input type="button" value="切換顯示" @click="toggleIsShow"><p v-if="isShow">我是李云龍</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{isShow:false},methods:{toggleIsShow:function(){this.isShow=!this.isShow;}}})</script>

v-show和v-if的區(qū)別：前者操縱樣式，后者操縱元素（本質(zhì)是刪除dom元素和添加）

v-show用于頻繁切換元素時(shí)，反之用v-if。

v-bind

設(shè)置元素屬性（src,title,class）

v-bind:屬性名=表達(dá)式，可簡寫為**:屬性名=表達(dá)式**

img class是CSS樣式名。

需要?jiǎng)討B(tài)增刪class時(shí)使用 isActive?'active':''和{active:isActive}（推薦）可相互替換。

實(shí)例：圖片切換

<div id="app"><img :src="imgArr[index]"><a href="javascript:void(0)" v-show="index!=0" @click="prev"class="left"><img src="./img/prev.png" alt=""></a><a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next"class="right"><img src="./img/next.png" alt=""></a> </div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{imgArr:["./img/1.jpg","./img/2.png","./img/3.jpg",],index:0},methods:{prev:function(){this.index--;},next:function(){this.index++;}}})</script>

3.列表循環(huán)，表單元素綁定

v-for

根據(jù)數(shù)據(jù)形成列表結(jié)構(gòu)：數(shù)組（最常用），字符串，迭代器

<div id="app"><input type="button" value="添加evol" @click="addevol"><input type="button" value="刪除第一個(gè)evol" @click="removeevol"><ul><li v-for="(item,index) in arr">{{ index+1 }} 戀與制作人：{{ item }}</li><h2 v-for="item in evol" :title="item.name">{{ item.name }}</h2></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{arr:["李澤言","許墨","周棋洛","白起","凌肖"],evol:[{name:"時(shí)間操控"},{name:"復(fù)制"},{name:"絕對吸引力"},{name:"風(fēng)場控制"},{name:"雷電控制"}]},methods:{addevol:function(){this.evol.push({name:"絕對控制力"})},removeevol:function(){this.evol.shift()}}})</script>

v-on補(bǔ)充

傳遞自定義參數(shù)（函數(shù)傳參），事件修飾符

<div id="app"><input type="button" value="click" @click.right="doIt"><input type="text" @keyup.enter="sayHi"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app"，methods:{doIt:function(p1){console.log("do it");console.log(p1);},sayHi:function(){alert("寧吃了嗎？")}}})</script>

v-model

設(shè)置和獲取表單元素的值（雙向數(shù)據(jù)綁定：表單和data中的值）

案例：記事本

1.新增（使用v-for顯示列表，用v-on綁定回車鍵，添加任務(wù)）

<header class="header"><h1>李云龍的記事本</h1><input v-model="inputValue" @keyup.enter="addthing" autofocus="autofocus" autocomplete="off" placeholder="請輸入李云龍的任務(wù)" class="new-todo"></header><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in todolist"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destory"></button></div></li></ul></section>

2.刪除（splice刪除數(shù)組元素，響應(yīng)式更新頁面）

刪除鍵

methods

remove:function(index){this.todolist.splice(index,1);}

3.統(tǒng)計(jì)（數(shù)組length）

<footer class="footer"><span class="todo-count"> <strong>{{ todolist.length }}</strong> items left </span></footer>

4.清空(清空數(shù)組)

<button class="clear-completed" @click="clear">clear</button>clear:function(){this.todolist=[];}

5.隱藏（沒有元數(shù)據(jù)時(shí)隱藏元素v-show，v-if）

<footer class="footer" v-show="todolist.length!=0"><span class="todo-count" v-if="todolist.length!=0"> <strong>{{ todolist.length }}</strong> items left </span><br><button v-show="todolist.length!=0"class="clear-completed" @click="clear">clear</button></footer>

添加在父元素或者子級元素根據(jù)自己需要決定

總結(jié)

vue開發(fā)是基于數(shù)據(jù)，響應(yīng)式開發(fā)，數(shù)據(jù)改變，頁面也隨之渲染。之前只是首先對dom元素的獲取。

總結(jié)

以上是生活随笔為你收集整理的vue笔记——本地应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记
Vue

上一篇：西安硬科技创新大会前奏，一起玩转陕西首档
下一篇：用Vue制作图片翻面效果