table取tr對象 vue_Vue筆記

  • Vue集成了React和Angular的優點，摒棄了他們的缺點。
  • Vue的官網：https://cn.vuejs.org/v2/api/
  • Vue誕生于2016年，是現在非常流行的MVVM框架。
  • Vue提供了“引包”的使用方法，初學者可以在這之下學習語法。不需要webpack，不需CMD打包。
  • Vue的包：https://cn.vuejs.org/js/vue.js
  • 在react中任何一個組件都是一個class（類），并且這個類繼承于React.Component。當你放標簽的時候等于實例化了這個類。Vue也是一樣，任何一個組件也是一個類，但是Vue有個非常大的特點：語法隱藏底層細節
  • Vue中的指令都是以v-開頭的
  • v-開頭的指令里面不用{{ }}

一、Vue的基本使用

  1. Vue啟動
  • 在VueTest>jslib文件夾下創建vue.js文件，將vue官網js文件內容復制進去。

2fb27a92255805dc04d27f2cd7499d0a.png
  • 在HTML文件中引用vue.js
  • 唯一一次用new,Vue的主程序要用new來引入
  • el是element的意思，就是掛載點。
  • 插入值使用{{ }}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{1+1}}</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app"})      //實際作用域是id為app的div//唯一一次用new,Vue的主程序要用new來引入</script>
</body>
</html>
  • 輸出結果

32b417dc69bf2f6605d41fb8ae212548.png

2. MVVM特性的演示

  • 創建html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>我愛你{{a}}年</h1><button @click="add()">按我加1</button><button @click="minus()">按我減1</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:100,},methods:{add(){this.a++;},minus(){this.a--;}}})</script>
</body>
</html>
  • 結果：

ec207f0fd0c9ff4d9156ad369116bb19.png

3. 指令

  • React中沒有指令，指令是Angular發明的，Vue借鑒來的。
  • 標簽身上的屬性，這些屬性有功能性

1）v-if、v-show

  • v-if是動態的向DOM樹內添加或者刪除DOM元素（是否上樹）;
  • v-show是通過設置DOM元素的display樣式屬性控制顯隱；
  • v-if和v-show的值都是布爾值（true, a>9, str.length>5， Math.random>6）
  • v-開頭的指令不用{{ }}， 用雙引號。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button @click="changeisInTree()">v-if添加、刪除元素</button><button @click="changeisShow()">v-show顯示、隱藏元素</button><h1 v-if="isInTree">你好</h1><h1 v-show="isShow">你好</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{isInTree:true,      //true可見，false不可見isShow:true,},methods:{changeisInTree(){this.isInTree=!this.isInTree;},changeisShow(){this.isShow=!this.isShow;}}})</script>
</body>
</html>

結果：

63b7fe2ea5d79cb27e534ab75136bc3b.png

2) v-for

a. 案列一：

  • v-for用來實現循環某個節點，循環節點必須綁key。v-bind:key=""
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for="(item, index) in arr" v-bind:key="index">{{index}}-{{item}}</li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{arr:["A", "B", "C", "D"]}})</script>
</body>
</html>

結果：

ff5ad7403b2d89479d1d369bb5c2e058.png

b. 案列二：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, tr, td {border: 1px solid black;}td {padding: 10px;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in arr" v-bind:key="index">{{index}}-{{item}}</li></ul><table><tr v-for="item in student" v-bind:key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.sex}}</td><td>{{item.age}}</td></tr></table></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{arr:["A", "B", "C", "D"],student:[{"id":1, "name":"小紅", "sex": "女", "age": 12},{"id":2, "name":"小明", "sex": "男", "age": 24},{"id":3, "name":"小東", "sex": "男", "age": 35},]}})</script>
</body>
</html>

結果：

0e26eecb5677765e781e3fe84726b1e7.png

c. 案列三：從1開始計數

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-for="item in 5">{{item}}</p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script></body>
</html>

結果：

4995cd0045a0975e09f7ef7da07ac50b.png

d. 案列四：從0開始計數

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for="(item, index) in 5" v-bind:key="index">{{index}}</li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script>
</body>
</html>

結果：

1f5135f77e954b88deb7ab29f739123f.png

e：案列五：九九乘法表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, tr, td{border: 1px solid black;}td {padding: 20px;}</style>
</head>
<body><div id="app"><table><tr v-for="i in 9"><td v-for="j in 9"><span v-show="i>=j">{{i}}*{{j}}={{i*j}}</span></td></tr></table></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",})</script>
</body>
</html>

結果：

f6981ac94248b0aba148032c2a519b89.png

3）v-bind（重難點）

  • v-bind指令可以讓任何w3c屬性變“動態”。

a. 案列一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-bind:value="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},})</script>
</body>
</html>

結果：

f6804808ac607f060b3741ef07e1749c.png

b. 案列二：加入兩張圖

<p v-for="i in 3"><img :src="'./'+i+'.jpg'">
</p>

4）v-on 事件監聽

  • 一般用@符號代替v-on:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="info()">點擊</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{info(){alert("你好");}}})</script>
