安装下载:
目录:
获取数据的ID:
template(里面存放模块html文本):
数据展示:
data(只能是单数据不能出现函数):
计算属性(使用函数传输) computed:
注意:![](https://i-blog.csdnimg.cn/blog_migrate/8dd85920accbae0e104ef42996e47543.png)
methods参数(函数-一般用来处理事件传参,调用):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实现</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>表单操作</h3>
<input type="text" name="username" v-model="username">
<input type="button" value="提交" @click="submit">
<p>{{ uname }}</p>
<h3>动态列表</h3>
<input type="button" value="加载" @click="load">
<ul>
<li v-for="item in dataList">{{ item }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
username: 'admin',
dataList: []
},
computed: {
uname () {
return this.username[0] + "***"
}
},
methods: {
submit() {
console.log('获取表单的值:', this.username)
this.load()
},
load() {
this.dataList = ['北京', '上海', '广州', '深圳']
}
}
})
</script>
</body>
</html>