数据绑定
使用Vue时在Vue对象的el字段中要指定一下根容器，这里用id选择器。这个例子同时学习了data和methods的基本用法。
数据绑定（data-binding）可以将Vue对象中...
数据绑定
使用Vue时在Vue对象的el字段中要指定一下根容器，这里用id选择器。这个例子同时学习了data和methods的基本用法。
数据绑定（data-binding）可以将Vue对象中的data的值绑定到HTML标签中的某些位置，则修改时只需要修改对象中相应data的值即可。
index.html
<!DOCTYPE html>
<html lang=\"en\" xmlns:v-bind=\"http://www.w3.org/1999/xhtml\">
<head>
<meta charset=\"UTF-8\">
<title>Vue.js</title>
<link rel=\"stylesheet\" href=\"style.css\">
<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id=\"vue-app\">
<!--data的直接使用-->
<h3>我叫{{name}},我的job是{{job}}</h3>
<hr>
<!--methods的使用-->
<h3>{{greet(\"Afternoon\")}}</h3>
<hr>
<!--属性绑定-->
<a v-bind:href=\"website\">一个data绑定到了这个标签的href</a>
<br>
一个data绑定到了右边这个输入框的value
<input type=\"text\" v-bind:value=\"name\">
<hr>
<!--绑定到标签,v-html中的内容将以HTML标签形式插入进去-->
<p v-html=\"websiteTag\"></p>
</div>
<script src=\"app.js\"></script>
</body>
</html>
app.js
// 实例化vue对象
new Vue({
el: \"#vue-app\",
data: {
name: \"lzh\",
job: \"学生\",
website: \"http://www.baidu.com\",
websiteTag: \"<a href=\'http://www.baidu.com\'>绑定到标签</a>\"
},
methods: {
greet: function (time) {
return \"Good \" + time + \" ,\" + this.name + \" !\";
}
}
});
/*
el: element,元素,这里指HTML中的根容器
data: 用于数据的存储
methods: 用于方法的存储
*/
运行结果
![\"在这里插入图片描述\"](\"/images/csdn/15454588731Nx54p545B8873.png\")
事件绑定
使用v-on:或者@后跟要绑定的事件，就可以将Vue对象中的function传进去。
要注意的是，一般来说传入的回调函数有没有括号都可以。当要在HTML中为其传入参数时就必须有括号，当要使用回调的事件对象event时就必须没有括号。见下面的例子。
indexl.html
<!DOCTYPE html>
<html lang=\"en\" xmlns:v-on=\"http://www.w3.org/1999/xhtml\" xmlns:>
<head>
<meta charset=\"UTF-8\">
<title>Vue.js</title>
<link rel=\"stylesheet\" href=\"style.css\">
<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id=\"vue-app\">
<!--事件绑定,注意v-on:可以换成一个@符号-->
<h3>直接在v-on:事件里写</h3>
<button @click=\"age++\">加一岁</button>
<button v-on:click=\"age--\">减一岁</button>
<p>我的年龄是{{age}}</p>
<h3>写到methods里</h3>
<button @click=\"add()\">加一岁</button>
<button v-on:click=\"subtract()\">减一岁</button>
<p>我的年龄是{{age}}</p>
<h3>双击事件</h3>
<button v-on:dblclick=\"add(10)\">加十岁</button>
<button v-on:dblclick=\"subtract(10)\">减十岁</button>
<p>我的年龄是{{age}}</p>
<h3>鼠标事件</h3>
<!--这里一定不能给回调的函数加括号,否则无法获取到event对象-->
<div id=\"canvas\" v-on:mousemove=\"updateXY\">{{x}},{{y}}</div>
</div>
<script src=\"app2.js\"></script>
</body>
</html>
app2.js
// 实例化vue对象
new Vue({
el: \"#vue-app\",
data: {
age: 30,
x: 0,
y: 0
},
methods: {
add: function (inc = 1) {
this.age += inc;
},
subtract: function (dec = 1) {
this.age -= dec;
},
updateXY: function (event) {//这里event即是当事件触发时的事件对象
// console.log(event); //输出查看一下
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
style.css
#canvas{
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
}
运行结果
![\"在这里插入图片描述\"](\"/images/csdn/1545458874H1cN5454588754.png\")
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
