前端小白vue基础篇

前端小白vue基础篇

鄙人一个跨专业入行的前端小白，虽然自学了html，css，简单js、jq。但是出来工作之后发现如果你只会这些不能叫做前端，前端的前辈对我们这种人有一个昵称——切图仔，对于这个昵称，我觉得还好，谁不是从切图仔过来的呢？是吧！但是我不能一直做切图仔啊！肯定要有提升。所以我就在网上搜了一下招聘需要的条件，发现，现在好多招聘都要会vue.js、angular.js、react.js这三个前端框架，对比了一下之后发现vue.js相对其他两个框架来说，学习成本会比较低，容易上手，重点是vue有专门的中文文档，对于我这种英语白痴来说简直就是量身定制一般。这是我学习vue的理由。重点这篇文章只是适合刚开始学习vue的小伙伴，大佬们可以直接跳过哈。好了说了那么多废话，下面我会一步步的介绍vue我的一些认识。

安装

首先先来安装vue.js。我用官方提供的cli，具体代码如下：

install vue-cli
npm install -g vue-cli
create a new project using the “webpack” boilerplate
vue init webpack my-project
install dependencies and go!
cd my-project
npm install
npm run dev

以上代码在cmd上按顺序执行。在这里介绍一个快速定位需要打开cmd文件夹的小技巧，打开到当前文件夹shift+鼠标右键，选择在此处打开窗口，这样就不用在最外层一直选择下去了。回到vue上，在安装的过程中需要注意一点的就是在执行vue init webpack my-project命令时，其实一直回车就可以，但是在这个use eslint to lint your code的时候我建议选择no，这个是检查代码规范的，如果你代码没有按照规定书写时会报错，但是因为我们是新手又是初学者，往往不太懂那里报错（少一个空格都会报错），所以我建议新手选择no。最后执行npm run dev 会显示vue官方的页面，如下：

这样一个vue的项目就基本构成了。

view层(html+css)

数据绑定：
原理我也不太懂，直接上代码（我是在conponents文件夹下的HelloWorld.vue编写代码，可以直接把代码复制到里面看效果）

<template>
  <div class="hello">
    <input type="text" v-model='msg'>
    <div>{
   {
   msg}}