table取tr对象 vue_Vue笔记
生活随笔
收集整理的這篇文章主要介紹了
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的基本使用
- 在VueTest>jslib文件夾下創建vue.js文件，將vue官網js文件內容復制進去。
- 在HTML文件中引用vue.js
- 唯一一次用new,Vue的主程序要用new來引入
- el是element的意思，就是掛載點。
- 插入值使用{{ }}
- 輸出結果
2. MVVM特性的演示
- 創建html文件
- 結果：
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-開頭的指令不用{{ }}， 用雙引號。
結果：
2) v-for
a. 案列一：
- v-for用來實現循環某個節點，循環節點必須綁key。v-bind:key=""
結果：
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>結果：
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>結果：
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>結果：
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>結果：
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>結果：
b. 案列二：加入兩張圖
<p v-for="i in 3"><img :src="'./'+i+'.jpg'"> </p>4）v-on 事件監聽
- 一般用@符號代替v-on:
結果：
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>結果：
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>結果：
案列：
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>結果：
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>結果：
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>結果：
4）computed
- 小案例1：
結果：
- 案例2
- computed可以有get和set
- computed可以看作特殊的data
結果：
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>結果：
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>總結
以上是生活随笔為你收集整理的table取tr对象 vue_Vue笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： andriod studio 运行 无结
- 下一篇： 基于django和vue的xdh官网设计