前端小白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}}div>
  div>
template>

<script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'v-model'
        }
      }
    }
script>
<style scoped>

style>

效果图为：

修改input框里面的内容，下面div的内容会跟着改变。这里有个小坑，就是template下只能有一个div，如果出现两个div会报错
v-bind:class
这个主要是在同一个div上像进行两个类相互切换用的，现在有个需求是我有段文字原来是红色的，点击文字之后我需要变成蓝色，再点变回红色，来回切换。v-bind:class也可以改写成:class，直接省略v-bind。上代码（在原来的基础上加的）：

<template>
  <div class="hello">
    <input type="text" v-model='msg'>
    <div>{{msg}}div>
    <div v-bind:class="isText ? 'red' : 'blue'" v-on:click='hit(111)'>{{text}}div>
  div>
template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'v-model',
      text:'我要红蓝色切换',
      isText:true,
    }
  },
  methods:{
    hit(num){
      this.isText = !this.isText;
      console.log(num)
    }
  }
}
script>


<style scoped>
  .red {
    color: red;
    cursor: pointer;
  }
  .blue {
    color: blue;
    cursor: pointer;
  }
style>

效果图：

上面我是定义了两个类，red，blue，利用二元运算符判断isText显示red，blue，点击事件里面使isText取反，其实你用着用着就会知道在哪里会用到了，先熟悉一下语法。既然这里写到点击事件那我顺便说下吧。
v-on:click
其实点击事件的v-on:click可以改写成@click，这也官方推荐的。细心的朋友可以看到我在点击事件hit里面传了个参数，没错，vue在函数传参就是这样简单。这里记得语法就好。
v-bind:src
这个主要动态获取到图片路径的时候用，如果不是动态获取的像平常那样写就好了，上代码（先贴个图，直接复制代码加在之前的页面就可以了）：

<img v-bind:src="url" alt="">

url:require('../assets/timg.jpg')

img {
    width: 100px;
    height: 100px;
  }

效果图：

这里要补充一下，因为我是把图片放在assets目录下，所以img的url用require的方法引入。如果你是放在static目录下的就不用直接写路劲就可以了。
v-for
遇到同样样式，结构的版块我们就可以用v-for来渲染。我们就做个简单的，我们有三张图片，想渲染在页面上面。上代码：

//view层上把img改成这样
for='(item,index) in list' v-bind:src="item.url" alt="">
//在data上加上list数组
list:[{
        url:require('../assets/timg.jpg')
      },{
        url:require('../assets/1.jpg')
      },{
        url:require('../assets/2.jpg')
      }]
 //在assets下添加两张图片

效果图：

三张图片都显示出来了，顺便说下v-for里面的参数index，其实它就是下标，从0开始。
v-if、v-show
两个都是用于显示隐藏的效果，区别是v-if是删除dom，而v-show是隐藏dom，相当于css的diaplay:none。上代码（也是直接加上就可以了）：

//view层加上
<div v-if='isIf'>我是v-ifdiv>
<div v-show='isShow'>我是v-showdiv>
//data加上
isShow:false,
isIf:false,

效果图：

效果图里可以看到我连个都是设置false，所以都没有显示，但可以看到v-show有dom生成只是css样式隐藏了，而v-if是没有dom生成的。

逻辑层（script）

港真，鄙人对生命周期也不是特别的理解，在网上看了挺多资料的，还是没理解透，总结原因是自己蠢（呜呜~~），我只能根据自己的理解和平常自己用的比较多的方法告诉大家。不多说废话，上代码：

<script>
  export default 
  //变量的定义
    data() {
      return {
        msg: ''
      }
    },
    components:{
        //这里主要是注册组件的
    },
    created: function() {
      console.log('组件创建前')
    },
    mounted: function() {
      console.log('组件载入后')
      //这里一般是写一进页面就执行的逻辑。比如请求数据
    },
    methods: {
      //这里一般写页面的逻辑，就像上面的点击切换颜色就是写在这里
    },
    watch: {
        //这里是用与监听数据的变化，有变化之后执行的逻辑
    },
    computed:{
        //这里用于计算，如果是电商类项目，用于计算价格。
    },
  }
script>

我用的比较多的就是上面的东西了，第一次写东西，很多东西总结不到位，不喜勿喷啊，希望大佬指出问题。这里面的方法就不在这里一一举例说明了。vue还有很多很多东西有时间再总结一下。