</body>
</html>

結果：

c4e12e0fc747ba9c996def0bc908ffdf.png

5) v-model

  • 雙向綁定，是vue中的特色。Angular也有，是vue借鑒來的。
  • 雙向綁定指的是：

1）當data的值變化了，控件就變化。

2）當控件的值變化了，data的值也變化。

  • Vue規定：攜帶v-model指令的元素，不能有監聽或value了。

a. 案列一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><input type="text" v-model="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},methods:{}})</script>
</body>
</html>

結果：

e381abe526fff137ae05c3bf78d8b183.png

b. 案列二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><input type="range" v-model="a"></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{a:10,},methods:{}})</script>
</body>
</html>

結果：

3b93117585bbb29ac69d1791f49bb90c.png

案列：

1）調色板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;border: 1px solid black;}</style>
</head>
<body><div id="app"><div class="box" :style="'background-color:rgb('+r+','+g+','+b+')'"></div><p><input type="range" :min="0" :max="255" v-model="r"><br /><input type="range" :min="0" :max="255" v-model="g"><br /><input type="range" :min="0" :max="255" v-model="b"></p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{r:100,g:175,b:130,},methods:{}})</script>
</body>
</html>

結果：

54300862022b4fd5608db3cee52fa012.png

2）微博發布框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.warning {color:red;}</style>
</head>
<body><div id="app"><textarea cols="30" rows="10" v-model="content"></textarea><span :class="{'warning': content.length > 140}">{{content.length}}-140字</span><br /> <!--json格式--><button :disabled="content.length>140 || content.length==0">發布</button><button :disabled="content.length==0" @click="clear()">清屏</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{content:"",},methods:{clear(){this.content=" ";},}})</script>
</body>
</html>

結果：

889ede6ad24f40ba62d9259791b07cc1.png

3）購物車

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table><tr v-for="item in carts" :key="item.id"><td>{{item.id}}</td><td>{{item.title}}</td><td>{{item.price}}</td><td><input type="number" min="0" v-model="item.number">{{item.price*item.number}}</td></tr></table>總價：{{zonghe()}}</div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{carts:[{"id": 1, "title": "冰箱", "price": 100, "number": 1},{"id": 2, "title": "電視機", "price": 150, "number": 2},{"id": 3, "title": "空調", "price": 300, "number": 8},{"id": 4, "title": "電飯煲", "price": 50, "number": 5},]},methods:{zonghe(){return this.carts.reduce((a,b)=>{return a + b.number*b.price}, 0)}}})</script>
</body>
</html>

結果：

a4a03eb71aeff968e9785b8d44ebf3bb.png

4）computed

  • 小案例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{},computed:{a:{get(){return 10;}}}})</script>
</body>
</html>

結果：

ea0b14760be1f8b3a1c134eabe41827b.png
  • 案例2
  • computed可以有get和set
  • computed可以看作特殊的data
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{a}}</h1><button @click="add()">button</button></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{add(){this.a++;}},computed:{a:{get(){return 10;},set(){alert("你試圖更改a")}}}})</script>
</body>
</html>

結果：

c4315c172ffa6d92d9b4f2ec0e17b338.png

5) todos

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p><input type="text" ref="kuang"><button @click="addToDo()">增加</button></p><ul><li v-for="item in todos" v-bind:key="item.id"><input type="checkbox" v-model="item.done">{{item.title}}<button @click="removeToDo(item.id)">刪除</button></li></ul><p>共：{{todos.length}}個。已做：{{yizuo}}個，未作：{{weizuo}}個。</p></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{todos:[{"id":1, "title":"睡覺", "done": false},{"id":2, "title":"吃飯", "done": false},{"id":3, "title":"洗碗", "done": false},]},methods:{removeToDo(id){this.todos=this.todos.filter(item=>item.id!=id);},addToDo(){var title=this.$refs.kuang.value;this.todos.push({"id":Math.random(),title,"done":false})}},computed:{yizuo(){return this.todos.filter(item=>item.done).length;},weizuo(){return this.todos.filter(item=>!item.done).length;}}})</script>
</body>
</html>

結果：

f46802d87d1c09273e26e166621bc41a.png

6）一維變二維（未結束）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>要求做3個ul,每個ul中有四個li</h1><ul v-for="i in 3"><li v-for="j in 4"><img src="`/images/${(i-1)*4+(j-1)}.jpg`" alt=""></li></ul></div><script src="jslib/vue.js"></script><script>new Vue({el:"#app",data:{},methods:{},computed:{}})</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/455055.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/455055.shtml
英文地址，請注明出處：http://en.pswp.cn/news/455055.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Beats入門簡介

