入门程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test">
<h1>{{name}}Hello World</h1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//vue 只能作用于 el 作用的标签
//这里只作用于 #test"
const test = new Vue({
el: "#test", //element ;vue作用的标签
data: {
name: "zhagnsan !"
},
});
</script>
</html>
2.数据驱动，
双向数据绑定
a.
数据发生变化时，视图也发生变化，
再浏览器console控制台给name重新赋值
视图的内容会自动发生变化
b.在页面上加上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test">
<h1>{{name}} Hello World</h1>
<input type="text" v-model="name">
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//vue 只能作用于 el 作用的标签
//这里只作用于 #test"
const test = new Vue({
el: "#test", //element ;vue作用的标签
data: {
name: "zhagnsan !"
},
});
</script>
</html>
输入框发生变化是，数据也会发生变化