VueJS入门学习

Posted 2020-12-25 shuaiweb

　　刚刚接触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的项目模板。