Vue第一天
阿新 • • 發佈：2020-12-14
前端目前形式
1 html5,css3,js(es5,es6):寫一個一個的頁面---》給後端（php，python，go，java）--》後端嵌入模板語法--》後端渲染完---》返回給前端---》在瀏覽器中看 2 ajax出現--》後臺發非同步請求，render+ajax混合（bbs專案） 3 單用ajax（載入資料，dom渲染頁面）：前後端分離的雛形 4 agular：js框架，前端工程化，前端也是一個工程，一個專案 5 react，vue：當下最火的兩個前端框架（vue國人，react外國） 6 移動開發（安卓，ios）+web（web，微信小程式，支付寶小程式）+桌面開發（windows桌面）：前端---》大前端 7 一套程式碼在各個平臺執行（前端）：谷歌flutter（Dart：跟java很像）：ios，安卓，桌面 8 在vue框架的基礎上 nui-app ：https://uniapp.dcloud.io/ 一套程式碼編到10個平臺，這不是夢想 9 在不久的將來，一統天下 10 內卷化
vue介紹和使用
1 漸進式JavaScript:javascript的框架（jq），寫簡單的可以使用vue，寫複雜的專案也可以使用 2 MVVM：Model-View-ViewModel -model：資料（後端給的，js接收到） -ViewModel：中轉 （雙向資料繫結：js中變數變了，html中資料也跟著變） -view：檢視（html+css） 3 元件化開發，單頁面開發 4 版本：1.x 2.x（用的最多） 3.x（beta版本） 5 下載：（可以使用cdn） -開發版本：vue.js :https://vuejs.org/js/vue.js -生產版本：vue.min.js :https://vuejs.org/js/vue.min.js 6 前端開發：webstorm，sublinetext，vscode（python，java，go，前端，免費），pycharm（咱們講課） 7 快速使用 8 補充：解釋型語言，需要直譯器，js直譯器整合到瀏覽器中了，console就等同於你在cmd小敲python3進的互動式命令列是一樣的 9 nodejs:把chorm的v8引擎（直譯器），安裝到作業系統之上
模板語法
1 插值語法 {{ js變數或js語法}}
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這個div中可以寫vue的語法 data: { name: 'hello world', age: 19, ll: [1, 2, 3], obj: {name: 'lqz', age: 19}, s: '<a href="http://www.baidu.com">點我看美女</a>', }, }) </script> </html>
指令
3.1 v-html，v-text,v-show,v-if
1 標籤屬性為 v-xx的形式，是vue的指令
2 常用指令
v-html：讓html渲染成頁面
v-text:標籤內容顯示js變數對應的值
v-show:放一個布林值，為真，標籤就顯示，為假標籤就不顯示
v-if：放一個布林值，為真，標籤就顯示，為假標籤就不顯示
3 v-show 和v-if 區別：v-show標籤還在，不顯示了，v-if之間操作的dom把標籤刪除和加入
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標籤</span>
<span>{{name}}</span>
<hr>
<h1>v-show</h1>
<div v-show="isShow">我是div</div>
<h1>小案例，控制元件通過按鈕控制顯示和消失</h1>
<button @click="handleClick()">點我</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這個div中可以寫vue的語法
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a href="http://www.baidu.com">點我看美女</a>',
isShow: true
},
methods: {
handleClick() {
//this指的是當前vue物件
this.isShow = !this.isShow
},
}
})
</script>
</html>
3.2 事件指令
1 點選事件 給標籤（控制元件）繫結函式，點選執行函式
2 v-on:click 縮寫成 @click
<!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:點我</button>
<!--用的多-->
<button @click="handleClick2">@click點我2</button>
<!--如果不傳引數，沒有大的區別-->
<button @click="handleClick2()">點我3帶括號</button>
<!--如果要傳引數-->
<button @click="handleClick3(100)">點我4帶引數</button>
<!--傳入事件-->
<button @click="handleClick5($event)">點我5帶事件引數</button>
</div>
</body>
<script>
new Vue({
el: '#box', //在box這個div中可以寫vue的語法
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 給標籤屬性的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>
<!--有個按鈕，有個div，點選按鈕，div變色-->
<div id="box">
<!-- <img v-bind:src="url" alt="">-->
<!-- <img :src="url" alt="" width="60" height="60">-->
<!-- <div :class="red_class">我的個divdiv快樂的div</div>-->
<button @click="handleClick">點我變色</button>
<!-- <div :class="change">-->
<div :class="isActive?'red':'green'">
我是一個div
</div>
</div>
</body>
<script>
new Vue({
el: '#box', //在box這個div中可以寫vue的語法
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>
style和class
1 同v-bind控制sytle和class的顯示
<!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">點選，字型變大</button>
<div :style="style_obj">
我是div控制元件
</div>
</div>
</body>
<script>
var vm=new Vue({
el: '#box', //在box這個div中可以寫vue的語法
data: {
// class_obj: 'red', //放一個是字串
// class_obj: ['red'], //放多個是陣列
//陣列.push() 從尾部加一個元素
//陣列.pop() 從尾部彈出一個元素
//陣列的其它操作自行搜尋
//物件寫法
style_obj:{
background:'yellow',
fontSize:'30px'
}
},
methods:{
handleClick(){
console.log('asdfasd')
this.style_obj['fontSize']='30px'
},
}
})
</script>
</html>