my_hidden : "hidden" }
如果说是JQuery是手事情坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何工作JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。
Vue.js的官方中文教程其实也是一个不错的教程，不过对比于一次性把所有观点掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的常识点逐步补全。
就像开车，不长短要知道策动机的事情道理才华上路的，甚至你可能一辈子也不用知道。
好了，开始吧
筹备首先，以下几点但愿你已经知道或者做到了:
你会用html+css+javascript 写一些网页
你知道什么是DOM和BOM(Browser Object Model)
你知道Vue.js是一个框架而不是一个新语言
你会用百度或者Google此中之一去查找答案
接着，我会围绕以下几个Vue.js的根基（核心）使用要领逐个做测试和使用说明：
新建vue东西
数据绑定
事件绑定
表单控件绑定
最后，按照上面的常识点结合起来写出我们的第一个vuejs前端页面
新建Vue东西引用vue.js
在桌面成立一个 Vue.html文件, 然后引入 vue.js的CDN地点 https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
新建Vue实例
在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="https://cdn.jsdelivr.net/npm/[email protected]/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_2Uzcx_"> {{ my_data }}
酿成这样
<div id="firstVue"> {{my_data}} </div>
这个双大括号的语法叫做mustache 语法，大括号里面的是作为变量形式呈现的。
然后在创建 vue实例的代码中插手下面数据声明:
data:{ my_data: "test" }
整个代码看起来向下面这样:
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="firstVue"> {{my_data}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue", data:{ my_data: "test" } }) </script> </html>
data参数用来绑定VUE实例的数据变量，每个差别变量之间用逗号分隔断绝分手，上面我们绑定了自界说变量my_data，并赋初值‘test‘
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30054.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")