Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】
Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】
目? ?錄
1、講在前面
課程內容
實訓課內容
2、Vue.js介紹
2.1、安裝
開發環境
版本介紹
2.2、基礎使用
引入Vue.js---方式1
引入Vue.js---方式2
輸出Vue.js的構造函數
使用Vue.js的3個步驟
原生實現（不使用Vue.js）
2.3、數據的展示
var、let區別
插值表達式
3、常用指令
3.1、指令介紹
3.2、常用指令
1、v-html（解析 HTML 代碼）
2、v-text（渲染普通文本）
3、v-bind（綁定數據）
【{{插值表達式}}、v-html、v-text、v-bind】區別圖
4、v-if（條件渲染）
5、v-for（列表渲染）
1、講在前面
課程內容
實訓課內容
學習能力：
-
新技術的心態（平和，積極）
-
閱讀能力（提取知識點）
-
解決問題能力 （思路、方法）
-
項目實戰能力（開發能力）
2、Vue.js介紹
Vue.js---漸進式JavaScript框架
JavaScript---網頁交互行為---基于瀏覽器
-
什么是JavaScript： 是一門編程語言。 客戶端腳本語言！ 負責交互、客戶端業務邏輯的開發。
-
什么是框架： 一個已經具有基本雛形的體系技術點，可以在這個的基礎上快速地開發自己的項目應用。
-
Vue.js 是一個JavaScript 框架。
框架 --> 簡化程序開發（代碼量較少）
2.1、安裝
開發環境
-
開發環境： 項目研發階段，程序還在開發。
-
生產環境： 項目已經研發結束，項目已經部署。
版本介紹
2.2、基礎使用
引入Vue.js---方式1
引入Vue.js---方式2
輸出Vue.js的構造函數
使用Vue.js的3個步驟
原生實現（不使用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,同學們！"var h3 = document.getElementsByTagName("h3")[0];h3.innerHTML = "hello,老師！" </script> </html>2.3、數據的展示
var、let區別
var定義的變量：全局變量 或者 函數變量。
let定義的變量：塊級的變量。
插值表達式
-
el 是指定作用的范圍。
-
data是指定范圍內使用到的數據。
-
如何渲染數據呢？
-
在模板范圍標簽之內，通過 {{}} 實現數據展示。
?{{ data里面的屬性 }} -
上述這種數據展示的方法叫做 插值表達式。在元素標簽內使用，傳入變量，顯示Vue對象中的data值。
-
3、常用指令
3.1、指令介紹
3.2、常用指令
1、v-html（解析 HTML 代碼）
-
作用： 渲染數據， 功能 和 插值表達式 渲染變量 功能一致。
-
不同點：
-
v-html 渲染數據，在模板還沒有編譯完成時候，頁面上面 是空白的；而插值表達式的方法，頁面上的數據是有 {{}} 這樣的內容存在，給用戶的體驗感不好。
-
v-html 可以編譯HTML字符串內容。【插值表達式--{{}}、v-text，均不會對字符串進行編譯。】
-
2、v-text（渲染普通文本）
-
作用： 渲染數據， 功能 和 插值表達式 渲染變量 功能一致。
-
不同點：
-
v-html 渲染數據，在模板還沒有編譯完成時候，頁面上面 是空白的。 而插值表達式的方法，頁面上的數據是有 {{}} 這樣的內容存在，給我用戶的體驗感不好。
-
3、v-bind（綁定數據）
-
屬性綁定。 我們v-html,v-text,{{}} 只能實現給標簽之間設置內容。 但是，標簽的屬性值是某個數據時，需要使用到 v-bind指令。
【{{插值表達式}}、v-html、v-text、v-bind】區別圖
v-html 可以編譯HTML字符串內容。【插值表達式--{{}}、v-text，均不會對字符串進行編譯。】
框架便利之處：data中的數據 一旦 發生變化，模板(HTML)中的數據 自動 發生變化。【數據綁定】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>03、常用指令使用</title><script src="./vue.js"></script><style>img {max-width: 80%;/*設置最大寬度*/}</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">跳轉</a></div><img src="" alt="" id="" class=""><!-- src/alt/id/class 這些都是標簽的原生屬性。 --> </body> <script>// 含義： vue.js 給標簽開發的屬性 就稱之為 指令！// 本質： 指令就是標簽的屬性！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（條件渲染）
作用： 顯示不同的模板內容。
<標簽 v-if="條件"></標簽> <標簽 v-else-if="條件"></標簽> <標簽 v-else></標簽> <!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">有數據哦！ 是一個列表！</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">有數據哦！ 是一個列表！</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>訂單狀態：<span v-if="status==1">未發貨</span><span v-else-if="status==2">已發貨</span><span v-else-if="status==3">已簽收</span><span v-else-if="status==4">已評價</span><span v-else-if="status==5">已結束</span><span v-else>未知狀態！</span></h1></div> </body> <script>let vm = new Vue({el: "#app",data: {// arr: ['新聞1', '新聞2', '新聞3', '新聞4'],// // arr:[],state: true,status: 1, // 1 未發貨 2 已發貨 3 已簽收 4 已評價 5 已結束}})console.log(vm.state)setInterval(function () { // 計時器【可按照指定的周期（以毫秒計）來調用函數或計算表達式。】vm.state = !vm.state;vm.status++;}, 1000)// data里面的數據都是 Vue實例對象的屬性！// <標簽 v-if="條件"></標簽> // <標簽 v-else-if="條件"></標簽> // <標簽 v-else></標簽></script></html>5、v-for（列表渲染）
作用：渲染數據列表。
1、// 得到 數組/對象 中的每一個元素 <標簽 v-for="標識符 in 數組/對象"></標簽>2、// 得到 數組/對象 中的每一個元素及其 下標/key值 <標簽 v-for="(標識符,下標標識符) in 數組/對象"></標簽> <!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>序號：{{index+1}} ===>姓名：{{item.name}}===年齡：{{item.age}}==性別：{{item.sex ? '男':'女' }}</h3><h4>他的朋友們：</h4><ul><li v-for="(val,idx) in item.friend"><h5>編號：{{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: "三國時期的美女",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 }]}]}})// <標簽 v-for="標識符 in 數組/對象"></標簽>// <標簽 v-for="(標識符,下標標識符) in 數組/對象"></標簽> </script></html>點個贊、加個關注，再走啊，謝謝老板~
總結
以上是生活随笔為你收集整理的Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 某国有7个城市，它们互相之间没有公路相通
- 下一篇： Vue.js-Day01-PM【事件绑定