1.官方vue.js导入
导入官方vue.js,开始使用vue框架,其中vue.js适合调试,vue.min.js适合实际应用。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建vue对象
创建id为app的div标签,再在JS中创建vue对象,其中包括el,data等元素,el的挂载为**‘#app’**。
<div id="app"></div>
<script>
var app = new Vue({
el: '#app',
data: {
}
});
</script>
3.v-text,v-html指令
创建p标签,其中内容由v-text指令获取vue对象中data元素对应message的文本内容,或使用{{ }}获取,同理使用v-html获取html元素。
<div id="app">
<p v-text="message" ></p>
<p >{{ message }}</p>
<p v-html="context"></p>
<p v-html="table"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:'v-text测试',
context:'<a href="https://www.baidu.com">百度一下</a>',
table:'<table border="1"><tr><td>11</td><td>22</td></tr></table>'
}
});
</script>
效果如下:
4.v-on:指令
通过v-on指令触发绑定方法,绑定方法写到vue对象的methods中,可使用快捷方式@代替。
<div id="app2">
<input type="button" value="事件绑定" v-on:click="doIt('测','试')">
<input type="button" value="双击事件" @dblclick="doIt">
<input type="text" value="键入事件" @keyup.enter="sayHi">
<p @click="changeFood">{{food}}</p>
</div>
<script>
var app2 = new Vue({
el: '#app2',
data: {
food:'韭黄炒蛋'
},
methods: {
doIt:function (x1,x2) {
alert("doIt");
console.log(x1+x2)
},
changeFood:function () {
this.food +='番茄炒蛋'
},
sayHi:function () {
alert("吃饭了没")
}
}
});
</script>
5.v-if,v-show,v-bind:指令
v-if,v-show通过条件控制标签的显示状态(显示或隐藏),图中通过isShow变量控制标签显示或隐藏。v-bind指令控制标签元素的属性,利用vue对象中自定义的imgSrc路径,来控制图中img标签的src属性。
<div id="app4">
<img v-show='isShow' src="lib/4K%20(1).jpg" alt="" style="width: 35%;height: 300px">
<img v-show='age>=199' src="lib/4K%20(1).jpg" alt="" style="width: 35%;height: 300px">
<p v-if="isShow">一个P标签</p>
<input type="button" @click="changeShow" value="切换状态">
<p>v-bind测试</p>
<img v-bind:src="imgSrc" alt="" style="width: 35%;height: 300px" :class="{active:isActive}" @click="toggleActive">
<img :src="imgSrc" alt="" :title="imgTitle" style="width: 35%;height: 300px">
</div>
<script>
var app4 = new Vue({
el:'#app4',
data:{
isShow:true,
age:18,
imgSrc:"lib/1.jpg",
imgTitle:'logo',
isActive:false
},
methods:{
changeShow:function () {
this.isShow = !this.isShow;
},
toggleActive:function () {
this.isActive = ! this.isActive;
}
}
});
</script>
6.v-for指令
v-for指令用来遍历数组中的内容,也可获取到对应的索引index。图中在li标签中遍历了校区所在地,并自动生成对应li标签,以及通过按钮控制vegetables数组内容,实现添加和删除
<div id="app5">
<ul>
<li v-for="(item,index) in arr" v-bind:title="item">
{{ index+1 }}校区:{{ item }}
</li>
<input type=button @click="add" value="添加蔬菜">
<input type=button @click="remove" value="移除蔬菜">
<li v-for="item in vegetables" :title="item.name">
{{ item.name }}{{ item.title }}
</li>
</ul>
</div>
<script>
var app5 = new Vue({
el:'#app5',
data:{
arr:['北京','上海','杭州','四川'],
vegetables:[
{name:'西兰花'},
{name:'番茄'},
{name:'土豆', title:'马铃薯' }
]
},
methods:{
add:function () {
this.vegetables.push({name:'韭菜'});
},
remove:function () {
this.vegetables.shift();
}
}
});
</script>
效果如下:
7.v-model指令
作用:双向数据绑定,只能用于表单元素上,示例:由于下图中输入框了‘message’,h2标签内容会跟随输入框内容变化而变化。
<div id="app6">
<input type="button" value="修改message" @click="fixM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
</div>
<script>
var app6 = new Vue({
el:'#app6',
data:{
message:'程序员'
},
methods:{
fixM:function(){
this.message="666";
},
getM:function () {
alert(this.message+=1)
}
}
});
</script>
效果如下所示