關於閉包的一道題目解析
vue基礎使用 步驟
1. vue的使用要從建立Vue物件開始
var vm = new Vue();
2. 建立vue物件的時候，需要傳遞引數，是json物件，json物件物件必須至少有兩個屬性成員
var vm = new Vue({
el:"#app",
data: {
資料變數:"變數值",
資料變數:"變數值",
資料變數:"變數值",
},
});
el:設定vue可以操作的html內容範圍，值一般就是css的id選擇器。
data: 儲存vue.js中要顯示到html頁面的資料。
3. vue.js要控制器的內容範圍，必須先通過id來設定。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1. 先引入vue核心檔案 --> <script src="vue.js"></script> </head> <body> <!-- 3. 在el屬性物件的標籤中，填寫正確的vue語法展示或者控制資料 --> <div id="app">{{message}} </div> {{message}} </body> <script> // vue的基本使用三個注意事項： // 1. 一個html頁面中可以存在多個vue例項物件，但是例項物件的變數名強烈建議唯一，而且每一個vue物件負責一個特效功能 // 2. js中所有的變數和語法都是區分大小寫的，new Vue() // 3. 建議例項化vue物件的程式碼寫在body的最後面。免得出現html元素無法獲取的錯誤出現 window.onload = function(){ // 2. 對vue的核心物件vm進行例項化var vm = new Vue({ el: "#app", // 接下來vue要操作的元素的選擇符 element的縮寫，表示元素 data:{ // 儲存一些前端使用的資料 message: "hello world", }, }); } </script> </html>
vue的框架思想(mvvm)
Model 指代的就是vue物件的data屬性裡面的資料。這裡的資料要顯示到頁面中。
View 指代的就是vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” 。
ViewModel 指代的是vue.js中我們編寫程式碼時的vm物件了，它是vue.js的核心，負責連線 View 和 Model，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1. 先引入vue核心檔案 --> <script src="vue.js"></script> </head> <body> <!-- V，View，檢視模板 --> <div id="app"> <input v-model="message"><br> {{message}} </div> <script> // new Vue，VM物件，負責時刻保證檢視模板中的資料和data裡面的資料一致！ var vm = new Vue({ el:"#app", data:{ // M，Model，模型裡面的所有資料，將來都會作為vm物件的屬性存在 message: "一篇文章", num: 16, } }) </script> </body> </html>
在瀏覽器中可以在 console.log通過 vm物件可以直接訪問el和data屬性,甚至可以訪問data裡面的資料
console.log(vm.$el) # #app vm物件可以控制的範圍
console.log(vm.$data); # vm物件要顯示到頁面中的資料
console.log(vm.$data.message); # 訪問data裡面的資料
console.log(vm.message); # 這個 message就是data裡面宣告的資料,也可以使用 vm.變數名顯示其他資料,message只是舉例.
1. 如果要輸出data裡面的資料作為普通標籤的內容，需要使用{{ }}
用法：
vue物件的data屬性：
data:{
name:"小明",
}
標籤元素：
<h1>{{ name }}</h1>
2. 如果要輸出data裡面的資料作為表單元素的值，需要使用vue.js提供的元素屬性v-model
用法：
vue物件的data屬性：
data:{
name:"小明",
}
表單元素：
<input v-model="name">
使用v-model把data裡面的資料顯示到表單元素以後，一旦使用者修改表單元素的值，則data裡面對應資料的值也會隨之發生改變，甚至，頁面中凡是使用了這個資料都會發生變化。
顯示資料
1. 在雙標籤中顯示純文字資料一般使用 {{}} 類完成資料的顯示,雙括號中還可以支援 js 表示式和符合 結束語法的程式碼,如函式的呼叫.
2. 在表單輸入框中顯示資料要使用 v-model 類完成資料的顯示
3. 如果雙標籤的內容要顯示資料包含html低嗎,則使用 v-html來完成.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{ str1: "hello", num: 20, price: 7.1, url1: "http://www.baidu.com", url2: "http://www.taobao.com" } }) } </script> </head> <body> <p>{{ str1 }}</p> <p>{{ str1.split("").reverse().join("") }}</p> <p>num和num2中比較大的數是：{{ num>num2? num:num2 }}</p> <input type="text" v-model="name"> <p>{{(price+0.8).toFixed(2)}}</p> </body> </html>
雙花括號僅用輸出文字內容,如果要輸出 html 程式碼,則不能使用這個,要使用 v-html 來輸出, v-htnl 必須在 html 標籤裡面作出屬性寫出來.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div class="app"> <h1>{{title}}</h1> <h3>{{url1}}</h3> {{img}}<br> <span v-html="img"></span> </div> <script> let vm = new Vue({ el:".app", data:{ title:"我的vue", url1:"我的收穫地址", img:'<img src="images/shendan.png">', } }) </script> </body> </html>
1. 可以在普通標籤中中使用 {{}} 或者 v-html 來輸出 data裡面的資料
<h1>{{message}}<h1>
2. 可以在表單中使用 v-model 屬性來輸出 data 裡面的資料,同時還可以修改 打啊裡面的資料
<input type+'text' v-model='username'?
在輸入內容到普通標籤的使用{{}} v-model 或者 v-html 等 vue的屬性,或者({{}} 都支援jd程式碼. <h1>{{str1.split("").reverse().join("")}}</h1> <!-- 3.2 支援js的運算子--> <h1>{{num1+3}}</h1> <!-- 3.3 js還有一種運算子,三元運算子,類似於python裡面的三元表示式 三元運算子的語法: 判斷條件 ? 條件為true : 條件為false的結果 python 三元表示式[三目運算子]的語法: a if 條件 else b --> <h1>num1和num2之間進行比較,最大值:{{ num2>num1?num2:num1 }}</h1>
栗子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的快速使用</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{url}}</p> <div>{{text}}</div> <div v-html="text"></div> <input v-model="url"> <div>num是{{num%2==0?'偶數':'奇數'}}</div> <div>num的下一個數字：{{num-0+1}}</div> <input type="text" v-model="num"> <div>{{message.split("").reverse().join("")}}</div> <input type="text" v-model="message"> </div> <script> var vm = new Vue({ el:"#app", // 設定vue物件控制的標籤範圍 data:{ // vue要操作的資料 url:"http://www.luffycity.com", text:"<h1>大標題</h1>", num: 100, message:"abcdef", }, }) </script> </body> </html>