今日內(nèi)容：
0歌粥、前端目前形式
-1、html5拍埠，css3失驶，js（es5，es6）：寫一個(gè)一個(gè)的頁(yè)面---》給后端（php枣购，python嬉探，go，Java）---》后端嵌入模板語(yǔ)法---》后端渲染完---》返回給前端---》在瀏覽器中看
-2棉圈、ajax出現(xiàn)---》后臺(tái)發(fā)異步請(qǐng)求涩堤，render+Ajax混合（bbs項(xiàng)目）
-3、但用Ajax（加載數(shù)據(jù)分瘾，dom渲染頁(yè)面）：前后端分離的雛形
-4胎围、agular：js框架，前端工程化德召，前端也是一個(gè)工程白魂，一個(gè)項(xiàng)目
-5、react上岗，vue：當(dāng)下最火的兩個(gè)前端框架（vue是國(guó)人寫的福荸，國(guó)人用的多，react外國(guó)用的多）
-6肴掷、移動(dòng)開發(fā)（安卓敬锐，ios）+web（web，微信小程序呆瞻，支付寶小程序）+桌面應(yīng)用開發(fā)（Windows桌面）：前端---》大前端台夺，這些都叫前端
-7、一套代碼在各個(gè)平臺(tái)運(yùn)行（前端）：谷歌flutter（Dart：跟Java很像）：iOS痴脾，安卓颤介，桌面
-8、在vue框架的基礎(chǔ)上nui-app：https://uniapp.dcloud.io/一套代碼編到10個(gè)平臺(tái)明郭，這不是夢(mèng)想买窟。
-9丰泊、在不久的將來薯定，一統(tǒng)天下
-10、內(nèi)卷化
1瞳购、vue介紹和使用
-1话侄、漸進(jìn)式JavaScript：JavaScript的框架（jq），用于構(gòu)建用戶界面的漸進(jìn)式框架。寫簡(jiǎn)單的可以使用vue年堆，寫復(fù)雜的項(xiàng)目也可以使用吞杭。
通過對(duì)框架的了解與運(yùn)用程度，來決定其在整個(gè)項(xiàng)目中的應(yīng)用范圍变丧，最終可以獨(dú)立以框架方式完成整個(gè)web前端項(xiàng)目
vue特點(diǎn)：
-易用：通過HTML芽狗，css，JavaScript構(gòu)建應(yīng)用
-靈活：不斷繁榮的生態(tài)系統(tǒng)痒蓬，可以在一個(gè)庫(kù)和一套完整框架之間自如伸縮
-高效：20kb min+gzip運(yùn)行大小童擎，超快虛擬DOM，最省心的優(yōu)化
三大主流框架
三大主流框架之一：Angular React Vue
先進(jìn)的前端設(shè)計(jì)模式：MVVM 可以完全脫離服務(wù)器端攻晒，以前端代碼復(fù)用的方式渲染整個(gè)頁(yè)面：組件化開發(fā)顾复。
-2、MVVM：model-View-ViewModel
-model：數(shù)據(jù)（后端給的鲁捏，js接收到）
-ViewModel：中轉(zhuǎn)（雙向數(shù)據(jù)綁定：js中變量變了芯砸，html中數(shù)據(jù)也跟著變）
-View：視圖（html+css）
-3、組件化開發(fā)给梅，單頁(yè)面開發(fā)
-4假丧、版本：1.x 2.x（用的多）3.x（beta版本）
-5、下載：（可以使用cdn）
-開發(fā)版本：vue.js :https://vuejs.org/js/vue.js
-生產(chǎn)本本：vue.min.js :https://vuejs.org/js/vue.min.js
-6破喻、前端開發(fā)：webstorm虎谢，sublinetext，vscode（python曹质，Java婴噩，go，前端羽德，免費(fèi)）几莽，pycharm
-7、快速使用
見如下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{name}}
</div>
</body>
<script>
new Vue({
el:'#box', //固定語(yǔ)法宅静，與div做綁定
data:{
name:'lqz'
}
})
</script>
</html>
2章蚣、模板語(yǔ)法
-1、插值語(yǔ)法：{{ js比那輛或js語(yǔ)法 }}
-2姨夹、代碼演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{ll}}</p>
<p>{{obj}}</p>
{{10+20+90}}
{{10<20?'是':'否'}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box', //在box這個(gè)div中可以寫vue的語(yǔ)法
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a ,
},
})
</script>
</html>
3纤垂、指令
3.1 v-html，v-text磷账，v-show峭沦，v-if
-1、標(biāo)簽屬性為v-xx的形式逃糟，是vue的指令
-2吼鱼、常用指令
v-html：讓html渲染成頁(yè)面
v-text：標(biāo)簽內(nèi)容顯示js變量對(duì)應(yīng)的值
v-show：放一個(gè)布爾值蓬豁，為真，標(biāo)簽就顯示菇肃，為假標(biāo)簽就不顯示地粪，為假時(shí)是加了display：none的樣式，把標(biāo)簽隱藏起來了琐谤。
v-if：放一個(gè)布爾值蟆技，為真，標(biāo)簽就顯示斗忌，為假標(biāo)簽就不顯示付魔，為假時(shí)是直接把標(biāo)簽刪了
-3、v-show和v-if的區(qū)別： v-show標(biāo)簽還在飞蹂，不顯示了几苍，v-if直接操作的dom把標(biāo)簽刪除和加入
-4、代碼顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p v-html="s"></p>
<h1>v-text</h1>
<span v-text="name">我是span標(biāo)簽</span>
<span>{{name}}</span>
<hr>
<h1>v-show</h1>
<div v-show="isShow">我是div</div>
<h1>小案例陈哑，控件通過按鈕控制顯示和消失</h1>
<button @click="handleClick()">點(diǎn)我</button>
<div v-show="isShow">我是div</div>
<h1>v-if</h1>
<div v-if="isShow">我是divdivdiv</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box', //在box這個(gè)div中可以寫vue的語(yǔ)法
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a ,
isShow: true
},
methods: {
handleClick() {
//this指的是當(dāng)前vue對(duì)象
this.isShow = !this.isShow
},
}
})
</script>
</html>
3.2事件指令
-1妻坝、點(diǎn)擊事件：給標(biāo)簽（控件）綁定函數(shù)，點(diǎn)擊執(zhí)行函數(shù)
-2惊窖、v-on：click ：縮寫成@click
-3刽宪、$event:是個(gè)顯示詳細(xì)坐標(biāo)的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button v-on:click="handleClick">v-on:點(diǎn)我</button>
<!--用的多-->
<button @click="handleClick2">@click點(diǎn)我2</button>
<!--如果不傳參數(shù)，沒有大的區(qū)別-->
<button @click="handleClick2()">點(diǎn)我3帶括號(hào)</button>
<!--如果要傳參數(shù)-->
<button @click="handleClick3(100)">點(diǎn)我4帶參數(shù)</button>
<!--傳入事件 是一個(gè)顯示坐標(biāo)信息的事件-->
<button @click="handleClick5($event)">點(diǎn)我5帶事件參數(shù)</button>
</div>
</body>
<script>
new Vue({
el: '#box', //在box這個(gè)div中可以寫vue的語(yǔ)法
data: {
},
methods: {
handleClick(){
console.log('1111')
},
handleClick2(){
console.log('22222')
},
handleClick3(a,b){
console.log(a)
console.log(b)
},
handleClick5(ev){
console.log(ev)
}
}
})
</script>
</html>
3.3屬性指令
-1界酒、給標(biāo)簽屬性的value綁定成js的變量
-2圣拄、v-bind：class='js變量' 縮寫成 :class='js變量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
<title>Title</title>
</head>
<body>
<!--有個(gè)按鈕，有個(gè)div毁欣，點(diǎn)擊按鈕庇谆，div變色-->
<div id="box">
<!-- <img v-bind:src="url" alt="">-->
<!-- <img :src="url" alt="" width="60" height="60">-->
<!-- <div :class="red_class">我的個(gè)divdiv快樂的div</div>-->
<button @click="handleClick">點(diǎn)我變色</button>
<!-- <div :class="change">-->
<div :class="isActive?'red':'green'">
我是一個(gè)div
</div>
</div>
</body>
<script>
new Vue({
el: '#box', //在box這個(gè)div中可以寫vue的語(yǔ)法
data: {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607928733686&di=7c30817eab8f708731b778398be273e3&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190403%2F6c4dcd970b4b4131bd0929f9e025b1ba.jpeg',
// red_class: 'red',
change:'red',
isActive:true,
},
methods: {
handleClick() {
// this.change='green'
this.isActive=!this.isActive
}
}
})
</script>
</html>
4、style和class
-1凭疮、通v-bind控制style和class的顯示
class 添加多個(gè)屬性的話就是忘列表里家屬性饭耳，但是js里稱為數(shù)組
// class_obj: 'red', //放一個(gè)是字符串
// class_obj: ['red'], //放多個(gè)是數(shù)組
數(shù)組.push() 從尾部加一個(gè)元素
數(shù)組.pop() 從尾部彈出一個(gè)元素
style 添加多個(gè)樣式是往字典里加，js里稱為對(duì)象执解，
//對(duì)象寫法
style_obj:{
background:'yellow',
fontSize:'30px'
}
修改或者增加style的樣式：
this.style_obj['fontSize']='30px'
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<!-- <div :class="class_obj" >-->
<!-- 我是div控件-->
<!-- </div>-->
<button @click="handleClick">點(diǎn)擊寞肖，字體變大</button>
<div :style="style_obj">
我是div控件
</div>
</div>
</body>
<script>
var vm=new Vue({
el: '#box', //在box這個(gè)div中可以寫vue的語(yǔ)法
data: {
// class_obj: 'red', //放一個(gè)是字符串
// class_obj: ['red'], //放多個(gè)是數(shù)組
//數(shù)組.push() 從尾部加一個(gè)元素
//數(shù)組.pop() 從尾部彈出一個(gè)元素
//數(shù)組的其它操作自行搜索
//對(duì)象寫法
style_obj:{
background:'yellow',
fontSize:'30px'
}
},
methods:{
handleClick(){
console.log('asdfasd')
this.style_obj['fontSize']='30px'
},
}
})
</script>
</html>
