本文详细介绍了一个使用Vue.js创建简单应用的过程。通过实例演示了如何利用Vue的指令如v-model、v-text、v-bind等进行数据绑定及DOM操作，同时展示了计算属性、事件监听等核心功能。读者将了解到Vue的基本用法及其在实际项目中的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="./vue.js"></script> //导入vue.js
</head>
<body>
<div id="root">
<input v-model="firstName"/> //输入框 ，v-model实现firstName的双向绑定
<input v-model="lastName"/>
<div v-text="fullName"></div> //v-html="funllName" 输出fullName
<div v-bind:title="this is count">{{count}}</div> //title: 鼠标点击hint
<ul><li v-for="(item,index) of myArr" :key="index">{{item}}</li></ul> //v-for：循环集合 myArr，得到每一项item
<button v-on:click="clickHandle">clickMe</button> //click事件绑定
<div v-show="show">this info could hid</div> // v-if 是删除html,v-show仅仅是用display:none.
</div>
<script>
new Vue({ //初始化 vue实例
el:"#root", //el:对应元素ID
// template: '', //元素的显示模板
data:{ //实例的数据
firstName:'',
lastName:'',
count:0,
show = true;
myArr:[1,2,3]
},
computed:{ //计算字段
fullName: function(){
return this.firstName+' '+ this.lastName;
}
}
methods:{ //事件函数
clickHandle: function(){
this.show = ! this.show;
}
},
watch:{ //变量changed绑定的函数
firstName: function(){
this.count ++;
}
lastName: function(){
this.count++;
}
}
})
</script>
</body>
</html>
扫一扫
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
