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

vue

vue笔记——本地应用

發布時間：2024/1/8 vue 25 豆豆

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

本地應用

文章目錄

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

DOM：獲取元素，操縱它們

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

1.內容綁定，事件綁定

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替換全部，{{}}替換部分

字符串拼接用+（邏輯運算）

v-html

當data內容為html內容可以解析出來，普通文本和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平級)

事件引發彈出窗口

<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("按錯了！！！");}}})</script>

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

vue特點是頁面由數據生成，數據改變，頁面就會改變

點擊改變文本

<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>

計數器

<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("數字不能超過10！")}},sub:function(){if(this.num>0){this.num--}else{alert("數字不能小于0！")}}}})</script>

2.顯示切換，屬性綁定

根據表達式的真假，切換元素的顯示和隱藏

img src使用相對路徑，考慮服務器的安全性，瀏覽器是不允許頁面直接讀取本地硬盤資源的，因為這違反了瀏覽器的同源策略（即html文件與圖片不在用一個域）。HTML 里用的是相對路徑，即用網頁服務器的root 文件夾為起始，而不允許進入與root平行的或高于網頁服務器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的區別：前者操縱樣式，后者操縱元素（本質是刪除dom元素和添加）

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

v-bind

設置元素屬性（src,title,class）

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

img class是CSS樣式名。

需要動態增刪class時使用 isActive?'active':''和{active:isActive}（推薦）可相互替換。

實例：圖片切換

<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.列表循環，表單元素綁定

v-for

根據數據形成列表結構：數組（最常用），字符串，迭代器

<div id="app"><input type="button" value="添加evol" @click="addevol"><input type="button" value="刪除第一個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:"時間操控"},{name:"復制"},{name:"絕對吸引力"},{name:"風場控制"},{name:"雷電控制"}]},methods:{addevol:function(){this.evol.push({name:"絕對控制力"})},removeevol:function(){this.evol.shift()}}})</script>

v-on補充

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

<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

設置和獲取表單元素的值（雙向數據綁定：表單和data中的值）

案例：記事本

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

<header class="header"><h1>李云龍的記事本</h1><input v-model="inputValue" @keyup.enter="addthing" autofocus="autofocus" autocomplete="off" placeholder="請輸入李云龍的任務" 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刪除數組元素，響應式更新頁面）

刪除鍵

methods

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

3.統計（數組length）

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

4.清空(清空數組)

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

5.隱藏（沒有元數據時隱藏元素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>

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

總結

vue開發是基于數據，響應式開發，數據改變，頁面也隨之渲染。之前只是首先對dom元素的獲取。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

笔记
Vue

上一篇：西安硬科技创新大会前奏，一起玩转陕西首档
下一篇： php红包退回通知,PHP红包算法类(已