软件HbuilderX
1、Vue框架的数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
<script>
// vue框架
function Vue(config){
//1.从配置对象中找到元素的id
var id = config.element;
//2.根据id找到js对象
var jsObject = document.getElementById(id);
//3.从配置对象中找到数据
var itemName = config.data;
//4.让js对象显示数据
jsObject.innerHTML = itemName;
}
// 创建配置对象
var config = {
"element": "#app",
"data": "mate10"
}
// 启动框架
var vue = new Vue(config);
</script>
</html>
小结
- 框架会从配置对象中找元素,找数据,把数据显示在元素上;
- 创建配置对象用element保存元素id,用data保存数据,启动框架;
2、自动执行方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
<script>
// vue框架
function Vue(config){
window.onload = config.mothed();
}
// 配置对象
var config = {
// mothed:存放自动执行的函数
"mothed": function(){
// 屏幕上弹出信息
window.alert("run");
}
}
// 启动框架
var vue = new Vue(config);
</script>
</html>
3、引入vue.js,使用占位符显示数据
可自行下载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<table border="2">
<!-- 遍历数据 -->
<tr v-for="item in itemList">
<!-- 占位符 -->
<td>
{{item}}
</td>
</tr>
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 引入vue框架
// 创建配置对象
var config = {
"el": "#app",
"data": {
itemList: ["mate10","mate20"]
}
}
// 启动框架
var vue = new Vue(config);
</script>
</html>
4、多条数据的显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<table border="2">
<!-- 遍历数据 -->
<tr v-for="item in itemList">
<!-- 占位符 -->
<td>
名称:{{item.name}}
</td>
<td>
价格:{{item.price}}
</td>
</tr>
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 引入vue框架
// 创建配置对象
var config = {
"el": "#app",
"data": {
itemList: [
{"name": "mate10", "price": 1000},
{"name": "mate20", "price": 3000},
]
}
}
// 启动框架
var vue = new Vue(config);
</script>
</html>
5、按钮设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="insert">添加</button>
<br>
<button v-on:click="remove">删除</button>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 创建配置对象
var config = {
"el": "#app",
"methods": {
"insert": function(){
window.alert("insert");
},
"remove": function(){
window.alert("remove");
}
}
}
// 启动框架
var vue = new Vue(config);
</script>
</html>
6、实现元素添加并显示
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input id="itemName">
<button v-on:click="insert">添加</button>
<br>
<table border="2">
<tr v-for="item in itemList">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 创建配置对象
var config = {
"el": "#app",
"data": {
"itemList": [{
"name": "mate10",
"price": 1000
}]
},
"methods": {
"insert": function() {
// 找到输入框
var input = document.getElementById("itemName");
// 取到输入框的值
var itemName = input.value;
// 创建对象
var item = {
"name": itemName,
"price": 3000
}
// 把对象放到集合中,放进去之后,界面会自动更新
this.itemList.push(item);
}
}
}
// 启动vue框架
var vue = new Vue(config);
</script>
</html>