Vue.js起步
在官网中介绍到,使用 Vue.js有两种方式:一种是通过引入CDN后直接使用或者下载后使用,另一种就是使用命令行工具CLI搭建脚手架去编写对应的内容。目前我们是最基础的教程,所以先介绍最简单的方法——引入CDN方式,后期我们再具体介绍脚手架方式。
引入CDN,只需要在创建的html文件中引入下图中的script代码,这样就成功地将Vue.js引入到我们的项目中并可以使用了。
第一个起步页面
<!DOCTYPE html>Vue.js快速起步<!-- 通过CDN引入Vue --><!-- vue-app根容器 --><!-- 渲染显示HTML代码 -->
{{message}}
// 实例化Vue对象varapp =newVue({ el:'#app', data: { message:'Hello Vue!'} })el代表element,指需要获取的元素,一定是html中的根容器元素。
data用于数据的存储,可以设置对应的数据,data的值也是一个对象,类型可以是字符串、number、对象、数组。
花括号在这里是模板语法。如果data类型是字符串,花括号可以直接获取到相关数据的值,而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中,通过DOM操作再把需要的值插入到真实DOM中。