VueJS入门学习(一)

  刚刚接触VueJs的时候,还不懂NodeJs是什么,单页面应用是什么?随着慢慢的深入慢慢的理解了这些东西。简单介绍一些VueJs,一个页面一个Vue实例,包含了页面中控件所需要的方法,事件,参数等等。先上一个例子。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

  el绑定的是你Vue所作用的大范围标签的ID,data里面是你整个界面中要用的值。放值就是用json的形式写在data里面,注意data,el,这些是规定好的属性,不能更改。data里面的东西可以根据自己需要来写。取值的形式有多种(后面会详细说),上面{{}}这一种形式是一种。

  Vue引入有两种方式,一种传统Html里面使用引js的方式引入Vue的js文件。一种是使用NodeJs引入。

  主要说一下后面这种,目前随着前端框架的兴起和NodeJs的出现,单页面应用成为目前前端开发的主流。对于Vue来说,实际开发项目时,也是采用单页面的形式。

  1.首先电脑上要有NodeJs环境,没有需要装一个,安装步骤很简单,下一步下一步就行了。打开cmd输入npm -v显示出版本号即安装成功。

  2.安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org(注意等号后面不要有空格不然会安装不上),安装淘宝镜像只是加快我们Install的速度,输入cnpm -v来验证是否成功。

  3.安装webpack,输入npm install webpack -g,安装完成之后输入webpack -v验证安装是否成功。

  4.安装vue脚手架vue-cli,输入npm install vue-cli -g,安装完成之后输入vue -V(V大写)验证是否安装成功。

到这准备工作就完成了。下一篇会介绍如何生成vue的项目模板。

猜你喜欢

转载自www.cnblogs.com/shuaiweb/p/9362696.html