起步
①调试代码用http-server（https://www.npmjs.com/package/http-server）；
②下载Vue.js开发版本（https://cn.vuejs.org/v2/guide/installation.html）；
③下载安装Vue Devtools（https://devtools.vuejs.org/guide/installation.html）；
④编写hello world程序，在浏览器显示hello my name xxxxxxxx，如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src="JS/vue.js"></script> </head> <body> <h1 id="xx">hello {{name}}</h1> <script> new Vue({ el: "#xx", data: { name: "my name xxxxxxxx", }, }); </script> </body> </html>
注意：
①Vue实例和容器一一对应
②{{}}只要是js表达式都可以
v-bind
v-bind:可以简写成:
v-bind是单向绑定，数据改变导致页面改变，但是页面改变数据不变；
双向绑定采用v-model，且它只能用在表单类元素上，v-model:value可以简写为v-model
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src="JS/vue.js"></script> </head> <body> <h1 id="xx" v-bind:x="这里面当作表达式执行">hello {{name}}</h1> <script> new Vue({ el: "#xx", data: { name: "my name xxxxxxxx", 这里面当作表达式执行: "dajsldjas", }, }); </script> </body> </html>
执行结果：
<h1 id="xx" x="dajsldjas">hello my name xxxxxxxx</h1>