Vue入门(一)——概念及Hello Vue

一、简介

Vue是一个前端的双向数据绑定类的框架。最新版本的Vue参考了React的部分设计,当然也有它独特的地方,比如Vue的单文件组件开发方式就很有创新。另外Vue自身的一些绑定的语法、用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发以及SPA等现代化前端开发。

二、Vue入门demo

我们可以把Vue直接当作一个JS库来使用,所以它可以很容易地接入到你的项目或者单个页面中。甚至,你可以只使用它的双向数据绑定功能,所以它很容易上手。

比如说我们有一个需求:一个网页上有一个div标签,我们有一个json对象,其中存储着一些数据,我们要把json对象中的数据放到div标签中。

此时,我们只需要以下几步,就可以实现此功能:

步骤1:
创建一个文件夹,并且创建一个html文件。比如:index.html;

步骤2:
引入Vue库。比如 
当然,你也可以直接下载Vue的JS文件。

步骤3:
创建一个div,并且给它一个id。比如:
步骤4: 创建Vue对象,并把数据绑定到上面创建好的div上去。

按照上面的步骤,最终的演示代码如下:





    
    Hello Vue
    
    


    
    
{{message}}

最终,页面上将呈现出:Hello Vue

三、总结

  • Vue构造函数:el属性是element的缩写,它表示把当前的Vue对象挂载到哪个标签上,支持CSS选择器和DOM对象,一般用id选择器选择当前页面的标签。

  • Vue选项:data属性是自定义数据。在上面的例子中,只演示了一个message属性,Vue会自动将自定义的数据与html模板数据进行绑定。

  • Vue数据绑定的方式就是使用 {{}}。

  • 以上就是Vue进行数据绑定的最基本模板,需要注意的是先创建好标签,并且给它一个ID名,然后再创建Vue对象。

下一篇,会继续深入Vue的数据绑定,敬请期待。

你可能感兴趣的:(Vue入门(一)——概念及Hello Vue)