创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
看个简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>www.125jz.com-vue</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{text}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
text:'文本数据被渲染到HTML中了哦！'
}
})
</script>
</body>
</html>
除了文本插值，我们还可以像这样来绑定元素 attribute：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind attribute 指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
VUE官方教程：https://cn.vuejs.org/v2/guide/
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/7196.html
微信扫一扫 
支付宝扫一扫 