Vue — 第一天（极速入门）
生活随笔
收集整理的這篇文章主要介紹了
Vue — 第一天（极速入门）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
基本介紹
vue是什么
目標(biāo)：了解vue的一些基礎(chǔ)概念。
官方網(wǎng)站： https://cn.vuejs.org/
vue是：漸進(jìn)式j(luò)avascript框架。
兩組概念
（1）框架
- 庫。只提供一些API給開發(fā)者使用。jquery 是一個(gè)js庫
- 框架。擁有自己的規(guī)則和元素，它比庫要更加強(qiáng)大一些。
- UI框架 - bootstrap。包含 js html css 主要實(shí)現(xiàn)了一套支撐網(wǎng)站開發(fā)的常用控件（對(duì)話框，彈出框，tab頁簽…）
- JS框架 - 純js編寫，提供了開發(fā)網(wǎng)站功能的標(biāo)準(zhǔn)（規(guī)則），約定開發(fā)規(guī)則，通過這些規(guī)則組織你的功能代碼，。
（2）漸進(jìn)式
- 它可以很簡(jiǎn)單，幫助，確保最快上手，最快使用
- 它也可以很復(fù)雜，配合不同的工具，在各種復(fù)雜的應(yīng)用場(chǎng)合下工作。
上得廳堂，下得廚房
文可提筆安天下，武可上馬定江山
能做什么
網(wǎng)頁上的四個(gè)要素
- 結(jié)構(gòu) — html
- 樣式 — css
- 行為 — js
- 數(shù)據(jù) — 后端接口返回的json數(shù)據(jù)
小結(jié)：啥都能做！
安裝vue
在不同的學(xué)習(xí)階段有不同的使用方式:
-
基礎(chǔ)階段：直接當(dāng)做一個(gè)普通的js庫來引入使用（與jquery類似）
- 本地方式
- 先下載：https://cn.vuejs.org/js/vue.js
- 然后在你的.html文件中引入：<script src="./vue.js"></script>
- 直接引入公網(wǎng)中的js
- 引入：
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 本地方式
-
項(xiàng)目階段：以npm包的方式來引入
- 安裝 npm i vue
- 導(dǎo)入后使用即可
總結(jié)：在基礎(chǔ)學(xué)習(xí)階段，使用本地下載引入的方式或者公網(wǎng)中的js均可。
體驗(yàn)vue
第一個(gè)vue程序。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><!-- 2. 視圖 --><div id="app"><h3>{{msg}}</h3><input v-model="msg" type="text"></div><!-- 引入VUE核心js文件 --><script src="./vue.js"></script><!-- 功能代碼 --><script>// 需要把數(shù)據(jù)渲染到頁面上// 頁面上輸入的內(nèi)容，收集到數(shù)據(jù)中// 2. 控制數(shù)據(jù)模型和視圖管理者const vm = new Vue({el: '#app',// 1. 數(shù)據(jù)模型data: {msg: 'hi vue'}})</script> </body> </html>安裝live-server插件
在我們寫一些頁面功能時(shí)，如果希望實(shí)時(shí)觀察到效果，可以安裝這個(gè)插件。(與學(xué)習(xí)vue無關(guān))
功能說明
它是一個(gè)vscode的插件，它會(huì)監(jiān)聽代碼的改動(dòng)，一旦我們修改了代碼，它會(huì)立即刷新網(wǎng)頁。
安裝過程
使用步驟
- 使用vscode打開某個(gè)文件夾 （不是打開單個(gè)文件！）
- 打開某個(gè).html文件上，右鍵，在彈出的菜單上選擇open with live server
此時(shí)，它會(huì)自動(dòng)調(diào)起瀏覽器，并打開我們當(dāng)前選擇的.html文件。
補(bǔ)充
另一種打開方式
在當(dāng)前的.html打開時(shí)，在vscode的狀態(tài)欄上找到liver-server 的圖標(biāo)，點(diǎn)擊一次。
更友好的工作模式
在你的電腦屏幕上同時(shí)打開vscode和瀏覽器，一邊寫代碼一看效果。
vue的特點(diǎn)
聲明式渲染
允許采用簡(jiǎn)潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。
<div id="app">{{ message }} </div>數(shù)據(jù)驅(qū)動(dòng)視圖
在vue中，通過修改數(shù)據(jù)即可更新視圖（頁面），大大解放了操作dom的時(shí)間，把精力放在業(yè)務(wù)上。 所以，我們?cè)趯憊ue代碼時(shí)，會(huì)更加關(guān)心數(shù)據(jù)的構(gòu)成。
雙向數(shù)據(jù)綁定
vue是一個(gè)典型的 MVVM 思想的框架
- M 是數(shù)據(jù)模型 model
- V 是視圖（界面）view
- VM 是控制數(shù)據(jù)模型和視圖的管理者
把上面的代碼，可以拆分成，M + V + VM 結(jié)構(gòu)。
數(shù)據(jù)可以影響視圖變化，視圖變化也會(huì)影響數(shù)據(jù)變化。
組件化開發(fā)
把一個(gè)網(wǎng)站功能，分割若干個(gè)組件，相同類型的組件可復(fù)用，組件功能是獨(dú)立的，可維護(hù)性高。
vue實(shí)例和它的三大件
-
el
-
data
-
methods
vue實(shí)例
const vm = new Vue({el: ,data: ,methods: , })理解：
- Vue(V是大寫的)是一個(gè)構(gòu)造器，用它來創(chuàng)建vue實(shí)例。
- vm就是創(chuàng)建出來的實(shí)例對(duì)象，
- 這個(gè)構(gòu)造器只有一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)對(duì)象，其中的屬性名和屬性值都有特定的含義。
el選項(xiàng)
el選項(xiàng)，用來指定vue實(shí)例管理的容器。
<body>{{msg}}<div id="app">{{msg}}<!-- 被管理的容器才可以使用vue提供的功能 --></div><script src="./vue.js"></script><script>// 初始化vue實(shí)例，vue實(shí)例就是vm的意思const vm = new Vue({// 初始化的配置對(duì)象，里面有很多選項(xiàng)// el === element 元素，標(biāo)簽，容器// el指定當(dāng)前vue實(shí)例管理的容器是誰。// 值是：選擇器 | dom元素// el: '#app',// el: document.querySelector('#app'),// Do not mount Vue to <html> or <body> - mount to normal elements instead.// el不能指定 html 和 body 容器el: 'body',data: {msg: 'hi vue'}})</script> </body> </html>要點(diǎn)：
- 可以是選擇器，也可以是某個(gè)dom元素
- 只能是普通的dom（div,p），不能是 html,body 容器
- 不在此容器內(nèi)的部分，不會(huì)受到vue實(shí)例影響
data選項(xiàng)
作用：它是一個(gè)對(duì)象，它用來規(guī)定數(shù)據(jù)。
<div id="app"><h3>理解data</h3><p>姓名：{{name}}</p><p>愛好1：{{aihao[0]}}</p><p>愛好2：{{aihao[1]}}</p><ul><li>QQ:{{lianxi.QQ}}</li><li>email:{{lianxi.email}}</li><li>weixin:{{lianxi.weixin}}</li></ul></div><script>// data: 它是一個(gè)對(duì)象，用來規(guī)定數(shù)據(jù)。// 現(xiàn)在是把vue當(dāng)作一個(gè)模板引擎來使用。// 它的作用是把數(shù)據(jù)顯示在頁面上。data就是用來// 約定數(shù)據(jù)的。// 在后面的學(xué)習(xí)的，這個(gè)部分的數(shù)據(jù)會(huì)是// 從ajax接口中獲取到的// 訪問數(shù)據(jù)：// 方法一：在視圖中，通過{{}}插值表達(dá)式 直接訪問。/// 不要寫data.XXX - 不要寫data - 不要寫data// 方法二：通過Vue實(shí)例vm來訪問// vm.XXXconst vm = new Vue({el: "#app",// el: document.getElementById("app"),data: {name: '凡哥-凡叔',aihao:['聽音樂','讀書'],lianxi: {QQ:"123456",email:'xxxxxx',weixin:'yyyyyy'}}})console.log(vm)console.log(vm.name)console.log(vm.aihao[1])console.log(vm.lianxi.QQ)</script>訪問方式：
注意：
- 在data中顯性聲明的數(shù)據(jù)，都是響應(yīng)式數(shù)據(jù)，可以數(shù)據(jù)驅(qū)動(dòng)視圖。
- 在模板中使用的數(shù)據(jù)，建議在data中提前聲明，即使沒有值也需要聲明。
methods選項(xiàng)
目標(biāo)：知道vue選項(xiàng)中methods選項(xiàng)的使用方法和注意事項(xiàng)。
作用：為vue實(shí)例提供自定義函數(shù)的（大白話：自己的業(yè)務(wù)函數(shù)書寫位置）
調(diào)用方法：
注意：
書寫函數(shù)有很多方式
- 普通的寫法
- es6簡(jiǎn)寫格式 （推薦使用）
- 有箭頭函數(shù) （不使用。因?yàn)槠渲械膖his不指向vue實(shí)例）
在函數(shù)的內(nèi)部（不是箭頭函數(shù)的情況）
- this會(huì)指向vue實(shí)例。
插值表達(dá)式
目標(biāo)：了解vue術(shù)語插值表達(dá)式是什么和使用場(chǎng)景。
在vue中{{ }}語法，叫做：插值表達(dá)式，大白話就是輸出值的語法。
在插值表達(dá)式中可以寫：
- 寫data數(shù)據(jù)字段名稱
- 寫methods函數(shù)的名稱，進(jìn)行調(diào)用
- 對(duì)data數(shù)據(jù)字段進(jìn)行表達(dá)式運(yùn)算
- 加減運(yùn)算
- 三元運(yùn)算
- …
不能寫
- js語句：聲明變量，分支，循環(huán)
- 訪問在vue實(shí)例之外，自定義的全局變量
指令
指令（directive），其實(shí)就是一個(gè)以v-開頭的標(biāo)簽屬性，例如：v-model 雙向綁定指令。
vue提供了一些指令，這些指令都是以v-開頭，他們可以擴(kuò)展標(biāo)簽的原有功能。這些指令的值，可以是js表達(dá)式，當(dāng)關(guān)聯(lián)js表達(dá)式依賴的數(shù)據(jù)發(fā)生變化，對(duì)應(yīng)的指令就會(huì)產(chǎn)生作用。
擴(kuò)展功能：
- 輸入框雙向綁定
- 標(biāo)簽的顯示隱藏
- 標(biāo)簽顯示的內(nèi)容
- …
學(xué)習(xí)vue，主要就是要學(xué)習(xí)兩個(gè)地方的內(nèi)容：
- Vue實(shí)例（vue實(shí)例與三大件）
- 模板（視圖）中的規(guī)則：插件表達(dá)式，指令
v-text和v-html
目標(biāo)：能夠使用v-text和v-html去更新標(biāo)簽內(nèi)容。
這組指令作用：
- 更新標(biāo)簽的內(nèi)容
- 根據(jù)數(shù)據(jù)進(jìn)行更新
具體的作用：
- v-text 更新標(biāo)簽的內(nèi)容，格式是文本，和 innerText 相似。
- v-html 更新標(biāo)簽的內(nèi)容，格式是html，和 innerHTML 相似。
在代碼中體驗(yàn)：
<div id="app"><h3>v-html,v-text</h3><!-- {{}}可以用來設(shè)置標(biāo)簽中的部分內(nèi)容 --><p>學(xué)習(xí)內(nèi)容：{{str}}</p><p>{{str}}</p><!-- v-text:設(shè)置標(biāo)簽中的 全部?jī)?nèi)容 --><p v-text="str"></p><!-- v-text:設(shè)置標(biāo)簽中的 如果這里內(nèi)容是html字符串，它會(huì)轉(zhuǎn)義一下，只是顯示字符串而不會(huì)顯示成對(duì)應(yīng)的dom結(jié)構(gòu) --><div v-text="strHtml"></div><!-- v-html用來設(shè)置標(biāo)簽中的內(nèi)容。與v-text不同，它直接解析其中的html結(jié)構(gòu)，并渲染 --><div v-html="strHtml"></div></div><script>// v-text : ===> innerText// v-html : ===> innerHTMLconst vm = new Vue({el: "#app",data: {str: 'vue',// 有時(shí)，從后端取回來的數(shù)據(jù)是一個(gè)html字符串。// 例如：獲取文章詳情，取回來就是一html字符串。strHtml: '<h1>vue</h1>'}})</script>總結(jié)：
- v-text 更新 純文本
- v-html 更新 html內(nèi)容
v-show和v-if
功能
能夠使用v-show和v-if去控制標(biāo)簽的顯示隱藏。
格式
<元素 v-show="布爾值"></元素> <元素 v-if="布爾值"></元素>這對(duì)指令的共同點(diǎn)：都能控制元素的是否可見
這對(duì)指令的不同點(diǎn)：
- v-show是通過 display:none來控制隱藏
- v-if 是通過動(dòng)態(tài)創(chuàng)建和移除元素。
示例
<div id="app"><h3>v-if,v-show</h3><div v-if="isVisiable">我是通過v-if來控制是否可見！</div><div v-show="isVisiable">我是通過v-show來控制是否可見！</div></div><script>// 作用：控制標(biāo)簽的可見與不可見// 格式：// <元素 v-show="布爾值"></元素>// <元素 v-if="布爾值"></元素>// 如果是false,則不可見，如果是true，則可見// 區(qū)別：// 對(duì)于v-if,如果為false,則，在頁面根本就不生成這個(gè)dom。// 所以不可見。// 對(duì)于v-show,如果為false,則，在頁面有這個(gè)dom，display:none。// 所以不可見。const vm = new Vue({el: "#app",data: {isVisiable: false}})setInterval(function() {vm.isVisiable = !vm.isVisiable},5000)</script>總結(jié)：區(qū)分下使用場(chǎng)景：
- v-show 性能較好，對(duì)應(yīng)需要頻繁切換顯示與隱藏的功能，可以使用v-show。
- v-if 減少標(biāo)簽，狀態(tài)切換次數(shù)少的時(shí)候，使用使用v-if
v-on
功能
v-on指令的作用是：指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。
格式
三種使用格式
# 格式一：把要執(zhí)行的代碼直接寫在""內(nèi)部。適合少量代碼 <標(biāo)簽 v-on:事件名="要執(zhí)行的代碼"></標(biāo)簽> # 格式二：指向methods中的定義的函數(shù) <標(biāo)簽 v-on:事件名="methods中的函數(shù)"></標(biāo)簽> # 格式二：指向methods中的定義的函數(shù)，并傳入?yún)?shù) <標(biāo)簽 v-on:事件名="methods中的函數(shù)(實(shí)參)"></標(biāo)簽>說明：
- 能支持所有原生事件名：所有的原生js事件
- v-on可以簡(jiǎn)寫成@
示例
<div id="app"><h3>v-on</h3><div v-show="isVisiable">內(nèi)容</div><!-- 格式一：把要執(zhí)行的代碼直接寫在""內(nèi)部。適合少量代碼 --><button v-on:click="isVisiable=true">顯示內(nèi)容</button><button v-on:click="isVisiable=false">隱藏內(nèi)容</button><!-- 格式二：指向methods中的定義的函數(shù) --><!-- 加與不加()一樣：v-on:click="f1()" 與 v-on:click="f1" --><button v-on:click="f1">調(diào)用methods中的函數(shù)</button> <br><!-- 格式三：指向methods中的定義的函數(shù) --><!-- 注意：1. 如果要傳入?yún)?shù)，則必須要加()2. 如果傳入當(dāng)前這個(gè)事件的事件對(duì)象，則傳入固定名字 $event --><button v-on:click="f2(10)">調(diào)用methods中的函數(shù)傳入10</button><br><button v-on:click="f3(11,$event)">調(diào)用methods中的函數(shù)傳入11,傳入事件對(duì)象</button></div><script>// 功能： v-on 用來監(jiān)聽事件// 格式：// 格式一：把要執(zhí)行的代碼直接寫在""內(nèi)部。適合少量代碼// <標(biāo)簽 v-on:事件名="要執(zhí)行的代碼"></標(biāo)簽>// 事件名：就是所有的dom原生事件 // click,input,mouseenter,blur,......// 格式二：指向methods中的定義的函數(shù)// <標(biāo)簽 v-on:事件名="methods中的函數(shù)"></標(biāo)簽>// 格式三：指向methods中的定義的函數(shù)，并傳入?yún)?shù)// <標(biāo)簽 v-on:事件名="methods中的函數(shù)(實(shí)參)"></標(biāo)簽>const vm = new Vue({el: "#app",data: {isVisiable: false},methods: {f1 () {console.log("f1被調(diào)用")alert(1)this.isVisiable = true},f2 (m) {alert(m)console.log(m)},// 形參名m,eventObj。這兩名，是可以自己定義的。f3 (m, eventObj) {console.log(m, eventObj)}}})</script>總結(jié)：綁定函數(shù)的時(shí)候帶不帶括號(hào)？
- 如果你需要接受事件觸發(fā)的默認(rèn)傳參，不帶括號(hào)
- 如果你需要自己來進(jìn)行傳參，需要帶括號(hào)，自己傳實(shí)參
- 如果什么參數(shù)都不要，帶不帶無所謂
案例-折疊面板
用v-on和v-show實(shí)現(xiàn)折疊面板
<div id="app"><h2>案例：折疊面板</h2><div class="box"><div class="title" ><h4>我是標(biāo)題</h4><span class="btn" @click="isOpen=!isOpen">{{isOpen ? '收起' : '展開'}} </span> </div><div class="container" v-show="isOpen">我是內(nèi)容<br>我是內(nèi)容</div></div> </div> <script>var vm = new Vue({el: '#app',data: {isOpen: false}}) </script>補(bǔ)充-修飾符
<div id="app"><h3>v-on 修飾符</h3><div v-on:click="hClickDiv">div<button @click="hClickBtn">按鈕</button><br><button v-on:click.stop="hClickBtn">點(diǎn)擊按鈕不會(huì)冒泡</button><br><a href="http://www.baidu.com" v-on:click="hClickA">百度</a><br><a href="http://www.baidu.com" v-on:click.prevent="hClickA">不跳轉(zhuǎn)百度</a><br><a href="http://www.baidu.com" v-on:click.prevent.stop="hClickA">不跳轉(zhuǎn)百度不冒泡</a></div> </div><script>// vue中的事件也有冒泡機(jī)制。// 在子元素上的點(diǎn)擊事件，也會(huì)觸發(fā)父元素上的點(diǎn)擊事件。// 如果要阻止冒泡，只需給事件添加個(gè)修飾符.stop// 格式： 事件名.stop// 示例：click.stop// 如果要阻止默認(rèn)行為，只需給事件添加個(gè)修飾符.prevent// 格式： 事件名.prevent// 示例：click.prevent// 如果需要，也可以一起使用，相當(dāng)于兩個(gè)效果疊加// 格式： 事件名.prevent.stop// 示例：click.prevent.stop// v-on: ----簡(jiǎn)寫成---> @const vm = new Vue({el: "#app",methods: {hClickDiv () {console.log("hClickDiv")},hClickBtn (){console.log("hClickBtn")},hClickA () {console.log('hClickA')}}})</script>v-for 列表渲染
功能
快速批量生成列表結(jié)構(gòu)
格式
格式1：完整格式
<元素 v-for="(遍歷變量，索引變量) in 可遍歷的數(shù)據(jù)項(xiàng)" :key="唯一的id"></元素>格式2：簡(jiǎn)寫格式
在完整格式的基礎(chǔ)上，可以省略 :key 和 索引變量。
<元素 v-for="遍歷變量 in 可遍歷的數(shù)據(jù)項(xiàng)"></元素>遍歷目標(biāo)
對(duì)于v-for指令，可遍歷的數(shù)據(jù)項(xiàng)可以是：
- 數(shù)組
- 對(duì)象
- 數(shù)值
代碼
<div id="app"><h2>v-for</h2><div class="box"><h4>1. 對(duì)數(shù)組進(jìn)行遍歷</h4><ul><li v-for="(item,idx) in hobbies">{{idx}} - {{item}}</li></ul></div><div class="box"><h4>2. 對(duì)對(duì)象進(jìn)行遍歷</h4><span v-for="(item,prop,idx) in info">{{idx}}-{{prop}}-{{item}}</span></div><div class="box"><h4>3. 對(duì)數(shù)值進(jìn)行遍歷</h4><span v-for="item in 10">{{item}}，</span></div> </div> <script src="./vue.js"></script> <script>var vm = new Vue({el: '#app',data: {info: {name: '小張', age: 18, height: '150'},hobbies: ['唱歌', '跳舞', '打籃球']}}) </script>使用了v-for指令的元素，在其內(nèi)部可以通過插值表達(dá)式來訪問遍歷變量和循環(huán)變量。
v-bind
作用
動(dòng)態(tài)綁定標(biāo)簽上的屬性的值。（標(biāo)簽上的屬性不能使用插值表達(dá)式來設(shè)置）。
例如：如何動(dòng)態(tài)設(shè)置img的內(nèi)容？
格式
<元素 v-bind:屬性名1="值1" v-bind:屬性名2="值3"></元素>v-bind指令有簡(jiǎn)寫用法 : 冒號(hào)，例如：
<img :src="data數(shù)據(jù)">演示代碼
<div id="app"><h3>v-bind</h3><!-- 如果去修改src屬性？ --><!-- <img alt="se" src="http://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg"> --><img alt="se" :src="imgSrc" :title="title"><br><img alt="se" v-bind:src="imgSrc" v-bind:title="title"><button v-on:click="hClick">改成11</button></div><script>// 作用 ： 動(dòng)態(tài)綁定標(biāo)簽上的屬性的值// 格式 :// <元素 v-bind:屬性名1="值1" v-bind:屬性名2="值2"></元素>// 簡(jiǎn)寫：// v-bind: ----簡(jiǎn)寫---> :const vm = new Vue({el: "#app",data: {title: 'se',imgSrc: 'http://img3m8.ddimg.cn/93/1/61888458-1_b_2.jpg'},methods: {hClick () {// 設(shè)為 11this.title = "11不香嗎？"this.imgSrc = 'http://img3m0.ddimg.cn/83/24/61887260-1_b_1.jpg'}}})</script>練習(xí)題
如下兩種寫法的區(qū)別是什么？
<div id="myId"></div> <div :id="myId"></div>案例：購物車
素材代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h4,p {margin: 0;font-weight: normal;}a{text-decoration: none;}body{background-color: #eee;}#app{background-color:#fff;width: 900px;margin: 50px auto;text-align: center;box-shadow: 3px 3px 3px rgba(0 , 0, 0, 0.5);padding:1em 2em;}.list {padding: 1em;width: 100%;box-sizing: border-box;display: flex;flex-wrap:wrap;}.book {position: relative;flex-basis: 22%;margin-right:2%;margin-bottom:1em;text-align: center;background-color: #fff;padding: 1em 0;transition: all .2s linear;}.book:hover {box-shadow: 0 15px 30px rgba(0, 0, 0, .1);transform: translate3d(0, -2px, 0);}.title {line-height: 2em;margin: 0;padding: 0;}.figure img {width: 150px;height: 150px;}.desc {margin: 0;font-size: 16px;}.price {margin: 0;font-size: 14px;}.btn {cursor: pointer;position: absolute;right: 0.8em;top: 0.8em;border: none;color: #ff6700;padding: .5em .5em;font-size: 12px;}.btn:active {border: none;}.btn:hover {background-color: #ff6700;color: #fff}.cart {border: 1px solid #eee;background-color: #fff;text-align: center;position: fixed;padding: 1em;right: 100px;top: 200px;}</style> </head><body><div id="app"><h3>我的購物車</h3><div class="list"><div class="book" title="當(dāng)你學(xué)會(huì)獨(dú)處"><a href=""><div class="figure"><img src="http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg" alt="當(dāng)你學(xué)會(huì)獨(dú)處（學(xué)會(huì)獨(dú)處，學(xué)會(huì)與自己談話）"></div><h4 class="title" title="當(dāng)你學(xué)會(huì)獨(dú)處">當(dāng)你學(xué)會(huì)獨(dú)處</h4><p class="desc"></p><p class="price"><span class="num">29.9</span></p></a><button class='btn' title="移出購物車">-</button></div><div class="book" title="JavaScript高級(jí)程序設(shè)計(jì)"><a href=""><div class="figure"><img src="http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg"alt=" JavaScript高級(jí)程序設(shè)計(jì)"></div><h4 class="title" title="JavaScript高級(jí)程序設(shè)計(jì)">JavaScript高級(jí)程序設(shè)計(jì)</h4><p class="desc"></p><p class="price"><span class="num">78</span></p></a><button class='btn' title="移出購物車">-</button></div><div class="book" title="斷舍離"><a href=""><div class="figure"><img alt="斷舍離" src="http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg"title="斷舍離"></div><h4 class="title" title="斷舍離">斷舍離</h4><p class="desc"></p><p class="price"><span class="num">29.9</span></p></a><button class='btn' title="移出購物車">-</button></div><div class="book" title="王子與貧兒"><a href=""><div class="figure"><img src="http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg"alt="王子與貧兒"></div><h4 class="title" title="王子與貧兒">王子與貧兒</h4><p class="desc"></p><p class="price"><span class="num">39.9</span></p></a><button class='btn' title="移出購物車">-</button></div><div class="book" title="高效能人士的七個(gè)習(xí)慣"><a href=""><div class="figure"><img src="http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg"alt="高效能人士的七個(gè)習(xí)慣"></div><h4 class="title" title="高效能人士的七個(gè)習(xí)慣">高效能人士的七個(gè)習(xí)慣</h4><p class="desc"></p><p class="price"><span class="num">59.3</span></p></a><button class='btn' title="移出購物車">-</button></div></div></div><script>var bookList = [{name: '當(dāng)你學(xué)會(huì)獨(dú)處',price: 29.9,picSrc: 'http://img3m8.ddimg.cn/70/15/28522168-1_l_3.jpg'},{name: 'JavaScript高級(jí)程序設(shè)計(jì)',price: 78,picSrc: 'http://img3m3.ddimg.cn/2/21/22628333-1_b_2.jpg'},{name: '斷舍離',price: 29.9,picSrc: 'http://img3m3.ddimg.cn/68/20/23271503-1_l_10.jpg'},{name: '王子與貧兒',price: 39.9,picSrc: 'http://img3m0.ddimg.cn/67/20/28535530-1_l_3.jpg'},{name: '高效能人士的七個(gè)習(xí)慣',price: 59.3,picSrc: 'http://img3m2.ddimg.cn/3/4/25253022-1_b_11.jpg'}]</script> </body></html>基本實(shí)現(xiàn)
-
v-for循環(huán)生成dom結(jié)構(gòu)
-
:src,:title,:alt 綁定屬性
-
v-on:click綁定點(diǎn)擊
總結(jié)
以上是生活随笔為你收集整理的Vue — 第一天（极速入门）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node — 第九天 (ES6降级 an
- 下一篇： Vue — 第二天（v-model和过滤