Beats入門簡介

使用Beat收集nginx日志和指標數據 項目需求 Nginx是一款非常優秀的web服務器&#xff0c;往往nginx服務會作為項目的訪問入口&#xff0c;那么&#xff0c;nginx的性能保障就變得非常重要了&#xff0c;如果nginx的運行出現了問題就會對項目有較大的影響&#xff0c;所以&…
閱讀更多...
PHP-curl

PHP-curl

//初始化$curl curl_init();//設置抓取的urlcurl_setopt($curl, CURLOPT_URL, http://www.baidu.com);//設置頭文件的信息作為數據流輸出curl_setopt($curl, CURLOPT_HEADER, 1);//設置獲取的信息以文件流的形式返回&#xff0c;而不是直接輸出。curl_setopt($curl, CURLOPT_R…
閱讀更多...
MPlayer開發

MPlayer開發

一、介紹 不論是音頻數據還是視頻數據&#xff0c;我都為MPlayer項目開發過一些開源的解碼器。因此我個人認為我有資格寫一篇文檔來介紹如何開發新的編解碼器。 學習如何添加一個新的編解碼器的最好方法通常是學習大量的已有代碼。本文檔僅僅是對代碼的一個補充&#x…
閱讀更多...
可編程led燈帶原理_SCPSD-250-04-27派克真空壓力傳感器故障和工作原理

可編程led燈帶原理_SCPSD-250-04-27派克真空壓力傳感器故障和工作原理

SCPSD-250-04-27派克PARKER真空壓力傳感器故障和工作原理PARKER壓力開關現貨 PARKER壓力傳感器特價 派克真空壓力傳感器 PARKER數字壓力開關2020年還剩最后2天了&#xff0c;這一年大家都過得不太容易&#xff0c;尤其是我自己這是30年以來過得最艱難的一年&#xff0c;經…
閱讀更多...
總結面試時沒有回答上的內存對齊問題

總結面試時沒有回答上的內存對齊問題

前兩天面試某公司時&#xff0c;沒有回答上的一個問題&#xff0c;總結如下&#xff0c;以供參考。 問&#xff1a;下面這個結構類型的實例變量占用多少內存&#xff1a; struct struct1 { int i; short j; char c; }; 我反問&#xff1a;是啥語言啥機器啥編譯環境…
閱讀更多...
Kibana入門安裝與介紹

Kibana入門安裝與介紹

Kibana入門 Kibana 是一款開源的數據分析和可視化平臺&#xff0c;它是 Elastic Stack 成員之一&#xff0c;設計用于和 Elasticsearch 協作。您可以使用 Kibana 對 Elasticsearch 索引中的數據進行搜索、查看、交互操作。您可以很方便的利用圖表、表格及地圖對數據進行多元化…
閱讀更多...
友善串口工具接收數據隨機換行_使用Python3+PyQT5+Pyserial 實現簡單的串口工具方法...

友善串口工具接收數據隨機換行_使用Python3+PyQT5+Pyserial 實現簡單的串口工具方法...

練手項目&#xff0c;先上圖先實現一個簡單的串口工具&#xff0c;為之后的上位機做準備代碼如下&#xff1a;pyserial_demo.pyimport sys import serial import serial.tools.list_ports from PyQt5 import QtWidgets from PyQt5.QtWidgets import QMessageBox from PyQt5.QtC…
閱讀更多...
Vue渲染函數

Vue渲染函數

前面的話 Vue 推薦在絕大多數情況下使用 template 來創建HTML。然而在一些場景中&#xff0c;真的需要 JavaScript 的完全編程的能力&#xff0c;這就是 render 函數&#xff0c;它比 template 更接近編譯器。本文將詳細介紹Vue渲染函數 引入 下面是一個例子&#xff0c;如果要…
閱讀更多...
數據綁定原理

數據綁定原理

一、數據單向綁定原理指先把模板寫好&#xff0c;然后把模板和數據(數據可能來自后臺)整合到一起形成HTML代碼&#xff0c;最后把這段HTML代碼插入到文檔流里。缺點&#xff1a;一旦HTML代碼生成就沒有辦法改變&#xff0c;如果有新數據重新傳入&#xff0c;就必須重新把模板和…
閱讀更多...
視頻解碼優化

視頻解碼優化

以下通過剖析一些經驗來了解視頻解碼優化 1. 在嵌入式系統中實現MPEG4的視頻解碼 有兩種方法可行 (1)采用ffmpeg(mplayer 的核心就是采用ffmpeg)&#xff0c;然后對ffmpeg mp4解碼優化 1).對IDCT匯編化,并優化VLD的實現 ->inline&匯編化 2).根據ARM9 cache&cache…
閱讀更多...
Logstash入門簡介

