Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】
Vue.js實(shí)訓(xùn)【基礎(chǔ)理論(5天)+項(xiàng)目實(shí)戰(zhàn)(5天)】博客匯總表【詳細(xì)筆記】
目? ?錄
1、講在前面
課程內(nèi)容
實(shí)訓(xùn)課內(nèi)容
2、Vue.js介紹
2.1、安裝
開發(fā)環(huán)境
版本介紹
2.2、基礎(chǔ)使用
引入Vue.js---方式1
引入Vue.js---方式2
輸出Vue.js的構(gòu)造函數(shù)
使用Vue.js的3個(gè)步驟
原生實(shí)現(xiàn)（不使用Vue.js）
2.3、數(shù)據(jù)的展示
var、let區(qū)別
插值表達(dá)式
3、常用指令
3.1、指令介紹
3.2、常用指令
1、v-html（解析 HTML 代碼）
2、v-text（渲染普通文本）
3、v-bind（綁定數(shù)據(jù)）
【{{插值表達(dá)式}}、v-html、v-text、v-bind】區(qū)別圖
4、v-if（條件渲染）
5、v-for（列表渲染）
1、講在前面
課程內(nèi)容
實(shí)訓(xùn)課內(nèi)容
學(xué)習(xí)能力：
-
新技術(shù)的心態(tài)（平和，積極）
-
閱讀能力（提取知識(shí)點(diǎn)）
-
解決問題能力 （思路、方法）
-
項(xiàng)目實(shí)戰(zhàn)能力（開發(fā)能力）
2、Vue.js介紹
Vue.js---漸進(jìn)式JavaScript框架
JavaScript---網(wǎng)頁交互行為---基于瀏覽器
-
什么是JavaScript： 是一門編程語言。 客戶端腳本語言！ 負(fù)責(zé)交互、客戶端業(yè)務(wù)邏輯的開發(fā)。
-
什么是框架： 一個(gè)已經(jīng)具有基本雛形的體系技術(shù)點(diǎn)，可以在這個(gè)的基礎(chǔ)上快速地開發(fā)自己的項(xiàng)目應(yīng)用。
-
Vue.js 是一個(gè)JavaScript 框架。
框架 --> 簡(jiǎn)化程序開發(fā)（代碼量較少）
2.1、安裝
開發(fā)環(huán)境
-
開發(fā)環(huán)境： 項(xiàng)目研發(fā)階段，程序還在開發(fā)。
-
生產(chǎn)環(huán)境： 項(xiàng)目已經(jīng)研發(fā)結(jié)束，項(xiàng)目已經(jīng)部署。
版本介紹
2.2、基礎(chǔ)使用
引入Vue.js---方式1
引入Vue.js---方式2
輸出Vue.js的構(gòu)造函數(shù)
使用Vue.js的3個(gè)步驟
原生實(shí)現(xiàn)（不使用Vue.js）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><h1></h1><h3></h3> </body> <script>var h1 = document.getElementsByTagName("h1");h1.innerHTML = "hello,同學(xué)們！"var h3 = document.getElementsByTagName("h3")[0];h3.innerHTML = "hello,老師！" </script> </html>2.3、數(shù)據(jù)的展示
var、let區(qū)別
var定義的變量：全局變量 或者 函數(shù)變量。
let定義的變量：塊級(jí)的變量。
插值表達(dá)式
-
el 是指定作用的范圍。
-
data是指定范圍內(nèi)使用到的數(shù)據(jù)。
-
如何渲染數(shù)據(jù)呢？
-
在模板范圍標(biāo)簽之內(nèi)，通過 {{}} 實(shí)現(xiàn)數(shù)據(jù)展示。
?{{ data里面的屬性 }} -
上述這種數(shù)據(jù)展示的方法叫做 插值表達(dá)式。在元素標(biāo)簽內(nèi)使用，傳入變量，顯示Vue對(duì)象中的data值。
-
3、常用指令
3.1、指令介紹
3.2、常用指令
1、v-html（解析 HTML 代碼）
-
作用： 渲染數(shù)據(jù)， 功能 和 插值表達(dá)式 渲染變量 功能一致。
-
不同點(diǎn)：
-
v-html 渲染數(shù)據(jù)，在模板還沒有編譯完成時(shí)候，頁面上面 是空白的；而插值表達(dá)式的方法，頁面上的數(shù)據(jù)是有 {{}} 這樣的內(nèi)容存在，給用戶的體驗(yàn)感不好。
-
v-html 可以編譯HTML字符串內(nèi)容。【插值表達(dá)式--{{}}、v-text，均不會(huì)對(duì)字符串進(jìn)行編譯。】
-
2、v-text（渲染普通文本）
-
作用： 渲染數(shù)據(jù)， 功能 和 插值表達(dá)式 渲染變量 功能一致。
-
不同點(diǎn)：
-
v-html 渲染數(shù)據(jù)，在模板還沒有編譯完成時(shí)候，頁面上面 是空白的。 而插值表達(dá)式的方法，頁面上的數(shù)據(jù)是有 {{}} 這樣的內(nèi)容存在，給我用戶的體驗(yàn)感不好。
-
3、v-bind（綁定數(shù)據(jù)）
-
屬性綁定。 我們v-html,v-text,{{}} 只能實(shí)現(xiàn)給標(biāo)簽之間設(shè)置內(nèi)容。 但是，標(biāo)簽的屬性值是某個(gè)數(shù)據(jù)時(shí)，需要使用到 v-bind指令。
【{{插值表達(dá)式}}、v-html、v-text、v-bind】區(qū)別圖
v-html 可以編譯HTML字符串內(nèi)容。【插值表達(dá)式--{{}}、v-text，均不會(huì)對(duì)字符串進(jìn)行編譯。】
框架便利之處：data中的數(shù)據(jù) 一旦 發(fā)生變化，模板(HTML)中的數(shù)據(jù) 自動(dòng) 發(fā)生變化。【數(shù)據(jù)綁定】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>03、常用指令使用</title><script src="./vue.js"></script><style>img {max-width: 80%;/*設(shè)置最大寬度*/}</style> </head> <body><div id="app"><h1 v-html="msg"></h1><h1 v-text="msg"></h1><p>{{msg}}</p><!-- <img v-bind:src="imgurl" alt=""> --><img :src="imgurl" alt=""><a :href="link">跳轉(zhuǎn)</a></div><img src="" alt="" id="" class=""><!-- src/alt/id/class 這些都是標(biāo)簽的原生屬性。 --> </body> <script>// 含義： vue.js 給標(biāo)簽開發(fā)的屬性 就稱之為 指令！// 本質(zhì)： 指令就是標(biāo)簽的屬性！new Vue({el: "#app",data: {// msg:"你好"msg: "<i>你好啊</i>",link: "http://www.taobao.com",imgurl: "http://zkres0.myzaker.com/201806/5b2cbabaa07aec900301e844_640.jpg"}}) </script> </html>4、v-if（條件渲染）
作用： 顯示不同的模板內(nèi)容。
<標(biāo)簽 v-if="條件"></標(biāo)簽> <標(biāo)簽 v-else-if="條件"></標(biāo)簽> <標(biāo)簽 v-else></標(biāo)簽> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>04、條件渲染</title><script src="./vue.js"></script><style>.box {width: 200px;height: 200px;padding: 30px;border: 2px solid blue;overflow: hidden;}img {max-width: 80%;}</style> </head><body><div id="app"><div class="box" v-if="state">有數(shù)據(jù)哦！ 是一個(gè)列表！</div><div class="box" v-else>沒有的哦！。。。。<imgsrc="http://aliyunzixunbucket.oss-cn-beijing.aliyuncs.com/jpg/65e50d4fd3bd91bdcfcbdb7281b8b3ab.jpg?x-oss-process=image/resize,p_100/auto-orient,1/quality,q_90/format,jpg/watermark,image_eXVuY2VzaGk=,t_100"></div><hr><div class="box" v-show="state">有數(shù)據(jù)哦！ 是一個(gè)列表！</div><div class="box" v-show="!state">沒有的哦！。。。。<img src="http://aliyunzixunbucket.oss-cn-beijing.aliyuncs.com/jpg/65e50d4fd3bd91bdcfcbdb7281b8b3ab.jpg?x-oss-process=image/resize,p_100/auto-orient,1/quality,q_90/format,jpg/watermark,image_eXVuY2VzaGk=,t_100"></div><h1>訂單狀態(tài)：<span v-if="status==1">未發(fā)貨</span><span v-else-if="status==2">已發(fā)貨</span><span v-else-if="status==3">已簽收</span><span v-else-if="status==4">已評(píng)價(jià)</span><span v-else-if="status==5">已結(jié)束</span><span v-else>未知狀態(tài)！</span></h1></div> </body> <script>let vm = new Vue({el: "#app",data: {// arr: ['新聞1', '新聞2', '新聞3', '新聞4'],// // arr:[],state: true,status: 1, // 1 未發(fā)貨 2 已發(fā)貨 3 已簽收 4 已評(píng)價(jià) 5 已結(jié)束}})console.log(vm.state)setInterval(function () { // 計(jì)時(shí)器【可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。】vm.state = !vm.state;vm.status++;}, 1000)// data里面的數(shù)據(jù)都是 Vue實(shí)例對(duì)象的屬性！// <標(biāo)簽 v-if="條件"></標(biāo)簽> // <標(biāo)簽 v-else-if="條件"></標(biāo)簽> // <標(biāo)簽 v-else></標(biāo)簽></script></html>5、v-for（列表渲染）
作用：渲染數(shù)據(jù)列表。
1、// 得到 數(shù)組/對(duì)象 中的每一個(gè)元素 <標(biāo)簽 v-for="標(biāo)識(shí)符 in 數(shù)組/對(duì)象"></標(biāo)簽>2、// 得到 數(shù)組/對(duì)象 中的每一個(gè)元素及其 下標(biāo)/key值 <標(biāo)簽 v-for="(標(biāo)識(shí)符,下標(biāo)標(biāo)識(shí)符) in 數(shù)組/對(duì)象"></標(biāo)簽> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>05、列表渲染</title><script src="./vue.js"></script> </head><body><div id="app"><h2>要做的事情：</h2><ul><li v-for="item in list">{{item}}</li></ul><hr><ul><li v-for="(val,key) in person"> {{key}} === {{val}}</li></ul><hr><ul><li v-for="(item,idx) in list">{{item}}====={{idx}}</li></ul><hr><ul><li v-for="(item,index) in student"><h3>序號(hào)：{{index+1}} ===>姓名：{{item.name}}===年齡：{{item.age}}==性別：{{item.sex ? '男':'女' }}</h3><h4>他的朋友們：</h4><ul><li v-for="(val,idx) in item.friend"><h5>編號(hào)：{{idx+1}}===>姓名：{{val.name}}年齡：{{val.age}}性別：{{val.sex ? "先生":"女士"}}</h5></li></ul></li></ul></div> </body> <script>new Vue({el: "#app",data: {list: ["1-看新聞", '2-吃午飯', '3-看電影', '4-LOL'],person: {name: "小喬",desc: "三國時(shí)期的美女",sex: "女",h: "165"},student: [{name: "宋壹",age: 10,sex: 1,friend: [{ name: '宋壹兒子', age: 10, sex: 0 },{ name: '宋壹女兒', age: 12, sex: 1 }]},{name: "丁二",age: 10,sex: 1,friend: [{ name: '丁二兒子', age: 30, sex: 1 },{ name: '丁二女兒', age: 22, sex: 1 }]},{name: "張三",age: 50,sex: 1,friend: [{ name: '張三兒子', age: 50, sex: 1 },{ name: '張三女兒', age: 62, sex: 1 }]}]}})// <標(biāo)簽 v-for="標(biāo)識(shí)符 in 數(shù)組/對(duì)象"></標(biāo)簽>// <標(biāo)簽 v-for="(標(biāo)識(shí)符,下標(biāo)標(biāo)識(shí)符) in 數(shù)組/對(duì)象"></標(biāo)簽> </script></html>點(diǎn)個(gè)贊、加個(gè)關(guān)注，再走啊，謝謝老板~
總結(jié)
以上是生活随笔為你收集整理的Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 某国有7个城市，它们互相之间没有公路相通
- 下一篇： Vue.js-Day01-PM【事件绑定