前言今天刚到了一本书《Vue.js项目实战》,为了提高自己的技术水平，想要有空就把书上的内容看一遍，再亲自写一遍，顺便写个文章作为自己的学习记录。第一个vue应用vue.js的下载地址：vue官网下载新建一个html，创建一个vue应用<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Title</title> <!–将库添加到这里–> <script src="../vue/vue.js" type=“text/javascript”></script></head><body><div id=“root”> Is this an hello world?</div><script> // 会输出vue的版本 console.log(‘We are using Vue version ’ + Vue.version)</script></body></html>强烈推荐大家安装vue.js devtools插件，调试代码非常有帮助。创建vue实例// 创建vue实例 let vm = new Vue({ // 给实例起名字 name: ‘myApp’, // 根DOM元素的CSS选择器 el: ‘#root’, data() { return { message: ‘Hello Vue.js’ } } })new 调用了vue的构造器创建了一个实例，构造器中有一个参数——option对象。该对象可以携带多个属性。name是给该实例起一个名字，未来可能会有多个实例，便于区分。el是元素的选择器，表示该实例会在这个元素上进行vue的操作。data是保存当前的数据v-model的使用<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Title</title> <!–将库添加到这里–> <script src="../vue/vue.js" type=“text/javascript”></script></head><body> <div id=“root”> <p>{{message}}</p> <input v-model=“message”/> </div><script> // 创建vue实例 let vm = new Vue({ // 给实例起名字 name: ‘myApp’, // 根DOM元素的CSS选择器 el: ‘#root’, data() { return { message: ‘Hello Vue.js’ } } })</script></body></html>vue的{{}}可以运行javascript表达式，并且最后显示结果效果如下图：可以看到p标签的内容随着input的值的变化而变化调试工具也能清楚地看到message值的变化第一章结束。