前言，历经苦难终于来到了Vue.js，来到大名鼎鼎的前端框架怎么能，不好好学习呢，加油吧 下载:HBuilderX编程工具 官方下载，建议下载12版比较稳定.
好了之后，去下一个node.js. 安装步骤，一直点下一步就行了，然后在cmd以管理员身份运行，输入node -V 有版本号就是正常安装. 安装好了.
回到正题 使用Hbuilderx使用html引用vue 勾选第二个使用html引用vue，这样就创建了一个可以使用vue的html项目，奈何是新手 ┭┮﹏┭┮ ，简单容易理解.
编写第一个“vue”程序:
在头部引入vue.min.js文件
<script src="./js/vue.min.js"></script>定义一个div给它一个ID标记
<body> <!--这是我们的View--> <div id="app">{{yier}}</div> </body>实例化一个vue对象，通过el去获取div ，data交互数据
<script> // 这是我们的Model new Vue({ el:'#app', data:{ yier:'你好逸儿 !' }, }) </script>运行结果:你好逸儿 会在这个无边框的盒子里出现
双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message"/> </div> <script> new Vue({ el:"#app", data:{ message:"你好" }, }) </script> </body> </html>它通过这个v-modle指令 去实现，文本框与p标签的数据绑定 然后当文本框中的值改变时 p标签中的内容也会被更新
页面的熏染以及属性的定义
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> {{a}} </div> <script > var data={a:1} var apps=new Vue({ el:"#app", data:data }) data.a="我是品胖胖我为自己带眼" </script> </body> </html>如上代码所示 我用 data变量去定义a ，所以我在下面可以利用data.a去覆盖前面a的值以达到页面的熏染达到相应示的目的。
其中vm.a==data.a， 如果这个时候我在div中再定义一个｛｛b｝｝
<div id="app"> {{a}} {{b}} </div>通过vm.b 给赋上一个值 vm.b=“test” ，结果呢 页面并没有什么改变 data.b=“test” 也没有效果 所以告诉我们想要给属性 或者变量响应式的话，需要提前声明.
来自一个不想写代码的程序员0.0.
