課堂學(xué)習(xí)：Vue 漸進(jìn)式 JavaScript框架 初步認(rèn)識(shí)
下面是Vue的官方文檔 不懂就看看
https://cn.vuejs.org/? ??
一、安裝和使用
1.安裝：
在? ?https://cn.vuejs.org/? ?中 找到學(xué)習(xí)——教程——安裝?
里面有兩個(gè)版本的Vue
開發(fā)版本和生產(chǎn)版本
開發(fā)版本：包含完整的警告和調(diào)試模式
生產(chǎn)版本：刪除了警告导街，33.46KB min+gzip? ? 是開發(fā)版本的壓縮版體積更小
下載好后直接放到vscode打開的文件的同一目錄下 是Vue.js?
2.使用：
使用Vue框架 需要先引入
?<!--?引入vue.js文件?開發(fā)版本和生產(chǎn)版本?后者更小-->
????<script?src='../js/vue.js'></script>
????<!--?生產(chǎn)版本?-->
????<!--?<script?src='../js/vue.js'></script>?-->
以下代碼可以關(guān)閉生產(chǎn)提示
<script>
//關(guān)閉生產(chǎn)提示?
????????Vue.config.productionTip?=?false
</script>
第一步：
<!--?第一步：準(zhǔn)備一個(gè)容器?-->
????<div?id="app">
????????<h2>姓名：{{name}}</h2>
????????<h2>年齡：{{age}}</h2>
????????<!--?v-on:?指令用于綁定事件?-->
????????<button?v-on:click='updataName()'>修改姓名</button>
????????<button?v-on:click='updataAge'>修改年齡</button>
????</div>
第二步：
//?第二步：創(chuàng)建一個(gè)Vue對(duì)象
????????let?vm?=?new?Vue({
????????????//?綁定當(dāng)前Vue對(duì)象操作的DOM容器
????????????el:'#app',
????????????//定義當(dāng)前Vue對(duì)象管理的數(shù)據(jù)
????????????data:{
????????????????name:'張三',
????????????????age:20
????????????},
????????????//定義當(dāng)前Vue對(duì)象管理的方法
????????????methods:{
????????????????//修改姓名的方法
????????????????updataName?(){
????????????????????this.name='啊發(fā)發(fā)'
????????????????},
????????????????//修改年齡的方法
????????????????updataAge?(){
????????????????????this.age=30
????????????????}
????????????}
二披泪、理解什么是Vue的響應(yīng)式原理：
原理：當(dāng)代理對(duì)象監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會(huì)重新渲染頁(yè)面?
以下代碼用于幫助理解 復(fù)制到vscode中看比較好
<script?src='../js/vue.js'></script>
????<script>
????????Vue.config.productionTip?=?false
????????//?一搬瑰、理解什么是代理對(duì)象
????????//1.定義源對(duì)象
????????let?obj1?=?{
????????????name:?'張三',
????????????age:?20
????????}
????????//2.定義代理對(duì)象
????????let?obj2?=?obj1
????????console.log('obj2:',?obj2)
????????//代理對(duì)象修改了源對(duì)象的數(shù)據(jù)
????????obj2.name?=?'李四'
????????obj2.age?=?30
????????console.log('obj1:',?obj1)
????????console.log('obj2:',?obj2)
????????console.log('-----------------------')
????????//二款票、看一下Vue是如何使用代理對(duì)象
????????//1.定義一份數(shù)據(jù)
????????let?myData?=?{
????????????name:?'張三',
????????????age:?20
????????}
????????let?vm?=?new?Vue({
????????????//2.將一份數(shù)據(jù)傳遞給Vue的data選項(xiàng)，他背后做了兩件事情
????????????//(1)泽论、設(shè)置Vue實(shí)例的_data屬性作為當(dāng)前數(shù)據(jù)的代理對(duì)象?（響應(yīng)式的核心）
????????????//(2)艾少、將_data里面代理的所有數(shù)據(jù)再添加給當(dāng)前Vue實(shí)例?（為了Vue實(shí)例方便調(diào)用數(shù)據(jù)）
????????????data:?myData
????????})
????????vm.name?=?'李四'
????????vm.age?=?30
????????console.log(myData)
????????console.log(vm)
????????console.log('-----------------------')
????????//三、給對(duì)象添加屬性的方法
????????let?obj3?=?{}
????????//方法一：
????????obj3.name?=?'斯班奇'
????????//方法二：
????????obj3['age']?=?8
????????//方法三：通過Object對(duì)象的defineProperty方法翼悴，給指定的對(duì)象添加指定的屬性
????????//使用這種方式給對(duì)象添加的屬性?默認(rèn)不可枚舉?默認(rèn)不可刪除
????????//使用這種方式缚够，給對(duì)象添加的屬性，對(duì)屬性的保護(hù)措施更加嚴(yán)格
????????Object.defineProperty(obj3,?'sex',?{
????????????//屬性值
????????????value:?'男',
????????????//允許被枚舉（默認(rèn)不允許）
????????????enumerable:?true,
????????????//允許被刪除（默認(rèn)不允許）
????????????configurable:?true
????????})
????????console.log(obj3)
????????//枚舉的方法?枚舉出對(duì)象的所有屬性(其實(shí)就是遍歷出對(duì)象的所有屬性名稱)
????????for?(let?key?in?obj3)?{
????????????console.log(key)?//?name?age?無(wú)法枚舉出sex
????????}
????????//通過delete關(guān)鍵字鹦赎，可以刪除對(duì)象上的指定屬性
????????delete?obj3.name
????????//通過Object.defineProperty方法添加的屬性不可刪除
????????delete?obj3.sex
????????console.log(obj3)??//{age:?8,?sex:?'男'}
????????console.log('-------------------------------')
????????//四谍椅、Vue響應(yīng)式的原理
????????//?原理：當(dāng)代理對(duì)象監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會(huì)重新渲染頁(yè)面?以下代碼用于解釋如何做到的
????????//1.定義一個(gè)源對(duì)象
????????let?data?=?{
????????????name:?'張三',
????????????age:?20
????????}
????????//在頁(yè)面中古话，顯示姓名和年齡
????????document.querySelector('#name').innerHTML?=?data.name
????????document.querySelector('#age').innerHTML?=?data.age
????????//2.定義一個(gè)代理對(duì)象（使用_data?去代理data）
????????let?_data?=?{}
????????//3.使用Object.defineProperty給代理對(duì)象添加屬性
????????Object.defineProperty(_data,?'name',?{
????????????//get方法雏吭，用于返回屬性的值（當(dāng)我們調(diào)用name屬性獲取值時(shí)，會(huì)調(diào)用get方法）
????????????//在調(diào)用get方法時(shí)才知道里面的值是什么
????????????get()?{
????????????????//console.log('get方法執(zhí)行了')
????????????????return?data.name
????????????},
????????????//set方法陪踩，用于設(shè)置屬性的值（當(dāng)我們調(diào)用name屬性設(shè)置值時(shí)杖们，會(huì)調(diào)用set方法）
????????????//一旦重新設(shè)置_data.name的值時(shí)?調(diào)用這個(gè)函數(shù)?設(shè)定的值會(huì)作為參數(shù)val傳入set方法
????????????set(val)?{
????????????????//?console.log('set方法執(zhí)行了')
????????????????data.name?=?val
????????????????//當(dāng)代理對(duì)象監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會(huì)重新渲染頁(yè)面
????????????????document.querySelector('#name').innerHTML?=?data.name
????????????}
????????}),
????????Object.defineProperty(_data,?'age',?{
????????????get()?{
????????????????return?data.age
????????????},
????????????set(val)?{
????????????????data.age?=?val
????????????????//當(dāng)代理對(duì)象監(jiān)聽到數(shù)據(jù)發(fā)生變化了膊毁，就會(huì)重新渲染頁(yè)面
????????????????document.querySelector('#age').innerHTML?=?data.age
????????????}
????????})
????????console.log(_data.name)?//張三
????????console.log(_data.age)??//20
????????_data.name?=?'啦啦啦'
????????_data.age?=?40
????</script>
三胀莹、Vue的常用指令：
<!--?v-bind:?用于綁定屬性，通過v-bind:?綁定過的屬性婚温，可以在屬性值里寫表達(dá)式?(表達(dá)式可以是Vue的數(shù)據(jù))-->
? ? ? ? ? ?舉個(gè)例子v-bind:value = '1+2' 它顯示出來(lái)的是3?
? ? ? ? ? ? <!--?v-on:?用于綁定事件描焰，通過v-on:綁定過的事件，可以指定Vue實(shí)例定義的方法?-->
????????????<input?type="text"?v-bind:value='name'?v-on:input='updataName'>{{name}}
<!--?v-bind:?可以用:簡(jiǎn)寫?-->
????????????<!--?v-on:?可以用@簡(jiǎn)寫?-->
????????????<!--?如果事件方法不是很多栅螟，可以卸載行內(nèi)荆秦，注意：這里不能用this?$event是事件對(duì)象就是?e?在行內(nèi)就叫$event-->
????????????<input?type="text"?:value?=?'age'?@input='age?=?$event.target.value'>{{age}}
<!--?通過v-model:?指令可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，
????????????v-model:?指令是v-on:input?和?v-bind: value的簡(jiǎn)寫-->
????????????<input?type="text"?v-model='job'>{{job}}
let?vm?=?new?Vue({
????????????el:?'#app',
????????????//數(shù)據(jù)
????????????data:?{
????????????????name:?'張三',
????????????????age:?20,
????????????????job:?'程序員'
????????????},
????????????methods:?{
????????????????updataName(e)?{
????????????????????console.log(e)?//接收的事件對(duì)象e里面有target屬性?里面有value?
????????????????????//獲取文本框里的內(nèi)容力图，更新數(shù)據(jù)??把name屬性的值同步給當(dāng)前input里的value
????????????????????this.name?=?e.target.value??//獲取當(dāng)前元素的value值
????????????????},
????????????????updataAge(e)?{
????????????????????this.age?=?e.target.value
????????????????},
????????????????updataJob(e){
????????????????????this.job?=?e.target.value
????????????????}
????????????}
????????})
四步绸、條件渲染和列表渲染：
1.條件渲染
v-if=''
v-else-if=''
v-else='
<!--?根據(jù)成績(jī)? ? 'score'? ?，顯示下面的等級(jí)?--> 這個(gè)score是在? ?Vue? 的? ?data? 中我們定義的屬性 根據(jù)這個(gè)屬性我們?cè)O(shè)定的值是多少來(lái)判斷顯示 優(yōu)秀 良好 中等 合格 不合格中的一項(xiàng)
????????<h2?v-if='score>=90'>優(yōu)秀</h2>
????????<h2?v-else-if='score>=80'>良好</h2>
????????<h2?v-else-if='score>=70'>中等</h2>
????????<h2?v-else-if='score>=60'>合格</h2>
????????<h2?v-else>不合格</h2>
v-show 的值時(shí)布爾值 來(lái)判斷是否顯示和不顯示?
v-show的方法? 模板已經(jīng)渲染成功吃媒，通過樣式控制隱藏
v-if的方法 在滿足條件是才會(huì)渲染頁(yè)面 不滿足的不會(huì)渲染
v-if?和?v-show?如何選擇
????????????如果頁(yè)面需要反復(fù)切換顯示和隱藏瓤介，用v-show吕喘。
????????????如果頁(yè)面中有很多模塊需要隱藏，用戶可能只對(duì)其中的某個(gè)模塊感興趣刑桑，用v-if氯质，
????????????所有的模塊首屏加載時(shí)，全部都不渲染祠斧，當(dāng)用戶選擇指定的模塊后闻察，再渲染指定的模塊。
2.列表渲染：
<ul>
????????????<!--?v-for?指令琢锋，用于列表渲染： 列表渲染時(shí)辕漂，通常都要綁定key，key的作用是提高渲染性能
????????????注意：key必須是唯一吴超，暫時(shí)可以將列表的索引作為key值去使用?-->
????????????<li?v-for?=?'(item,index)?in?foods'?:key='index'>{{index}}---{{item.id}}---{{item.name}}---{{item.price}}</li>
????????????<!--?這里的參數(shù)item?index可以換別的字母?如果只有一個(gè)參數(shù)?就會(huì)顯示item（foods數(shù)組中的每一項(xiàng)）?-->
????????????<li?v-for?=?'a?in?foods'?:key='index'>{{a}}</li>
????????</ul>
new?Vue({
????????????el:?'#app',
????????????//定義數(shù)據(jù)
????????????data:?{
????????????????score:?60,
????????????????//添加一個(gè)是否顯示屬性?默認(rèn)為false
????????????????isShow:?false,
????????????????foods:[
????????????????????{
????????????????????????id:1,
????????????????????????name:'薯片',
????????????????????????price:7.9
????????????????????},
????????????????????{
????????????????????????id:2,
????????????????????????name:'餅干',
????????????????????????price:17.9
????????????????????},
????????????????????{
????????????????????????id:3,
????????????????????????name:'巧克力',
????????????????????????price:27.9
????????????????????},
????????????????????{
????????????????????????id:4,
????????????????????????name:'面包',
????????????????????????price:11.9
????????????????????}
????????????????]
????????????}
????????})
五钉嘹、輪播圖練習(xí)：
<body>
????<div?id="app">
????????<!--?遍歷imgs??圖片路徑綁定imgs屬性中的item??-->
????????<!--?這樣寫會(huì)把所有圖片加載進(jìn)去?然后通過?display：none?的方法來(lái)顯示?-->
????????<!--?<img?v-for?=?'(item,index)?in?imgs'?:src="item"?v-show?=?'index?===?showActive'>?-->
????????<!--?這樣寫會(huì)依次渲染不同圖片?減小渲染壓力?-->
????????<img?:src="imgs[showActive]"?alt="">
????</div>
????<script?src="../js/vue.js"></script>
????<script>
????????new?Vue({
????????????el:?'#app',
????????????data:?{
????????????????//顯示的下標(biāo)：
????????????????showActive:?0,
????????????????//圖片數(shù)組
????????????????imgs:?[
????????????????????'http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89',
????????????????????'http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89',
????????????????????'http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89',
????????????????????'http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89',
????????????????????'http://p1.music.126.net/2lJxwhKKgzgIHsfiXRJXOQ==/109951166645147845.jpg?imageView&quality=89'
????????????????]
????????????},
????????????//生命周期函數(shù)（表示頁(yè)面掛載完成）
????????????mounted()?{
????????????????setInterval(()?=>?{
????????????????????this.showActive++
????????????????????//如果下標(biāo)越界，重新從0開始
????????????????????if?(this.showActive?>?4)?{
????????????????????????this.showActive?=?0
????????????????????}
????????????????},?1000)
????????????}
????????})
????</script>