Logstash入門簡介

Logstash入門簡介 介紹 Logstash是一個開源的服務器端數據處理管道&#xff0c;能夠同時從多個來源采集數據&#xff0c;轉換數據&#xff0c;然后將數據發送到最喜歡的存儲庫中&#xff08;我們的存儲庫當然是ElasticSearch&#xff09; 我們回到我們ElasticStack的架構圖&a…
閱讀更多...
Django templates 和 urls 拆分

Django templates 和 urls 拆分

如果在Django項目 下面新建了blog和polls兩個APP應用&#xff0c;在每個APP下面都各自新建自己的url和templates&#xff0c;那么我們需要如何進行項目配置呢&#xff1f; INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, dja…
閱讀更多...
springboot怎么殺進程_線上服務平均響應時間太長，怎么排查？

springboot怎么殺進程_線上服務平均響應時間太長，怎么排查？

線上服務平均響應時間太長&#xff0c;怎么排查&#xff1f;https://xie.infoq.cn/article/914b5c56000a3880016abd8d6前言&#xff1a;最近線上環境某個接口服務響應時間偏長&#xff0c;導致用戶體驗超差&#xff0c;那平時該怎么快速的排查這類問題呢&#xff1f;①、為代碼…
閱讀更多...
Redis學習第五課：Redis Set類型及操作

Redis學習第五課：Redis Set類型及操作

Set是集合&#xff0c;它是string類型的無序集合。set是通過hash table實現的&#xff0c;添加、刪除和查找的復雜度都是O(1)。 對集合我們可以取并集、交集、差集。通過這些操作我們可以實現SNS中的好友推薦和blog的tag功能。 Set集合操作&#xff1a; sadd:向名稱為Key的set中…
閱讀更多...
MPEG音視頻編解碼之MP3編解碼概述

MPEG音視頻編解碼之MP3編解碼概述

2 MP3編解碼原理 2.1 MP3音頻壓縮標準概述 MP3全稱是動態影像專家壓縮標準音頻層面3&#xff08;Moving Picture Experts Group Audio Layer III&#xff09;。是當今較流行的一種數字音頻編碼和有損壓縮格式&#xff0c;它設計用來大幅度地降低音頻數據量&#xff0c;而對于…
閱讀更多...
Python實現GitBook工具

Python實現GitBook工具

寫在前面 本工具是通過Python腳本實現 GitBook 自動 生成 執行 編譯 發布的功能 你可以在這里下載exe 使用 1. exe下載,并移動位置 將exe文件放在你的gitbook文件夾中,或者放在空文件夾中 2. file.md 創建 名為file.md的文件,在你要寫book的目錄下 注意: 這里file.md文件名…
閱讀更多...
shell腳本中用到的條件和循環語句

shell腳本中用到的條件和循環語句

本博文介紹一下shell腳本中常用的條件和循環語句&#xff1a;條件語句&#xff1a;循環語句&#xff1a;示例&#xff1a;if語句&#xff1a;eg1.eg2.2.case語句&#xff1a;簡單的case語句&#xff1a;配合循環的case語句&#xff1a;3.for語句&#xff1a;簡單的for語句&…
閱讀更多...
BZOJ 2243 染色（樹鏈剖分好題）

BZOJ 2243 染色（樹鏈剖分好題）

2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 7971 Solved: 2990[Submit][Status][Discuss] Description 給定一棵有n個節點的無根樹和m個操作&#xff0c;操作有2類&#xff1a; 1、將節點a到節點b路徑上所有點都染成顏色c&#xff1b; 2、詢問…
閱讀更多...
processing動態代碼大全_做一張動態海報需要多少步？

processing動態代碼大全_做一張動態海報需要多少步？

人們習慣性地把程序員跟設計師分成兩種不同性質的人&#xff0c;好像程序員就不會有美感&#xff0c;設計師邏輯思維就一定會很弱&#xff0c;但最近幾年我們發現越來越多的程序員學設計&#xff0c;設計師學編程的跨界故事。新媒體藝術家&#xff0c;邱偉豪也是其中一員&#…
閱讀更多...
【ffmpeg for wince】音視頻編解碼多平臺移植（for window/wince）

【ffmpeg for wince】音視頻編解碼多平臺移植（for window/wince）

from: http://www.cnblogs.com/windwithlife/archive/2009/05/31/1492728.html 終于完成了了第二個Client side原型&#xff08;for Wince)&#xff0c;其中花掉我最多時間的就是ffmpeg的對WINCE的移植。其中有大半時間是由于網上的一些不完整及不正確信息所誤導&#xff0c;…
閱讀更多...
最新文章

Copyright @ 2022~2023