Vue.js是一个构建数据驱动的web界面的库。它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件。
1.实现在文本框输入文字，在上方显示。
Paste_Image.png
2.新建vue.js、vue1.js、vue1.html，目录如下。
Paste_Image.png
3.vue1.html的代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1</title>
<script type="text/javascript" src="../src/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" name="message" v-model="message" />
</div>
<script type="text/javascript" src="../src/js/vue1.js"></script>
</body>
</html>
vue1.js的引入在页面代码的后面，否则在某些浏览器上会出现找不到#app的元素的错误。
4.vue1.js代码
var app = new Vue({ el: '#app', data: { message: "hello world" }});
网友评论