Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
生活随笔
收集整理的這篇文章主要介紹了
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue的常用指令(文本插值,綁定屬性,條件渲染,列表渲染,事件綁定,表單綁定)
Vue 的介紹
Vue 是一套構建用戶界面的漸進式前端框架。
只關注視圖層，并且非常容易學習，還可以很方便的與其它庫或已有項目整合。
通過盡可能簡單的 API 來實現響應數據的綁定和組合的視圖組件。
特點
易用：在有 HTML CSS JavaScript 的基礎上，快速上手。
靈活：簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
性能：20kb min+gzip 運行大小、超快虛擬 DOM、最省心的優化。
核心思想
面向數據編程
詳細解釋在代碼注釋中
Vue的簡單入門(使用首先導入Vue的js文件)
Vue 核心對象：
每一個 Vue 程序都是從一個 Vue 核心對象開始的。
let vm = new Vue({ 選項列表; });選項列表
el 選項：用于接收獲取到頁面中的元素。(根據常用選擇器獲取)。
data 選項：用于保存當前 Vue 對象中的數據。在視圖中聲明的變量需要在此處賦值。
methods 選項：用于定義方法。方法可以直接通過對象名調用，this 代表當前 Vue 對象。
數據綁定
在視圖部分獲取腳本部分的數據。
{{變量名}}
入門案列一:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入門</title> </head> <body><!-- 編寫視圖結構 --><div id="div">{{msg}}==={{hello}}===={{vue}}<!-- HelloWorld===你好====VUE --></div><div id="div2">解析vue腳本的數據======={{a}}==={}==={{c}}<h1>{}</h1><p>{{c}}</p><!-- 解析vue腳本的數據=======我是a===我是b===我喜歡abc我是b我喜歡abc --></div> </body> <!-- 倒入vue的js包 --> <script src="js/vue.js"></script> <script>// 腳本//創建Vue對象new Vue({//綁定那個元素的模板el:"#div",//傳遞數據給上面的el選擇器的標簽中的{{}}data:{msg: "HelloWorld",hello: "你好",vue: "VUE"}});//創建vue對象,new Vue({//綁定選擇的這個標簽el:"#div2",//選擇的這個標簽體內可以解析的數據{{}}data:{a: "我是a",b: "我是b",c: "我喜歡abc"}}); </script> </html>瀏覽器控制臺解析的代碼
入門案列二:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入門升級</title> </head> <body><!-- 視圖 --><div id="div"><div>姓名：{{name}}</div><div>班級：{{classRoom}}</div><!-- 這里使用原生的方式綁定事件,后面有vue的事件綁定 --><button onclick="hi()">查看{{name}}在干嘛</button><button onclick="update()">修改班級</button></div> </body> <!-- 倒入vue的js包 --> <script src="js/vue.js"></script> <script>//腳本let vm = new Vue({//綁定模板元素的位子,選擇器el:"#div",//在這個模板下可以使用的數據data: {name: "小付",classRoom: "一班"},//定義方法,并且在方法中能夠使用this操作數據methods: {//這是簡寫形式的方法定義study(){console.log(this.name+"正在"+this.classRoom+"好好學習!")// 點擊查看按鈕在控制臺輸出的是:小付正在一班好好學習!}/*這個是上面的完整版k v的方式定義函數study: function(){console.log(this.name+"正在"+this.classRoom+"好好學習!")// 點擊查看按鈕在控制臺輸出的是:小付正在一班好好學習!}*/}});//定義查看方法function hi(){vm.study();}//定義修改班級function update(){//面向數據編程,jQuer更多的是操作DOM,而Vum是操作數據//改變vue對象的屬性值,dom元素的值就自動更改了vm.classRoom = "二班";} </script> </html>控制臺代碼解析
Vue的常用指令(使用記得導入Vue的js文件)
一 {{}} v-html 文件插值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html {{}} 文本插值</title> </head> <body><!-- 視圖 --><div id="div"><!-- {{}} 作用:是綁定變量,并將數據直接顯示在符號處,不會解析標簽相當于jQuery的text();//不會解析標簽,在瀏覽器中顯示純文本內容<div><b>Hello Vue</b></div>--><div>{{msg}}</div><!-- v-html 就和jQurey的html()方法一樣,是插入文本,解析標簽作用:將內容放在div里面,并且解析標簽--><div v-html="msg"></div><!-- 瀏覽器中解析結果為<div><b>Hello Vue</b></div></div>--></div> </body> <script src="js/vue.js"></script> <script>// 腳本new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}}); </script> </html>控制臺解析
二 v-bind: 綁定屬性
v-bind：為 HTML 標簽綁定屬性值。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-bind : 綁定屬性</title><style>/* vue可以改變cls的值,從而指定樣式是否生效 */.my{border: 1px solid red;}</style> </head> <body><div id="div"><!--jQuery是attr,prop是操作屬性的在vue中v-bind 給標簽綁定屬性實際上也是操作的數據,vue數據的改變,href的鏈接就會改變--><a v-bind:href="url">百度一下</a><br><!-- 常用寫法:v-bind是可以省略的: 屬性名字--><a :href="url">百度一下</a><br><!-- :class綁定樣式數據,數據改變,樣式就改變--><div :class="cls">綁定class屬性</div><!-- :id 綁定id屬性,若vue對象的data.myid數據變化對應這個div標簽的id值就會變化,就很靈活的假如有兩個id值綁定了不同的事件,這樣就可以通過myid數據的變化而改變這個div標簽的事件--><div :id="myid">綁定id屬性</div></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{url: "https://www.baidu.com",cls: "my",myid: "isid"}}); </script> </html>控制臺解析
三 v-if v-else-if v-show 條件渲染
條件渲染
v-if：條件性的渲染某元素，判定為真時渲染,否則不渲染。v-if這個也可以代替v-else和c-else-if,但是不推薦,代碼可讀性差.
v-else：條件性的渲染。
v-else-if：條件性的渲染。
v-show：根據條件展示某元素，區別在于切換的是 display 屬性的值。
控制臺解析
四 v-for列表渲染(遍歷)
v-for：列表渲染，遍歷容器的元素或者對象的屬性。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-for 列表渲染</title> </head> <body><div id="div"><ul><!-- v-for 列表渲染 循環遍歷格式:<標簽 v-for="遍歷得到的每個元素 in 遍歷的數據">{{遍歷得到的每個元素}}</標簽>每次遍歷就會得到對應的標簽這里是li標簽,就會循環渲染出多對li標簽這里的names就是vue對象中的data.names--><li v-for="name in names"><!-- 將遍歷得到的每個元素來渲染顯示出來 -->{{name}}</li><hr><!-- 遍歷對象,v-for = "遍歷對象的每個屬性 in 遍歷的對象"--><li v-for="value in student"><!-- 將遍歷得到的每個屬性渲染顯示出來 -->{{value}}</li></ul></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{//定義一個數組類型的數據names:["小付","小花","小翠"],//定義一個對象類型的數據student:{name:"小付",age:23}}}); </script> </html>控制臺解析
五 事件綁定v-on:事件名 或者 @事件名
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on: @ 事件綁定</title> </head> <body><div id="div"><!-- 顯示渲染vue的數據,這里就提現了vue的數據改變,影響到頁面的動態渲染,而不會去對DOM進行操作,只是div中間的值發生了改變而已--><div>{{name}}</div><!-- v-on事件綁定:v-on:事件名="methods中的方法"--><button v-on:click="change()">點擊改變div的內容</button><button v-on:dblclick="dbchange()">雙擊改變div的內容</button><!-- 簡寫形式:@事件名="methods中的方法"--><button @click="change()">點擊改變div的內容</button></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{name:"我愛敲代碼"},//所有的vue方法就寫在這里面methods:{// 定義一個單擊事件改變文本的方法change(){// 改變當前vue對象的name屬性的值,從而改變上面div中渲染的數據this.name = "我還是喜歡睡覺"},// 定義一個雙擊事件改變文本的方法dbchange(){// 改變當前vue對象的name屬性的值,從而改變上面div中渲染的數據this.name = "我更喜歡快樂的無憂無慮的玩耍"}}}); </script> </html>控制臺解析
六 表單綁定 v-model 雙向動態綁定
注意:該指令需要綁定在表單屬性中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model 表單綁定</title> </head> <body><div id="div"><form autocomplete="off"><!--v-model:在表單元素上創建雙向數據綁定的操作雙向數據綁定:1.更新data數據,表單中的數據也會更新2.更新表單數據,data數據也會更新,2.1注意:的是這里更新data數據在代碼文本中是觀察不到的,是在內存中改變,但是可以通過代碼{{}}顯示出來MVVM模型:是MVC的模型的改進版本-->姓名：<input type="text" name="username" v-model="username"><br>年齡：<input type="number" name="age" v-model="age"></form><hr><!-- 通過渲染顯示數據就可以動態查看到雙向綁定的效果--><div>動態顯示雙向綁定:名字:{{username}}</div><div>動態顯示雙向綁定:年齡:{{age}}</div></div> </body> <script src="js/vue.js"></script> <script>new Vue({el:"#div",data:{//v-model="屬性名" 更新data數據,表單中的數據也會更新,//表單的更新,也會對屬性的值進行更新username:"張三",age:23}}); </script> </html>控制臺解析
小結
常用指令小結
指令：是帶有 v- 前綴的特殊屬性，不同指令具有不同含義。
文本插值
v-html：把文本解析為 HTML 代碼。
綁定屬性
v-bind：為 HTML 標簽綁定屬性值。
條件渲染
v-if：條件性的渲染某元素，判定為真時渲染,否則不渲染。
v-else：條件性的渲染。
v-else-if：條件性的渲染。
v-show：根據條件展示某元素，區別在于切換的是 display 屬性的值。
列表渲染
v-for：列表渲染，遍歷容器的元素或者對象的屬性。
事件綁定
v-on：為 HTML 標簽綁定事件。
表單綁定
v-model：在表單元素上創建雙向數據綁定。
總結
以上是生活随笔為你收集整理的Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅谈AJAX并实现使用pagehelpe
- 下一篇： 简单了解Vue的自定义组件与生命周期