Vue.js 基礎1
Vue 前端框架 MVVM -- model -- view -- viewmodel --- template模板渲染javascript
model--數據css
view -- 視圖 -- html標籤 相似於jquery $('#d1').text('xxx')html
viewmodel：數據驅動視圖 vue的核心，model數據直接驅動到視圖中(html標籤中)前端
django -- MTV模式 model template view + url控制器 template這一塊功能就去掉了vue
view--視圖： 後端邏輯 FBV和CBVjava
前端 ECMAScript5 -- es5python
vue多數用的都是es6語法react
前戲
es6的基本語法
let ：特色： 1.a是局部做用域的function xx(){let a = 'xxoo';} if(){let a = 'ss';} 2.不存在變量提高 3.不能重複聲明（var能夠重複聲明）4 let聲明的全局變量不從屬於window對象，var聲明的全局變量從屬於window對象。
關於第4個特色的簡單說明：
ES5聲明變量只有兩種方式：var和function。
ES6有let、const、import、class再加上ES5的var、function共有六種聲明變量的方式。
還須要瞭解頂層對象：瀏覽器環境中頂層對象是window.
ES5中，頂層對象的屬性等價於全局變量。var a = 10; window.a
ES6中，有所改變：var、function聲明的全局變量，依然是頂層對象的屬性；let、const、class聲明的全局變量不屬於頂層對象的屬性，也就是說ES6開始，全局變量和頂層對象的屬性開始分離、脫鉤，目的是以防聲明的全局變量將window對象的屬性形成污染，由於window對象是頂層對象，它裏面的屬性是各個js程序中均可以使用的，不利於模塊化開發，而且window對象有不少的自有屬性，也爲了防止對window的自由屬性的污染，因此在ES6中將頂層對象和全局變量進行隔離。
舉例：
var a = 1;
console.info(window.a); // 2
let b = 2;
console.info(window.b); //undefined
// var a; -- undefined
console.log(a); -- undefined
var a = 10;
var b = '隔壁';
console.log(c); -- 報錯
let c = '隔壁老王'；
const ：特色： 1.局部做用域 2.不存在變量提高 3.不能重複聲明 4.通常聲明不可變的量
const pi = 3.1415926;
//pi = 'xx' -- 報錯
模板字符串：tab鍵上面的反引號，${變量名}來插入值 相似於python的三引號 """adfadsf"""，能夠寫多行文本
另外還能夠經過它來完成字符串格式化
示例：
let bb = 'jj';
var ss = `你好${bb}`;
console.log(ss); -- '你好jj'
前端的一道面試題(自行忽略)：jquery
let len = 10;
function fn() {
console.info(this.len)
}
fn(); //undefined
let Person = {
len: 5,
say: function() {
fn(); //undefined
arguments[0](); //undefined arguments是object類型，它內部以索引取值獲取的函數執行時，會以箭頭函數的形式執行，因此執行console.info(this.len) 這個this指向的實際上是arguments對象，arguments對象有length屬性，可是沒有len屬性，length屬性是傳入的實參個數
}
}
Person.say(fn);
es5和es6的函數對比
//ES5寫法
function add(x){
return x
}
add(5);
//匿名函數
var add = function (x) {
return x
};
add(5);
//ES6的匿名函數
let add = function (x) {
return x
};
add(5);
//ES6的箭頭函數,就是上面方法的簡寫形式
let add = (x) => {
return x
};
console.log(add(20));
//更簡單的寫法，但不是很易閱讀
let add = x => x;
console.log(add(5));
多個參數的時候必須加括號，函數返回值仍是隻能有一個，沒有參數的，必須寫一個()
let add = (x,y) => x+y;
自定義對象中封裝函數的寫法
//es5對象中封裝函數的方法
var name = '子俊';
var person1 = {
name:'超',
age:18,
f1:function () { //在自定義的對象中放函數的方法
console.log(this);//this指向的是當前的對象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) // '超'
}
};
//<h1 id='d1'>xxx</h1>
//document.getElementById('d1').onclick = function(){this.innerText;};
person1.f1(); //經過自定對象來使用函數
//ES6中自定義對象中來封裝箭頭函數的寫法
var username = '子俊'; //-- window.username
let person2 = {
name:'超',
age:18,
//f1:function(){};
f1: () => { //在自定義的對象中放函數的方法
console.log(this); //this指向的再也不是當前的對象了，而是指向了person的父級對象(稱爲上下文)，而此時的父級對象是咱們的window對象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(window);//還記得window對象嗎，全局瀏覽器對象，打印結果和上面同樣：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(this.username) //'子俊'
}
};
person2.f1(); //經過自定對象來使用函數
person2 -- window.person2
//而咱們使用this的時候，但願this是person對象，而不是window對象，因此還有下面這種寫法
let person3 = {
name:'超',
age:18,
//f1:function(){};
//f1(){}
f1(){ //至關於f1:function(){},只是一種簡寫方式,稱爲對象的單體模式寫法，寫起來也簡單，vue裏面會看用到這種方法
console.log(this);//this指向的是當前的對象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) //'超'
}
};
person3.f1()
es5和es6的類寫法對比（瞭解）
<script>
//es5寫類的方式
function Person(name,age) {
//封裝屬性
this.name = name; //this--Python的self
this.age = age;
}
//封裝方法，原型鏈
Person.prototype.f1 = function () {
console.log(this.name);//this指的是Person對象, 結果：'超'
};
//封裝方法，箭頭函數的形式寫匿名函數
Person.prototype.f2 = ()=>{
console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} this指向的是window對象
};
var p1 = new Person('超',18);
p1.age
p1.f1();
p1.f2();
//其實在es5咱們將js的基本語法的時候，沒有將類的繼承，可是也是能夠繼承的，還記得嗎，那麼你想，繼承以後，咱們是否是能夠經過子類實例化的對象調用父類的方法啊，固然是能夠的，知道一下就好了，咱們下面來看看es6裏面的類怎麼寫
class Person2{
constructor(name,age){ //對象裏面的單體模式，記得上面將函數的時候的單體模式嗎，這個方法相似於python的__init__()構造方法，寫參數的時候也能夠寫關鍵字參數 constructor(name='超2',age=18)
//封裝屬性
this.name = name;
this.age = age;
} //注意這裏不能寫逗號
showname(){ //封裝方法
console.log(this.name);
} //不能寫逗號
showage(){
console.log(this.age);
}
}
let p2 = new Person2('超2',18);
p2.showname() //調用方法 '超2'
//es6的類也是能夠繼承的，這裏我們就不作細講了，未來你須要的時候，就去學一下吧，哈哈，我記得是用的extends和super
</script>
1. vue.js的快速入門使用
1.1 vue.js庫的下載
vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月發佈的。git
另外幾個常見的工具庫：react.js /angular.js
官方網站：
英文：https://vuejs.org/
官方文檔：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，咱們學習2.x版本的。2.x到3.x是平滑過渡的，也就是說你以前用2.x寫的代碼，用3.x的版本的vue.js也是沒問題的。
1.2 vue.js庫的基本使用
在github下載：https://github.com/vuejs/vue/releases
在官網下載地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入相似於jQuery，開發中可使用開發版本vue.js，產品上線要換成vue.min.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- {{ message }} 表示把vue對象裏面data屬性中的對應數據輸出到頁面中 -->
<!-- 在雙標籤中顯示數據要經過{{ }}來完成 -->
<p>{{ message }}</p>
</div>
</body>
<script>
// vue.js的代碼開始於一個Vue對象。因此每次操做數據都要聲明Vue對象開始。
let vm = new Vue({
el:'#app', // 設置當前vue對象要控制的標籤範圍。
// data屬性寫法方式1
data:{ // data是將要展現到HTML標籤元素中的數據。
message: 'hello world!',
}
// 方式2
// data:function () {
// return {
// 'msg':'掀起你的蓋頭來1！'
// }
// }
// 方式3
data(){ // 單體模式 這種寫法用的居多，而且後面學習中有個地方必定要這樣寫，因此咱們就記下來這種寫法就能夠了
return {
'msg':'掀起你的蓋頭來2！',
}
}
});
</script>
</html>
總結：
1. vue的使用要從建立Vue對象開始
var vm = new Vue();
2. 建立vue對象的時候，須要傳遞參數，是自定義對象，自定義對象對象必須至少有兩個屬性成員
var vm = new Vue({
el:"#app",
data: {
數據變量:"變量值",
數據變量:"變量值",
數據變量:"變量值",
},
});
el:圈地，劃地盤，設置vue能夠操做的html內容範圍，值就是css的id選擇器,其餘選擇器也能夠，可是多用id選擇器。
data: 保存vue.js中要顯示到html頁面的數據。
3. vue.js要控制器的內容外圍，必須先經過id來設置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
vue中的變量能夠直接進行一些簡單直接的js操做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue</title>
</head>
<body>
<div id="app">
<!-- vue的模板語法，和django的模板語法相似 -->
<h2>{{ msg }}</h2> <!-- 放一個變量，會到data屬性中去找對應的值 -->
<!-- 有人說，咱們直接這樣寫數據不就行嗎，可是你注意，咱們未來的數據都是從後端動態取出來的，不能寫死這些數據啊，你說對不對 -->
<h2>{{ 'hello beautiful girl!' }}</h2> <!-- 直接放一個字符串 -->
<h2>{{ num+1 }}</h2> <!-- 四則運算 -->
<h2>{{ 2+1 }}</h2> <!-- 四則運算 -->
<h2>{{ {'name':'chao'} }}</h2> <!-- 直接放一個自定義對象 -->
<h2>{{ person.name }}</h2> <!-- 下面data屬性裏面的person屬性中的name屬性的值 -->
<h2>{{ 1>2?'真的':'假的' }}</h2> <!-- js的三元運算 -->
<h2>{{ msg2.split('').reverse().join('') }}</h2> <!-- 字符串反轉 -->
</div>
<!-- 1.引包 -->
<script src="vue.js"></script>
<script>
//2.實例化對象
new Vue({
el:'#app',
data:{
msg:'黃瓜',
person:{
name:'超',
},
msg2:'hello Vue',
num:10,
}
})
</script>
</body>
</html>
1.3 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue對象的data屬性裏面的數據。這裏的數據要顯示到頁面中。
View 指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之爲「視圖模板」 。
ViewModel 指代的是vue.js中咱們編寫代碼時的vm對象了，它是vue.js的核心，負責鏈接 View 和 Model，保證視圖和數據的一致性，因此前面代碼中，data裏面的數據被顯示中p標籤中就是vm對象自動完成的。
編寫代碼，讓咱們更加清晰的瞭解MVVM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
// 建立vm對象
var vm = new Vue({
el: "#app",
data: {
name:"大標題",
age:16,
},
})
}
</script>
</head>
<body>
<div id="app">
<!-- 在雙標籤中顯示數據要經過{{ }}來完成 -->
<h1>{{name}}</h1>
<p>{{age}}</p>
<!-- 在表單輸入框中顯示數據要使用v-model來完成，模板語法的時候，咱們會詳細學習 -->
<input type="text" v-model="name">
</div>
</body>
</html>
代碼執行效果：
在瀏覽器中能夠在 console.log經過 vm對象能夠直接訪問el和data屬性,甚至能夠訪問data裏面的數據
console.log(vm.$el) # #box vm對象能夠控制的範圍 console.log(vm.$data); # vm對象要顯示到頁面中的數據 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裏面對應數據的值也會隨之發生改變，甚至，頁面中凡是使用了這個數據都會發生變化。
2. Vue指令系統的經常使用指令
指令 (Directives) 是帶有「v-」前綴的特殊屬性。每個指令在vue中都有固定的做用。
在vue中，提供了不少指令，經常使用的有：v-html、v-if、v-model、v-for等等。
2.1 文本指令v-html和v-text
v-text至關於js代碼的innerText，至關於咱們上面說的模板語法，直接在html中插值了，插的就是文本，若是data裏面寫了個標籤，那麼經過模板語法渲染的是文本內容，這個你們不陌生，這個v-text就是輔助咱們使用模板語法的
v-html至關於innerHtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue</title>
</head>
<body>
<div id="app">
<!-- vue的模板語法 -->
<div>{{ msg }}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
//記着data中是一個函數，函數中return一個對象，能夠是一個空對象，但必須return
return{
msg:'<h2>超</h2>', //後端返回的是標籤，那麼咱們就能夠直接經過v-html渲染出來標籤效果
}
}
})
</script>
</body>
</html>
指令會在vm對象的data屬性的數據發生變化時，會同時改變元素中的其控制的內容或屬性。
由於vue的歷史版本緣由，因此有一部分指令都有兩種寫法：
vue1.x寫法 vue2.x的寫法
v-html ----> {{ }} # vue2.x 也支持v-html
v-bind:屬性名 ----> :屬性
v-on:事件名 ----> @事件名
2.2 條件渲染指令v-if和v-show
vue中提供了兩個指令能夠用於判斷是否要顯示元素，分別是v-if和v-show。
2.4.1 v-if
標籤元素：
<!-- vue對象最終會把條件的結果變成布爾值 -->
<h1 v-if="ok">Yes</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
2.2.2 v-else
v-else指令來表示 v-if 的「else 塊」，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。
標籤元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
2.2.3 v-else-if
在vue2.1.0版本以後，又添加了v-else-if，v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用。
能夠出現多個v-else-if語句，可是v-else-if以前必須有一個v-if開頭。後面能夠跟着v-else，也能夠沒有。
標籤元素：
<h1 v-if="num===1">num的值爲1</h1>
<h1 v-else-if="num===2">num的值爲2</h1>
<h1 v-else>num的值是{{num}}</h1>
data數據：
data:{
num:2
}
2.2.4 v-show
標籤元素：
<h1 v-show="ok">Hello!</h1>
data數據：
data:{
ok:false // true則是顯示，false是隱藏
}
簡單總結v-if和v-show
v-show後面不能v-else或者v-else-if v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文檔中移除元素[DOM操做中的remove] v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。 v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。 相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。 通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。
2.3 操做屬性v-bind
格式：
<標籤名 :標籤屬性="data屬性"></標籤名>
<p :title="str1">{{ str1 }}</p> <!-- 也可使用v-html顯示雙標籤的內容，{{ }} 是簡寫 -->
<a :href="url2">淘寶</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的寫法 -->
顯示wifi密碼效果：配合v-on事件綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="type" placeholder="請輸入wifi密碼"> <button @click="type='text'">顯示密碼</button>
<!--切換密碼顯示寫法，可是通常不建議將這麼複雜的邏輯直接寫到屬性值裏面，通常經過事件操做來玩，下面就說一下事件操做-->
<button @click="type=(type=='password'?'text':'password')">切換顯示密碼</button>
// 還能夠按照下面的方式用，但必須是{}包裹
<p v-bind:class="{active:status===false}">你是個p</p>
<p v-bind:class="{active:status}">你是個p</p>
</div>
<script>
let vm = new Vue({
el:"#index",
data:{
url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
title:"路飛學成",
type:"password",
status:false,
}
})
</script>
</body>
</html>
2.4 事件綁定v-on和methods屬性
有兩種事件操做的寫法，@事件名 和 v-on:事件名
<button v-on:click="num++">按鈕</button> <!-- v-on 是vue1.x版本的寫法 --> <button @click="num+=5">按鈕2</button>
總結：
1. 使用@事件名來進行事件的綁定
語法：
<h1 @click="num++">{{num}}</h1>
2. 綁定的事件的事件名，所有都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
....
例1:wifi密碼切換顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="type" placeholder="請輸入wifi密碼">
<button @click="clickhander">{{type_tips}}</button>
<button @mouseover="clickhander">{{type_tips}}</button> <!--事件名稱都是按照js中的事件名稱來的，因此可使用的事件不少-->
<button v-on:click="clickhander">{{type_tips}}</button>
</div>
<script>
let vm = new Vue({
el:"#index",
// 在data能夠定義當前vue對象調用的屬性,調用格式: this.變量名,例如： this.title
data:{
url:"https://www.luffycity.com/static/img/head-logo.a7cedf3.svg",
title:"路飛學成",
type:"password",
type_tips: "顯示密碼",
},
methods:{ // 在methods中能夠定義當前vue對象調用的方法,調用格式：this.方法名(),例如： this.clickhander()
clickhander(){
// alert(this.type); // 調用上面的data裏面的數據
if(this.type=="password"){
this.type="text";
this.type_tips="隱藏密碼";
}else{
this.type="password";
this.type_tips="顯示密碼";
}
}
}
})
</script>
</body>
</html>
例2:完成商城的商品增長減小數量
步驟：
- 給vue對象添加操做數據的方法
- 在標籤中使用指令調用操做數據的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="++num">+</button>
<input type="text" v-model="num">
<button @click="sub">-</button> <!-- 有人說--也能夠，是的，可是單純的使用--你會發現，數據會出現負數，負數是不合理的，因此要加判斷，邏輯就複雜一些了，直接寫在屬性值裏面不太好，那麼想到的就是事件 -->
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
num:0,
},
methods:{
// sub:function(){},下面是這個寫法的縮寫
sub(){
if(this.num<=1){
this.num=0;
}else{
this.num--;
}
}
}
})
</script>
</body>
</html>
<!--#box>(button+input+button) tab鍵，快速生成html標籤-->
2.5 操做樣式
2.5.1 控制標籤class類名
格式： <h1 :class="值">元素</h1> 值能夠是對象、對象名、數組（數組的方式用的比較少）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
color: red;
border: 1px solid #000;
}
.box2{
background-color: orange;
font-size: 32px;
}
</style>
</head>
<body>
<div id="box">
<!--- 添加class類名，值是一個對象
{
class類1:布爾值變量1,
class類2:布爾值變量2,
}
-->
<p :class="{box1:myclass1}">一個段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一個段落</p>
</div>
<script>
let vm1=new Vue({
el:"#box",
data:{
myclass1:false, // 布爾值變量若是是false，則不會添加對象的屬性名做爲樣式
myclass2:true, // 布爾值變量若是是true，則不會添加對象的屬性名做爲樣式
myclass3:false,
},
})
</script>
<!-- 上面的代碼能夠:class的值保存到data裏面的一個變量，而後使用該變量做爲:class的值 -->
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app">
<button @click="mycls.box4=!mycls.box4">改變背景</button>
<button @click="mycls.box5=!mycls.box5">改變字體顏色</button>
<p :class="mycls">第二個段落</p>
<!-- 還有下面這種將類值看成屬性值來操做的方式 -->
<p :class="status?'bg1':'bg2'">一段文本</p> <!-- 注意，bg1必須加引號 -->
</div>
<script>
let vm2 = new Vue({
el:"#app",
data:{
mycls:{
box4:false,
box5:true
},
status:true,
}
})
</script>
<!-- 批量給元素增長多個class樣式類 -->
<style>
.box6{
background-color: red;
}
.box7{
color: green;
}
.box8{
border: 1px solid yellow;
}
</style>
<div id="app2">
<p :class="[mycls1,mycls2]">第三個段落</p>
</div>
<script>
let vm3 = new Vue({
el:"#app2",
data:{
mycls1:{
box6:true,
box7:true,
},
mycls2:{
box8:true,
}
}
})
</script>
</body>
</html>
總結：
1. 給元素綁定class類名，最經常使用的就是第二種。
vue對象的data數據：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}
html元素：
<div class="box" :class="myObj">2222</div>
最終瀏覽器效果：
<div class="box complete">2222</div>
2.5.2 控制標籤style樣式
格式1：值是json對象，對象寫在元素的:style屬性中
標籤元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 注意：不能出現中橫槓，有的話就套上'font-size'，或者去掉橫槓，後一個單詞的首字母大寫，好比fontSize -->
data數據以下：
data: {
activeColor: 'red',
fontSize: 30
}
格式2：值是對象變量名，對象在data中進行聲明
標籤元素：
<div v-bind:style="styleObject"></div>
data數據以下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
格式3：值是數組
標籤元素：
<div v-bind:style="[style1, style2]"></div>
data數據以下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
2.5.2 實例-vue版本選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 設置行和當前元素的高度相等,就可讓文本內容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @click="num=0" :class="num==0?'current':''">國內新聞</span>
<span @click="num=1" :class="num==1?'current':''">國際新聞</span>
<span @click="num=2" :class="num==2?'current':''">銀河新聞</span>
<!--<span>{{num}}</span>-->
</div>
<div class="content">
<div class="list" :class="num==0?'active':''">國內新聞列表</div>
<div class="list" :class="num==1?'active':''">國際新聞列表</div>
<div class="list" :class="num==2?'active':''">銀河新聞列表</div>
</div>
</div>
<script>
// 思路：
// 當用戶點擊標題欄的按鈕[span]時，顯示對應索引下標的內容塊[.list]
// 代碼實現：
var card = new Vue({
el:"#card",
data:{
num:0,
},
});
</script>
</body>
</html>
2.6 列表渲染指令v-for
在vue中，能夠經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象。
數據是數組：
<ul>
<!--i是列表的每個元素-->
<li v-for="book in book_list">{{book.title}}</li>
</ul>
<ul>
<!-- v-for不只能夠遍歷數組，還能夠遍歷對象，這裏你們記住v-for裏面的一個東西 :key, 就是v-bind:key，這個key是幹什麼的呢，就是爲了給如今已經渲染好的li標籤作個標記，之後即使是有數據更新了，也能夠在這個li標籤裏面進行數據的更新，不須要再讓Vue作從新生成li標籤的dom操做，提升頁面渲染的性能，由於咱們知道頻繁的添加刪除dom操做對性能是有影響的，我如今將數據中的id綁定到這裏，若是數據裏面有id，通常都用id，若是沒有id，就綁定v-for裏面那個index(固然你看你給這個索引取的變量名是什麼，我這裏給索引取的名字是index)，這裏面它用的是diff算法，回頭再說這個算法 -->
<!-- <li v-for="(item,index) in data.users" :key="item.id" @click> 還能夠綁定事件 -->
<li v-for="(item,index) in book_list" :key="item.id"> 第{{index+1}}本圖書：{{book.title}}</li>
<!-- v-for的優先級最高，先把v-for遍歷完，而後給:key加數據，還有，若是沒有bind這個key，有可能你的頁面都後期用動態數據渲染的時候，會出現問題，因此之後你們記着，必定寫上v-bind:key -->
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book_list:[
{"id":1,"title":"圖書名稱1","price":200},
{"id":2,"title":"圖書名稱2","price":200},
{"id":3,"title":"圖書名稱3","price":200},
{"id":4,"title":"圖書名稱4","price":200},
]
}
})
</script>
數據是對象：
<ul>
<!--i是每個value值-->
<li v-for="value in book">{{value}}</li>
</ul>
<ul>
<!--value是每個value值,attr是每個鍵名-->
<li v-for="value,attr in book">{{attr}}:{{value}}</li>
</ul>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book: {
// "attr屬性名":"value屬性值"
"id":11,
"title":"圖書名稱1",
"price":200
},
},
})
</script>
練習：
goods:[
{"name":"python入門","price":150},
{"name":"python進階","price":100},
{"name":"python高級","price":75},
{"name":"python研究","price":60},
{"name":"python放棄","price":110},
]
# 把上面的數據採用table表格輸出到頁面，價格大於60的那一條數據須要添加背景色
3. Vue對象提供的屬性功能
3.1 過濾器
過濾器，就是vue容許開發者自定義的文本格式化函數，可使用在兩個地方：輸出內容和操做數據中。
定義過濾器的方式有兩種,全局和局部過濾器
3.1.1 使用Vue.filter()進行全局定義
Vue.filter("RMB1", function(v){
//就是來格式化(處理)v這個數據的
if(v==0){
return v
}
return v+"元"
})
3.1.2 在vue對象中經過filters屬性來定義
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
示例：數據小數點保留3位，並在後面加上一個元字
Filter.js
// 全局過濾器
// Vue.filter("過濾器名稱","調用過濾器時執行的函數")
Vue.filter("RMB",function(value){
return value+"元";
});
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
價格：{{price.toFixed(3)}}<br>
價格：{{price|keepdot2(3)|RMB}}<br>
價格：{{price|keepdot2(3)|RMB}}<br>
價格：{{price|keepdot2(3)|RMB}}<br>
價格：{{price|keepdot2(3)}}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3
},
methods:{},
// 普經過濾器[局部過濾器]
filters:{
keepdot2(value,dot){ //這裏有兩個參數，第二個參數必須是調用過濾器時過濾器函數名稱括號裏面的值
return value.toFixed(dot)
}
}
})
</script>
</body>
</html>
3.2 計算和偵聽屬性
3.2.1 計算屬性
咱們以前學習過字符串反轉，若是直接把反轉的代碼寫在元素中，則會使得其餘同事在開發時時不易發現數據被調整了，因此vue提供了一個計算屬性(computed)，可讓咱們把調整data數據的代碼存在在該屬性中。其實計算屬性主要用於監聽，能夠監聽多個對象，後面學了監聽以後再說。
<!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: "abcdefgh"
},
computed:{ //計算屬性：裏面的函數都必須有返回值
strRevs: function(){
var ret = this.str1.split("").reverse().join("");
return ret
}
}
});
}
</script>
</head>
<body>
<div id="app">
<p>{{ str1 }}</p>
<p>{{ strRevs }}</p>
</div>
</body>
</html>
示例：過濾器和計算屬性的簡單對比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
原價格：{{price|k2}}<br>
折扣價：{{new_price}}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3,
sale: 0.6,
},
// methods:{}
// 過濾器
filters:{
k2(value){
return value.toFixed(2)
}
},
// 計算屬性
computed:{
new_price(){
return (this.price*this.sale).toFixed(2);
}
}
})
</script>
</body>
</html>
3.2.2 監聽屬性
偵聽屬性，能夠幫助咱們偵聽data某個數據的變化，從而作相應的自定義操做。
偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值通常是函數，當偵聽的data數據發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化後的數據值，第二個是變化前的數據值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
num:20
},
watch:{
num:function(newval,oldval){
//num發生變化的時候，要執行的代碼
console.log("num已經發生了變化！",newval,oldval);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<button @click="num++">按鈕</button>
</div>
</body>
</html>
示例：用戶名長度限制4-10位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
<form action="">
帳號：<input type="text" v-model="form.username"><span :style="user_style">{{user_text}}</span><br><br>
密碼：<input type="password" v-model="form.password"><br><br>
確認密碼：<input type="password" v-model="form.password2"><br><br>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
form:{
username:"",
password:"",
password2:"",
},
user_style:{
color: "red",
},
user_text:"用戶名長度只能是4-10位"
},
// 監聽屬性
// 監聽屬性的變化
watch:{
"form.username":function(value){ //注意，使用數據屬性中的某個屬性的時候，若是使用的是該數據中的內部屬性，別忘了加雙引號
if(value.length>=4 && value.length<=10){
this.user_style.color="blue";
this.user_text="用戶名長度合法！";
}else{
this.user_style.color="red";
this.user_text="用戶名長度只能是4-10位！";
}
}
}
})
</script>
</body>
</html>
3.3 vue對象的生命週期鉤子函數
每一個Vue對象在建立時都要通過一系列的初始化過程。在這個過程當中Vue.js會自動運行一些叫作生命週期的的鉤子函數，咱們可使用這些函數，在對象建立的不一樣階段加上咱們須要的代碼，實現特定的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
//$(function(){})() $.ready() -- window.onload = function(){}
var vm = new Vue({
el:"#app",
data:{
num:0
},
beforeCreate:function(){
console.log("beforeCreate,vm對象還沒有建立,num="+ this.num); //undefined，就是說data屬性中的值尚未放到vm對象中
this.name=10; // 此時沒有this對象呢，因此設置的name無效，被在建立對象的時候被覆蓋爲0
console.log(this.$el) //undefined
},
created:function(){
// 用的居多，通常在這裏使用ajax去後端獲取數據，而後交給data屬性
console.log("created,vm對象建立完成,設置好了要控制的元素範圍,num="+this.num ); // 0 也就是說data屬性中的值已經放到vm對象中
this.num = 20;
console.log(this.$el) //undefined
},
beforeMount:function(){
console.log( this.$el.innerHTML ); // <p>{{num}}</p> ,vm對象已經幫咱們獲取到了這個視圖的id對象了
console.log("beforeMount,vm對象還沒有把data數據顯示到頁面中,num="+this.num ); // 20,也就是說vm對象尚未將數據添加到咱們的視圖中的時候
this.num = 30;
},
mounted:function(){
// 用的居多，通常在這裏使用ajax去後端獲取數據而後經過js代碼對頁面中原來的內容進行更改
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("mounted,vm對象已經把data數據顯示到頁面中,num="+this.num); // 30,也就是說vm對象已經將數據添加到咱們的視圖中的時候
},
// 後面兩個簡單做爲了解吧，測試的時候最好單獨測試下面兩個方法
beforeUpdate:function(){
// this.$el 就是咱們上面的el屬性了，$el表示當前vue.js所控制的元素#app
console.log( this.$el.innerHTML ); // <p>30</p>
console.log("beforeUpdate,vm對象還沒有把更新後的data數據顯示到頁面中,num="+this.num); // beforeUpdate----31
},
updated:function(){
console.log( this.$el.innerHTML ); // <p>31</p>
console.log("updated,vm對象已經把過呢更新後的data數據顯示到頁面中,num=" + this.num ); // updated----31
},
});
}
</script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="num++">按鈕</button>
</div>
</body>
</html>
總結：
在vue使用的過程當中，若是要初始化操做，把初始化操做的代碼放在 mounted 中執行。 mounted階段就是在vm對象已經把data數據實現到頁面之後。通常頁面初始化使用。例如，用戶訪問頁面加載成功之後，就要執行的ajax請求。 另外一個就是created，這個階段就是在 vue對象建立之後，把ajax請求後端數據的代碼放進 created
3.4 阻止事件冒泡和刷新頁面
使用.stop和.prevent
示例1：阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 200px;
height: 200px;
background: #ccc;
}
.box2{
width: 100px;
height: 100px;
background: pink;
}
</style>
<script src="js/vue.min.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{}
})
}
</script>
</head>
<body>
<div id="app">
<div class="box1" @click="show1('box1')">
<div class="box2" @click.stop="show2('box2')"></div> <!-- @click.stop來阻止事件冒泡,下面再加個prevent也能夠 -->
<div class="box2" @click.stop.prevent="show2('box2')"></div>
</div>
<form action="#">
<input type="text">
<input type="submit">
<input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent來阻止表單提交，從而不刷新頁面 -->
</form>
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data(){
return {
currentIndex:1,
'msg':'hello',
'price':200.1,
inp:'',
}
},
methods:{
show1(val){
console.log(val);
},
show2(val){
console.log(val);
}
}
})
</script>
</html>
示例2：阻止form表單提交動做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
<form action="">
帳號：<input type="text" v-model="user"><br><br>
密碼：<input type="password" v-model="pwd"><br><br>
<button @click.prevent="loginhander">登陸</button>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
user:"",
pwd:"",
},
methods:{
loginhander(){
if(this.user.length<3 || this.pwd.length<3){
// 長度過短不能登陸
alert("長度過短不能登陸");
// 也能夠寫個return false; 也能夠不寫，prevent直接就是阻止form表單的提交動做
}else{
// 頁面跳轉
location.assign("http://www.baidu.com");
//或者：
//location.href="http://www.baidu.com";
}
}
}
})
</script>
</body>
</html>
3.5綜合案例-todolist
個人計劃列表
html代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增長" id="btn1" class="inputbtn">
<ul id="list" class="list">
<!-- javascript:; # 阻止a標籤跳轉 -->
<li>
<span>學習html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">刪除</a>
</li>
<li><span>學習css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
<li><span>學習javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
</ul>
</div>
</body>
</html>
特效實現效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="todolist" class="list_con">
<h2>To do list</h2>
<input type="text" v-model="message" class="inputtxt">
<input type="button" @click="addItem" value="增長" class="inputbtn">
<ul id="list" class="list">
<li v-for="item,key in dolist">
<span>{{item}}</span>
<a @click="upItem(key)" class="up" > ↑ </a>
<a @click="downItem(key)" class="down"> ↓ </a>
<a @click="delItem(key)" class="del">刪除</a>
</li>
</ul>
</div>
<script>
// 計劃列表代碼
let vm = new Vue({
el:"#todolist",
data:{
message:"",
dolist:[
"學習html",
"學習css",
"學習javascript",
]
},
methods:{
addItem(){
if(this.messsage==""){
return false;
}
this.dolist.push(this.message);
this.message = ""
},
delItem(key){
this.dolist.splice(key, 1);
},
upItem(key){
if(key==0){
return false;
}
// 向上移動
let result = this.dolist.splice(key,1); // 注意返回的是數組
this.dolist.splice(key-1,0,result[0]);
},
downItem(key){
// 向下移動
let result = this.dolist.splice(key, 1);
console.log(result);
this.dolist.splice(key+1,0,result[0]);
}
}
})
</script>
</body>
</html>
splice方法的簡單使用
刪除 let xx = [11,22,33,44,55]; xx.splice(2,2); 刪除替換 let xx = [11,22,33,44,55]; xx.splice(2,2,'aa','bb','cc','dd'); [11, 22, "aa", "bb", "cc", "dd", 55]
a標籤href屬性
<a href="#">百度</a> <!--href屬性爲空時，刷新頁面--> <!--不寫href屬性，就是普通文本標籤--> <!-- 當href屬性等於某個值時，頁面跳轉到對應的頁面 --> <!-- 當href屬性等於javascript:void (0);簡寫javascript:;時，不刷新也不跳轉 --> <!-- 當href屬性等於#時，不刷新也不跳轉，可是會在url上加個#號結尾 -->
相關文章
- 1. Vue.js基礎教程（1）--Vue.js介紹
- 2. vue.js基礎學習（1）
- 3. 零基礎學習 Vue.JS ——（1）
- 4. 3-1-1-Vue.js 基礎回顧
- 5. Vue.js學習筆記1 - Vue基礎
- 6. Vue.js基礎2
- 7. vue.js基礎
- 8. Vue.js基礎
- 9. Vue.js--基礎篇
- 10. Vue.js基礎(六)
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue.js基礎教程（1）--Vue.js介紹
- 2. vue.js基礎學習（1）
- 3. 零基礎學習 Vue.JS ——（1）
- 4. 3-1-1-Vue.js 基礎回顧
- 5. Vue.js學習筆記1 - Vue基礎
- 6. Vue.js基礎2
- 7. vue.js基礎
- 8. Vue.js基礎
- 9. Vue.js--基礎篇
- 10. Vue.js基礎(六)