Vue.js是一个框架而不是一个新语言、
Vue.js的官方中文教程其实是一个比较系统的教程，本文是一个快速入门教程，让之前有过前端开发经验的人可以快速使用vue干活。
就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。
本文的主要内容有：
在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 @2.5.16/dist/vue.js
<script src="@2.5.16/dist/vue.js"></script>在Vue.html中插入一个id为firstVue的<div>
<div id="firstVue"></div>在Vue.html中插入下面js代码:
<script type="text/javascript">var myVue = new Vue({el:"#firstVue"})
</script>整个代码是这样：
<!DOCTYPE html>
<html>
<head><title>Vue Demo</title><script src="@2.5.16/dist/vue.js"></script>
</head>
<body><div id="firstVue"></div>
</body>
<script type="text/javascript">var myVue = new Vue({el: "#firstVue"})
</script>
</html>解释一下代码
js变量 myVue 就是Vue创建的一个对象，可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象， 这个对象就是myVue
el是Vue的保留字，用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签。
至此，Vue.js框架在html页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白
VUE这个框架的数据流向是单向的，所以数据绑定后的数据流向是从vue实例——>DOM文档的
我们给上一步的<div>标签添加下面一句话
{{ my_data }}变成这样
<div id="firstVue">{{my_data}}
</div>这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式出现的。
然后在创建 vue实例的代码中加入下面数据声明:
data:{my_data: "test"
}于是整个代码是下面这样:
<!DOCTYPE html>
<html>
<head><title>Vue Demo</title><script src="@2.5.16/dist/vue.js"></script>
</head>
<bod本文发布于:2024-02-05 07:54:32，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170727798464717.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
