Vue學習之渲染
阿新 • • 發佈：2019-02-18
msg box wid play 沒有 local 多個 需要 計算命令
一.計算命令computed
```html <body> <div id="app"> 姓<input type="text" v-model="first_name"> <hr> 名<input type="text" v-model="last_name"> <hr> <p>{{ first_name + " " + last_name }}</p> <p>{{ full_name_fn() }}</p> <!-- 一個變量的值依賴於多個變量的值 --> <p>{{ full_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { first_name: "", last_name: "", }, methods: {// 聲明的是函數, 該函數必須手動調用 full_name_fn: function () { return this.first_name + " " + this.last_name } }, computed: { // 聲明變量full_name, 該變量的值等於後方函數的返回值 // 函數中包含的所有vue變量值只要有發生變化的系統就會調用該函數 full_name: function () {return this.first_name + " " + this.last_name } } }) </script> ```
二.監聽命令watch
```html <body> <div id="app"> 姓名<input type="text" v-model="full_name"> <hr> <p>{{ first_name }}</p> <hr> <p>{{ last_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { full_name: "", first_name: "", last_name: "", }, watch: { // wacth只是對已有的變量進行值變化的監聽, 一旦發現值變化,系統自動回調監聽變量後的函數 // 後方函數和前方變量只有數據變化的監聽綁定關系, 沒有值相關的聯系 full_name: function () { arr = this.full_name.split(" "); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script> ```
三.條件渲染
```html <style> .wrap { width: 300px; } .box { width: 100px; height: 100px; } .red { background-color: red; float: left; } .orange { background-color: orange; float: right; } </style> <body> <div id="app"> <button @click="rAction">red切換</button> <button @click="oAction">orange切換</button> <div class="wrap"> <!-- v-if 值為false時, 不會被渲染 --> <!-- 了解 :key由vue控制的屬性key值需要唯一標識,因為key的值就是vue對該組件在內存中建立緩存的key --> <div class="box red" v-if="r_show" :key="key" ></div> <!-- v-show 值為false時, 以display:none被渲染 --> <div class="box orange" v-show="o_show"></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { r_show: true, o_show: true }, methods: { rAction: function () { this.r_show = !this.r_show; }, oAction: function () { this.o_show = !this.o_show; } } }) </script> ```
四.循環渲染
``html <body> <div id="app"> <ul> <li>{{ ls[0] }}</li> <li>{{ ls[1] }}</li> <li>{{ ls[2] }}</li> <li>{{ ls[3] }}</li> </ul> <ul> <li v-for="(ele, index) in ls">{{ ele }} {{ index }}</li> </ul> <ul> <li v-for="(value, key, index) in dic">{{ key }} {{ value }} {{ index }}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { ls: [‘張三‘, ‘李四‘, ‘王五‘, ‘趙六‘, ‘錢七‘], dic: { name: ‘Bob‘, age: 88, gender: ‘男‘ } }, }) </script> ```
五.組件初識
```html <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.js"></script> <script> // 每個組件均具有自身的模板template，根組件的模板就是掛載點 new Vue({ // 根組件一定需要掛在點(否則無法渲染到頁面中), 一般情況下, 根組件的template就取掛載點,不需要自定義 el: "#app", data: { msg: "信息" }, // template就是組件的html架構 // 每個組件模板只能擁有一個根標簽 template: "<div><p>鍛煉</p></div>" }) </script> ```
六局部組件
```html <body> <div id="app"> <abc></abc> <abc></abc> <abc></abc> </div> <hr> <div id="main"> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 局部組件 var localTag = { // 子組件的數據具有作用域，以達到組件的復用, 每一個復用的組件具有自身獨立的一套數據 data: function () { return { // 返回值是一個數據字典(一套數據) count: 0 } }, template: "<div @click=‘fn‘>點擊{{ count }}次</div>", methods: { fn: function () { this.count += 1; } } } // app根組件 new Vue({ el: "#app", // 註冊 components: { ‘abc‘: localTag } }) // main根組件 new Vue({ el: "#main", components: { // localTag ‘local-tag‘: localTag } }) </script> ```
Vue學習之渲染