Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
生活随笔
收集整理的這篇文章主要介紹了
Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 插值操作
1.1 Mustache語法
也就是雙大括號 {{ }}
<div id="app"> <!-- mustche語法中，不僅可以直接寫變量，也可以寫簡單的表達式 --><h2>{{ message }} : {{ info }}</h2><h2>{{ message + " : " + info }}</h2><h2>{{ counter * 2 }}</h2> </div><script src="../js/vue.js"></script> <script>// 編程范式：聲明式編程const app = new Vue({el: '#app', // 用于關在要管理的元素data: { // 定義數據message: "你好",info: "有勇氣的牛排",counter:100}}) </script>1.2 v-once
-
該指令后面不需要跟任何表達式（比如之前的v-for后面是跟表達式的）
-
該指令表示元素和組件（組件后面才會學習）只會渲染一次，不會隨著數據的改變而改變
1.3 v-html
某些情況下，我們從服務器請求到的數據本身就是一個HTML代碼
-
如果我們直接通過{{ }} 來輸出，會將HTML代碼也一起輸出
-
但是我們可能希望的是按照HTML格式進行解析，并顯示對應的內容
如果我們希望解析出HTML展示
-
可以使用v-html指令
-
該指令直面往往會跟上一個string類型
-
會將string的html解析出來并進行渲染
1.3 v-text
不推薦，靈活度不夠
<div id="app"><h2 v-text="message"></h2> </div><script src="../js/vue.js"></script> <script>// 編程范式：聲明式編程const app = new Vue({el: '#app', // 用于關在要管理的元素data: { // 定義數據message: "你好，有勇氣的牛排",}}) </script>1.4 v-pre
v-pre用于跳過這個元素和它子元素的編譯過程，用于顯示原本的Mustche語法
比如下面代碼
-
第一個h2元素中的內容會被編譯解析出來對應的內容
-
第二個h2元素中會直接顯示{{message}}
1.5 v-cloak
在某些情況下，我們瀏覽器可能會直接顯示出未變異的Mustche標簽
<div id="app" v-cloak><h2 v-text="message">{{ message }}</h2> </div>-
在vue解析之前，div中有一個屬性v-cloak
-
在vue解析之后，div中沒有一個屬性v-cloak
2 綁定屬性
2.1 v-bind
場景：某些屬性需要動態綁定
-
比如動態綁定a元素的href屬性
-
比如動態綁定img元素的src屬性
v-bind指令：
-
作用：動態綁定屬性
-
縮寫：：語法糖寫法 直接冒號
-
預期：any(with argument)|Object(without argument)
-
參數：attrOrProp（optional）
2.2 v-bind綁定class
2.2.1 綁定方式：對象語法
- 對象語法的含義：class后面跟的是一個對象
2.2.2 綁定方式：數組語法
<div id="app"><!-- 數組里面的值，加雙引號是為值，不加雙引號為變量 --><h2 class="title" :class="[active,line]">{{ message }}</h2><h2 class="title" :class="getClasses()">{{ message }}</h2></div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: "你好，有勇氣的牛排",active: '666',line: '777'},methods: {getClasses: function () {return [this.active, this.line]}}}) </script>2.3 點擊列表中哪一項，那么該項的文字變為紅色
<style>.active {color: red;} </style> <div id="app"><ul><li v-for="(m, index) in movies":class="{active:index === currentIndex}"@click="liClick(index)">{{ index }}{{ ' - ' + m }}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {movies: ['灰太狼', '有勇氣的牛排', '導演'],currentIndex: 0},methods: {liClick: function (index) {this.currentIndex = index}}}) </script>2.4 v-bind綁定style
-
可以使用v-bind:style來綁定一些CSS內斂樣式
-
在寫CSS屬性名的時候，比如font-size
我們可以使用駝峰式（cameCase）fontSize
或短橫線分隔（kebab-case，記得用單引號括起來）'font-size'
- 綁定class有兩種方式
3 計算屬性
-
比如：有firstName和lastName兩個變量，我們需要顯示完整的名稱。
-
但是如果多個地方都需要完整的名稱，就需要寫多個{{ firstName }} {{ laseName }}
3.1 基本操作
<div id="app"><h2>{{ name + ' : ' + nameValue }}</h2><h2>{{ name }} : {{ nameValue }}</h2><h2>{{ getFullName() }}</h2><!-- 計算屬性 --><h2>{{ fullName }}</h2></div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {name: "昵稱",nameValue: "灰太狼"},// computed: 計算屬性()computed: {fullName() {return this.name + ' : ' + this.nameValue}},methods: {getFullName() {return this.name + ' : ' + this.nameValue}}}) </script>3.2 復雜操作
<div id="app"><h2>總價格: {{ totalProce }}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {books: [{id: 110, name: "C語言", price: 50},{id: 111, name: "操作系統", price: 60},{id: 112, name: "統計學習方法", price: 70},{id: 113, name: "鬼谷子", price: 30},{id: 114, name: "即興演講", price: 35}]},computed: {totalProce: function () {let result = 0for (let i = 0; i < this.books.length; i++) {result += this.books[i].price}return result// for (let i in this.books){// this.books[i]// }//// for(let book of this.books){//// }}}}) </script>3.3 計算屬性的setter和getter
<div id="app"><h2>{{ fullName }}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {name: '昵稱',nameValue: '有勇氣的牛排'},computed: {// 計算屬性一般是沒有set方法，只讀屬性fullName: {// app.fullName='cc|cc'set: function (newValue) {const names = newValue.split('|');this.name = names[0];this.nameValue = names[1];},get: function () {return this.name + ' : ' + this.nameValue}},// 簡潔寫法// fullName: function () {// return this.name + ' : ' + this.nameValue// }}}) </script>3.4 計算屬性和methods的對比
<div id="app"><!-- 1. 直接拼接: 語法過于繁瑣 --><h2>{{ name }} {{ nameValue }}</h2><!-- 2. 通過定義methods --><h2>{{ getFullName() }}</h2><!-- 3. 通過computed --><h2>{{ fullName }}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {name: '昵稱',nameValue: '有勇氣的牛排'},computed: {fullName: function () {return this.name + ' : ' + this.nameValue}},methods: {getFullName: function () {return this.name + ' : ' + this.nameValue}}}) </script>3.5 計算屬性的緩存
計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次
4 事件監聽
4.1 v-on基本使用
-
作用：綁定時間監聽器
-
縮寫：@
-
預期：Function | Inline Statement | Object
-
參數：event
4.2 v-on參數
<div id="app"><!-- 1. 時間調用的方法沒有參數 --><button @click="btn1Click()">按鈕1</button><button @click="btn1Click">按鈕1</button><br><!--2. 在事件定義時，寫函數時省略了小括號，但是方法本身需要一個參數的,這個時候Vue會默認將瀏覽器生產的event事件對象作為參數傳入到方法--><button @click="btn2Click(123)">按鈕2</button><button @click="btn2Click()">按鈕2</button><button @click="btn2Click">按鈕2</button><br><!-- 3. 方法定義時，我們需要event對象，同時又需要其他參數 --><!-- 在多用方法時，如何手動的獲取到瀏覽器的event參數對象：$event --><button @click="btn3Click(123,$event)">按鈕3</button><button>按鈕4</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: "你好，有勇氣的牛排"},methods: {btn1Click() {console.log('btn1Click');},btn2Click(event) {console.log("按鈕2：" + event);console.log(event);},btn3Click(abc, event) {console.log("按鈕3");console.log(abc, event);}}}) </script>4.3 v-on修飾符
Vue提供了修飾符來幫助我們方柏霓處理一些事件
-
.stop：調用event.stopPropagation()
-
prevent：調用event.preventDefault()
-
.{keyCode | keyAlias}：只當事件是從特定鍵觸發時才觸發回調
-
.native：監聽組件根元素的原生事件
-
.once：只觸發一次回調
5 條件判斷
5.1 v-if
<div id="app"><div v-if="isShow"><div>666</div></div> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {isShow: true}}) </script>5.2 v-if v-else
<div id="app"><div v-if="isShow"><div>666</div></div><div v-else><div>isShow為false時, 顯示我</div></div> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {isShow: true}}) </script>5.3 v-if v-else-if v-else
<div id="app"><h2 v-if="score>=90">優秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2><h1>{{ result }}</h1> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {score: 99,// showMessage:"無"},computed: {result() {let showMessage = ''if (this.score >= 90) {showMessage = '優秀'} else if (this.score >= 80) {showMessage = '良好'} else if (this.score >= 60) {showMessage = '及格'} else {showMessage = '不及格'}return showMessage}}}) </script>5.4 用戶登錄切換的案例(小問題)
<div id="app"><span v-if="isUserLogin"><label for="username">用戶賬號</label><input type="text" id="username" placeholder="用戶賬號" key="username"></span><span v-else><label for="email">用戶郵箱</label><input type="text" id="email" placeholder="用戶郵箱" key="email"></span><button @click="isUserLogin = !isUserLogin">切換類型</button></div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {isUserLogin: true}}) </script>5.5 v-show
v-if和v-show對比
-
v-if當條件為false時，壓根不會有對應的元素在DOM中。
-
v-show當條件為false時，僅僅是將元素的display屬性設置為none而已
開發中國如何選擇
-
當需要在顯示與隱藏之間切片很頻繁時，使用v-show
-
當只有一次切換時，通常使用v-if
6 循環遍歷
6.1 v-for遍歷數組
語法格式案例：
# 不需要索引 v-for="movie in movies"# 需要索引 v-for=(item,index) in items <div id="app"><!-- 1. 在遍歷的過程中，沒有使用索引值(下標值) --><ul><li v-for="item in names">{{ item }}</li></ul><!-- 2. 在遍歷的過程中，獲取索引值 --><ul><li v-for="(item, index) in names">{{ index + 1 }} - {{ item }}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {names: ['灰太狼', '有勇氣的牛排', '導演']}}) </script>6.2 v-for遍歷對象
<div id="app"><!-- 1. 在遍歷對象的過程中，如果知識獲取一個值，那么獲取到的是value --><ul><li v-for="item in info">{{ item }}</li></ul><!-- 2. 獲取index, key和value 格式：(value, key) --><ul><li v-for="(value, key) in info">{{ key }} : {{ value }}</li></ul><!-- 3. 獲取key和value和index 格式:(value, key, index) --><ul><li v-for="(value, key, index) in info">{{ index + 1 }}-{{ key }} : {{ value }}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {info: {name: '灰太狼',age: 18,height: 1.88}}}) </script>6.3 使用過程添加key
<div id="app"><ul><li v-for="item in letters" :key="item">{{ item }}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {letters: ['A', 'B', 'C', 'D', 'E']}}) </script>6.4 數組方法
<div id="app"><ul><li v-for="item in letters" :key="item">{{ item }}</li><!-- <li v-for="item in letters">{{ item }}</li>--></ul><button @click="btnClick">按鈕</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {letters: ['A', 'B', 'C', 'D', 'E']},methods: {btnClick() {// 1 push方法// this.letters.push('666','777')// 2 pop() 刪除數組中最后一個元素// this.letters.pop();// 3 shift() 刪除數組中第一個元素// this.letters.shift();// 4 unshift() 在數組最前面添加元素// this.letters.unshift('666', '777');// 5 splice作用：刪除元素/插入元素/替換元素// 刪除元素：第二個參數傳入你要刪除幾個元素(如果沒有傳，就刪除后面所有的元素// 替換元素：第二個參數,表示我們要替換幾個元素，后面是用于替換前面的元素// 插入元素：第二個參數，傳入0，并且后面跟上要插入的元素// this.letters.splice(1, 0, '1', '2')// 6 sort()// this.letters.sort();// 7 reverse()this.letters.reverse();// 修改// 1非響應式// 通過索引值修改數組中的元素// this.letters[0] = '666'// 2響應式// this.letters.splice(0, 1, '666')// set(要修改的對象, 索引值,修改后的值)Vue.set(this.letters, 0, '666');}}}) </script>7 階段案例
購物車案例：
https://gitee.com/net920vip/vue-framework/tree/master/LearnVuejs01
https://github.com/net920vip/vue-framework/tree/master/LearnVuejs01
8 v-model
- Vue中使用v-model指令來實現單元數和數據的雙向綁定
等同于
<input type="text" :value="message" @input="message = $event.target.value">8.1 v-model結合checkbox類型
<div id="app"><!-- 1 checkbox單選框--><!-- <label for="protocol">--><!-- <input type="checkbox" id="protocol" v-model="isAgree">同意協議--><!-- </label>--><!-- <h2>您選擇的是：{{ isAgree }}</h2>--><!-- <button :disabled="!isAgree">下一步</button>--><!-- 2 checkbox多選框--><label for=""><input type="checkbox" value="輕音樂" v-model="hobbies">輕音樂<input type="checkbox" value="國學" v-model="hobbies">國學<input type="checkbox" value="思考" v-model="hobbies">思考</label><h2>您的愛好是：{{ hobbies }}</h2><label v-for="item in originHobbies"><input type="checkbox" :value="item" :id="item" v-model="hobbies">{{ item }}</label></div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {isAgree: false, // 單選框hobbies: [], // 多選框originHobbies: ['國學', '輕音樂', '繪畫', '攝影', 'dj', '吉他']}}) </script>8.2 v-model結合select類型
<div id="app"><!-- 1 選擇一個 --><select name="" id="" v-model="hobby"><option value="國學">國學</option><option value="輕音樂">輕音樂</option><option value="繪畫">繪畫</option></select><h2>您的選擇是：{{ hobby }}</h2><!-- 1 選擇多個 --><select name="" id="" v-model="hobbies" multiple><option value="國學">國學</option><option value="輕音樂">輕音樂</option><option value="繪畫">繪畫</option></select><h2>您的選擇是：{{ hobbies }}</h2> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {hobby: "繪畫",hobbies:[]}}) </script>8.3 v-model修飾符
<div id="app"><!-- 1 修飾符：lazy --><input type="text" v-model.lazy="message"><h2>{{ message }}</h2><!-- 2 修飾符：number --><input type="number" v-model.number="age"><h2>{{ age }}---{{ typeof age }}</h2><!-- 3 修飾符：trim --><input type="text" v-model.trim="name"><h2>您輸入的名字：{{ name }}</h2></div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: "你好，有勇氣的牛排",age: 0,name: ''}}) </script>轉載于：
https://www.920vip.net/article/154
總結
以上是生活随笔為你收集整理的Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows扫描域内端口
- 下一篇： unbuntu nginx安装详解 /c