Vue基础实例一（数据绑定、双向绑定、属性绑定、事件绑定）
2019-03-31 本文已影响0人
IT飞牛
本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，
灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。
本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。
实例效果：
Vue基础实例一（数据绑定、双向绑定、属性绑定、事件绑定）.gif
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
</style>
</head>
<body>
<div id="app" class="style1">
<b>普通数据绑定：</b>{{init}}
<br>
<b>v-html数据绑定：</b> <span v-html="init"></span>
<br><br>
<b>show方法：</b><button @click="show">点击按钮</button>
<br><br>
<b>todolist列表增删:</b>
<br>
<ul v-for="(item,index) in lists">
<li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer"
@click="function(){deleteItem(index)}">X
</font>
</li>
</ul>
<input type="text" v-model="keyword">
<button @click="addItem">添加</button>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
keyword: "",
init: "<span>hello world</span>",
lists: [
{ id: 1, name: "这是第一个" },
{ id: 2, name: "这是第二个" },
{ id: 3, name: "这是第三个" },
{ id: 4, name: "这是第四个" },
{ id: 5, name: "这是第五个" }
]
},
methods: {
show: function (event) {
alert(1)
},
addItem: function (event) {
this.lists.push({ id: this.lists.length + 1, name: this.keyword });
this.keyword = "";
},
deleteItem: function (index) {
this.lists.splice(index, 1);
}
}
})
window.setTimeout(() => {
app.$data.init = "这是外部3秒后重置的init";
}, 3000)
</script>
