vue项ç®åºç¡ç¥è¯
Vueåºç¡æ»ç»
- 详æ å¯ä»¥å»å®ç½äºè§£https://cn.vuejs.org/v2/guide/
- é¾æ¥å¼å¼ç¨
ç¥è¯ç¹
1.elç»å®èç¹
new Vue({
el:
data{
}
})
2.æ令(å½ä»¤)
*v-show
*v-if å¤æ对é
*v-for for循ç¯
v-for å¯ä»¥æ¸²æ页é¢
å¨htmlæé渲æçæ ç¾éæ·»å v-foræ令
v-for="å级 in(for) jsçdataéåå¨æ°æ®çåéå":key="å级.å±æ§å"
3.ç»å®äºä»¶
@äºä»¶="å½æ°å" æ¾å¨å¯¹åºæ ç¾ä¸
methods vueéé¢ç¨methodsæ¾äºä»¶å½æ°
vueéææçthisé½æå®dnï¼dnæ¯vueçèªå¸¦å¯¹è±¡
4.çå½å¨æå½æ°
åºç¨å°é¡¹ç®å®è·µæä½å¤§è´
é¦å
å¨html页é¢æ·»å vueçé¾æ¥
ç¶åæhtml页é¢ç代ç å
å«å¨ä¸ä¸ªå¸¦æidåçæ ç¾éé¢
åå¨js页é¢éå建ä¸ä¸ªvue对象
const 对象å = new Vue({
ç¶åå¨éé¢æ·»å 对åºçä¸è¥¿
el:'#id',
data:{
è·åæ°æ®
},
created() {
ç¨çå½å¨æå½æ°éçåé æ¥å¨åä¸å¼å§è¦è¿è¡çå½æ°
çä»·äºä¹åçstart();å¼å¤´å½æ°
è¿éä¸è¬æ¾è·åæ°æ®çä¸å¼å§è¦æ§è¡çå½æ°
},
methods:{
methodséé¢ä¸è¬åæ¾æ§è¡å½æ°åäºä»¶å½æ°
}
})
- åå®æ¶å·æ°é¡¹ç®æ¶ç»åçå½å¨æå¾çåæ
ä¸ãæå¼è¡¨è¾¾å¼{{ }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- æå¼è¡¨è¾¾å¼ -->
<p>{{msg}}</p>
<p>{{name}}</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vn = new Vue({
// ç»å®èç¹
el:'#app',
// æ°æ®data
data:{
msg:'ä½ å¥½Vue',
name:'æ们好好åä½å§',
say:'好å¨å'
}
});
// å¨æ§å¶å°è®¿é®nameåªévn.name,ç¶åè¿å¯ä»¥æ´æ¹nameçå¼ï¼å¯¹åºçæµè§å¨éä¼æ´æ¹æåææ¹çå¼
</script>
</html>
äºãæ令å½ä»¤ v-for v-else v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-showåv-iféé¢çå¼ä¸ºtrueæèµ·ä½ç¨ -->
<div v-show='show'>åååå</div>
<div v-if='show'>æ¥äºèå¼ï¼å¥½å¨åï¼æè§äººçå·²ç»å°è¾¾äºå·
å³°</div>
<div v-else>ååæå»</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
// v-if å v-else å¦æv-ifæ¯trueæ¾ç¤ºï¼å¦è
å°±æ¯v-elseï¼æ¾ç¤ºå
¶ä»æè
éè å¿
须并ææå v-show
const vm = new Vue({
el:'#app',
data:{
show:true
// å¡«å
¥v-ifæv-showéé¢
}
})
</script>
</html>
ä¸ãv-for循ç¯æ¿æ¢æ¾ç¤º(éå)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list":key="item.id">{{item.name}}--{{item.add}}</li>
<!-- è¿éé¢çæææ¯ï¼å¾ªç¯listä¸çå±æ§ï¼éé¢æ¯æ¾ç¤ºiteméä»nameå°add -->
<!-- ååçæ¶åå¯ä»¥å¨åé¢å sè¿æ ·v-forçæ¶ååé¢çå级就å¯ä»¥ç¨æ²¡æsç»å°¾çæ¥ä»£è¡¨äº -->
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
list:[
// app4.todos.push({ text: 'æ°é¡¹ç®' }) æ§å¶å°è¾å
¥ï¼å¯ä»¥æ·»å æ°çå±æ§è¿æ¥
{
id:'001',
name:'åªå',
add:'ç¾å½'
},
{
id: '001',
name: 'åªå',
add: 'ç¾å½'
},
{
id: '001',
name: 'åªå',
add: 'ç¾å½'
},
{
id: '001',
name: 'åªå',
add: 'ç¾å½'
}
]
}
})
</script>
</html>
åãç»å®äºä»¶å®ç°ç¹å»æ¾ç¤ºéè
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>æ¾ç¤ºéè</title>
</head>
<body>
<div id="app">
<!-- ç»å®äºä»¶ -->
<button @click="showContent">{{buttonText}}</button>
<p v-show="show">
<!-- v-ifåv-showé½å¯ä»¥ -->
æå®é
è¿å¡ä½hiåä½iåä¸æ¬¡å°±çæ解å¼äºæå®é
çµ
è¯å¡ååå¡åè¨å
交æ¢æºå¼å§çåå¾çå¡æå°±çè§æ¥ççåè®°å¡æ°æ®åºå骷é«
ç²¾çµ
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
new Vue({
el:'#app',
// dataæ¾æ°æ®
data:{
show:true,
// å 为è¿éæåå®ä¹äºshow为trueæ以ä¸é¢æè½ç¨
buttonText:'éè'
},
// ææçäºä»¶é½åå¨methodséé¢
methods:{
showContent(){
if(this.show){
this.show = false;
this.buttonText='æ¾ç¤º'
// vueéé¢çææthisé½æ¯æåbn对象çï¼bn对象æ¯vueå®ä¹ç
}else{
this.show=true;
this.buttonText='éè';
}
}
}
});
</script>
</html>
äºãçå½å¨æå½æ°
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
// æ¾æ°æ®
},
// vueçå½å¨æå½æ° 模æ¿
// å建å®æ éé¢ä¸è¬æ¾ä¸å¼å§å°±è¦æ§è¡çï¼æ¯å¦è·åæ°æ®çå½æ°
created() {
console.log('å建å®æ')
},
// æè½½
mounted() {
console.log('æè½½å®æ')
},
methods: {
// éé¢ä¸è¬æ¾è¦æ§è¡çå½æ°æäºä»¶å½æ°
},
// æ´æ°
updated() {
},
// éæ¯
destroy(){
}
})
</script>
</html>
<!-- åºç¨å°é¡¹ç®å®è·µæä½å¤§è´
é¦å
å¨html页é¢æ·»å vueçé¾æ¥
ç¶åæhtml页é¢ç代ç å
å«å¨ä¸ä¸ªå¸¦æidåçæ ç¾éé¢
åå¨js页é¢éå建ä¸ä¸ªvue对象
const 对象å = new Vue({
ç¶åå¨éé¢æ·»å 对åºçä¸è¥¿
el:'#id',
data:{
è·åæ°æ®
},
created() {
ç¨çå½å¨æå½æ°éçåé æ¥å¨åä¸å¼å§è¦è¿è¡çå½æ°
çä»·äºä¹åçstart();å¼å¤´å½æ°
è¿éä¸è¬æ¾è·åæ°æ®çä¸å¼å§è¦æ§è¡çå½æ°
},
methods:{
methodséé¢ä¸è¬åæ¾æ§è¡å½æ°åäºä»¶å½æ°
}
})
-->
å ãæ´æ¹classãå¨æclass
- æ´æ¹class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
<style>
.bian {
color: red
}
</style>
</head>
<body>
<div id="app">
<button :class="{bian: issa}">ç¹å»</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
issa: false
}
});
</script>
</html>
- å®é åºç¨
<html>
<head>
<meta name="" charset="utf-8" content="" />
<title></title>
<style type="text/css">
.list {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
border: 1px solid;
display: flex;
justify-content: space-around;
align-items: center;
}
span {
cursor: pointer;
}
.active {
background: orange;
padding: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<span @click="changeTab(0)" :class="{active: tabIndex === 0}">微信</span>
<span @click="changeTab(1)" :class="{active: tabIndex === 1}">é讯å½</span>
<span @click="changeTab(2)" :class="{active: tabIndex === 2}">åç°</span>
<span @click="changeTab(3)" :class="{active: tabIndex === 3}">æç</span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tabIndex: 0
},
methods: {
changeTab(index) {
this.tabIndex = index;
}
}
})
</script>
</body>
</html>
- å¨æclass
<html>
<head>
<meta name="" charset="utf-8" content="" />
<title></title>
<style type="text/css">
.list {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
border: 1px solid;
display: flex;
justify-content: space-around;
align-items: center;
}
span {
cursor: pointer;
}
.active {
background: orange;
padding: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<span v-for="(item,index) in list" @click="changeTab(index)"
:class="{active:tabIndex===index}">{{item}}</span>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tabIndex: 0,
list: ['微信', 'é讯å½', 'åç°', 'æç']
},
methods: {
changeTab(index) {
this.tabIndex = index;
}
}
})
</script>
</body>
</html>