VUE常用指令總結！
阿新 • • 發佈：2019-01-01
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!--差值表示式--> {{ name1 }}<!--v-text 讀取文字不能讀取html標籤--> <h1 v-text="name2"></h1> <!--v-html 能讀取文字和html標籤--> <div v-html="name3"></div> <!--v-model 雙向繫結--> <input type="text" v-model="name4" /> <br> 名字：{{ name4 }}<br> <!--v-bind 繫結屬性--> <a v-bind:href="name5">百度一下</a> <hr> <!--v-if 新增或者移除dom樹中--> <h1 v-if="name6">你好</h1> <!--v-show 修改元素的display的值 進行顯示隱藏--> <h1 v-show="name7">你好</h1> <!--v-for--> <ul> <li v-for="vo in list">{{ vo.no}},{{vo.name}}</li> </ul> <!--v-on 繫結事件--> <ul> <li v-on:click="myclick">單擊</li> <li @click="myclick">單擊的快捷繫結</li> </ul> </div> <script type="text/javascript"> new Vue({ // 管理邊界 el:'#app', // 資料 data:{ name1:'hello', name2:'小明', name3:'<h1>你好世界</h1>', name4:'', name5:'http://www.baidu.com', name6:true, name7:true, list:[ {no:01,name:'aaa'}, {no:02,name:'bbb'}, {no:03,name:'ccc'} ] }, // 方法 methods:{ myclick : function(){ console.log("我被點選"); } } }) </script> </body> </html>
補充 v-else-if
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
補充return問題
在簡單的vue例項中看到的Vue例項中data屬性是如下方式展示的： let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ } }) 在使用元件化的專案中使用的是如下形式： export default{ data(){ return { showLogin:true, // def_act: '/A_VUE', msg: 'hello vue', user:'', homeContent: false, } }, methods:{ } } 為何在大型專案中data需要使用return返回資料呢？ 不使用return包裹的資料會在專案的全域性可見，會造成變數汙染 使用return包裹後資料中變數只在當前元件中生效，不會影響其他元件。
大概9個 {{}} v-text v-html v-model v-bind v-if v-show v-for v-on
| 指令名 | 解釋 |
| v-text | 讀取文字內容 不包括html標籤 |
| v-html | 讀取文字內容 包括html標籤 |
| v-model | 資料雙向繫結 |
| v-bind | 繫結標籤屬性 |
| v-if | 判斷顯示隱藏 這個操作dom 安全性好 |
| v-show | 判斷顯示隱藏 操作的是display 不刪除元素的dom節點 |
| v-for | 迴圈遍歷資料 |
| v-on | 繫結自定義方法 |
| {{}} | 差值表示式 把data中的資料 顯示到頁面 |