Vue2基本使用及注意事项
发布：智码IT网 阅读：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
<input
type="button"
value="修改data.message"
v-on:click="changeMessage"
/>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.common.dev.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "test",
},
methods: {
changeMessage: function () {
this.message = "test_change";
},
},
});
</script>
</body>
</html>
运行效果：
1、页面载入时
2、点击按钮后
注意事项：
1、Vue仅管理el选项命中的元素及其后台元素，如果本例的button如果放在<div id="app">之外，则点击按钮不会有任何效果；
2、el指定的选择器，可以是ID、类和标签选择器，但是推荐用ID选择器；
3、被vue挂在的标签可以必须是双标签，且不能是html或body标签；
上一篇：没有了
下一篇：没有了