Vue源码下载:
下载Tags最新版本(release版本)。
VSCode中自定义模板设置:文件 - > 首选项 - > 用户代码片段,打开html.json文件添加如下内容:
"Vue": {
"prefix": "vue",
"body": [
"<div></div>",
"<script>",
"const app = new Vue({",
"el:'#app',",
"data:{",
"}",
"})",
"</script>"
]
}
则在html文档中输入vue即可快速成如下内容:
<div></div>
<script>
const app = new Vue({
el:'#app',
data:{}
})
</script>
同理,在vue.json文件中可以对vue模板进行设置。
vue中的常用指令:
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
<h2 v-html="url"></h2>
<h2 v-text="message">Vue</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊!',
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
动态绑定属性:v-bind:
动态绑定class、src、href、style
<div id="app">
<h2 class="title" :class="{active: isActive,line:isLine}">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
<h2 class="title" :class="['active','line']">{{message}}</h2>
<h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
<button v-on:click = "btnClick">状态切换</button>
<ul>
<li :class="{click:isClick}" v-for = "(item,index) in movies" @click="liClick">{{index}}-{{item}}</li>
</ul>
<a :href="aHref">斗罗大陆</a>
<img v-bind:src="imgURL" sizes="10%">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'v-bind',
imgURL:'https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20210218/16136418483037.jpg',
aHref:'https://fantuan.tv/vodplay/132401-1-201.html',
isActive:true,
isLine:false,
movies:['钢铁侠','绿巨人','美国队长','雷神','复仇者联盟'],
isClick:true,
finalSize:50,
finalColor:'yellow'
},
methods:{
btnClick(){
if(this.isActive){
this.isActive = false;
this.isLine = true;
}else{
this.isActive = true;
this.isLine = false;
}
},
getClasses(){
return {active: this.isActive, line: this.isLine};
},
liClick(){
this.isClick = !this.isClick;
}
}
})
</script>
计算属性:一般应用于需要对基本数据进行处理之后再进行显示的场景。和methods相比,computed具有缓存功能,多次调用时,计算属性只需要执行一次。
<div id="app">
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{fullName}}</h2>
<h2>总价格:{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'Lebron',
lastName:'James',
books:[
{id:110,name:'book1',price:119},
{id:111,name:'book2',price:89},
{id:112,name:'book3',price:150},
{id:113,name:'book4',price:146},
{id:114,name:'book5',price:79}
]
},
computed:{
fullName:function () {
return this.firstName + ' ' + this.lastName;
},
totalPrice(){
let result = 0;
for(let book of this.books){
result += book.price;
}
return result;
}
},
})
</script>