1. 效果预览:
在本案例中,使用了Vue.js中的数据双向绑定功能,当input里的内容出现变化的时候,输入框上的文本也会发生相应的改变。
2. 开发工具
在进行HelloWorld的开发之前,先介绍一下笔者的开发环境和工具,笔者使用的文本编辑器是VS Code,浏览器使用的Chrome浏览器,笔者十分推荐。(PS:IE8以下的浏览器就不要用了吧!)
在官方文档中,明确提出了:Vue 不支持 IE8 及以下版本,因为Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
3. 如何获取Vue.js
直接用 <script> 引入
直接下载Vue.js并用 <script> 标签引入,Vue 会被注册为一个全局变量。
需要注意的是:在开发环境下不要使用压缩版本,不然你就失去了所有常见错误相关的警告!
CDN
我们推荐链接到一个你可以手动更新的指定版本号:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。Npm指令如下:
$ npm install vue
本次教程使用
对于本次HelloWorld的案例中,我们就直接使用<script>标签引用的方式,至于其他的引入方式,在以后需要的过程中,笔者会逐一讲解。毕竟,学习是有一个梯度的,要先把精力使用在关键的地方上。
4. 核心代码编写
<!DOCTYPE html> <htmllang="en">
<head> <metacharset="utf-8" /> <title>Vue</title> <scriptsrc="./vue.js"></script> </head>
<body> <divid="app"> <h1>{{message}}</h1> <inputv-model="message"> </div> </body> <script> // el 属性设置vue的挂载点 varapp = newVue({ el:"#app", data: { message:"Hello World" } }); </script>
</html>
|
5. 代码分析
首先,我们使用script标签引入了Vue.js,代码如下:
<scriptsrc="./vue.js"></script>
// el 属性设置vue的挂载点 varapp = newVue({ el:"#app", data: { message:"Hello World" } });
|
接下来,读者可以自行测试一下,如果将<input v-model="message">代码换成<input :value="message">,是否可以实现数据双向绑定的功能,答案肯定是不行的,双向绑定的重点便是使用了v-model指令进行数据的绑定,代码如下:
<divid="app"> <h1>{{message}}</h1> <inputv-model="message"> </div>
|
对于vue.js中一些常用的指令,笔者也会在以后的教程中,进行详细的讲解。
6. 总结
通过改案例,我们可以明显感受到Vue.js在数据操作的过程中带来的便利性,我们不再需要像以前编写Jquery.js的代码一样,需要先获取到Dom节点,再对Dom节点进行相应的操作。Vue.js可以直接对数据进行操作,并且可以通过页面对数据进行动态的修改。
本案例只是单纯的演示案例,对于Vue.js的详细知识,笔者会在下一章节开始进行详细的讲解。
7. 下一节
下一节将会对Vue.js中的挂载点,模板,实例三个概念进行详细的讲解
参考资料: