Vue-cli傻瓜教程

Vue-cli傻瓜教程（语法篇）

1. 简单的介绍
2. 简单的代码
3. router-link
4. v-bind
5. 表达式
6. ES6
7. v-for
8. v-on
9. 常用钩子
10. 数据
11. 资源

---

简单的介绍

• .vue文件只有三个根标签
• 分别是template、script、style
• 分别对应html、js、css

---

简单的代码

html：

<router-link :to="pathUrl">{{msg}}</router-link>

js：

  export default {
    name: 'Index',
    data() {
      return {
        msg: 'Vue-cli',
        pathUrl: '/workflow'
      }
    }
  }

css:

<style scoped>
  a{
    color: #fff;
  }
</style>

---

router-link走你

<router-link to="/workflow">workflow</router-link>

router-link是一个vue自带的标签，用于路由的跳转
渲染后为a标签
但不同的是该标签不支持target="_blank"属性
而且是用来跳路由的即把目标地址写在to后

---

v-bind走你

html:

<input type="text" placeholder="msg">

js:

export default {
    name: 'demo',
    data() {
      return {
        msg: '双向绑定'
      }
    }
  }

:为v-bind的缩写，常用于双向绑定

---

表达式

html:

<div>{{msg}}</div>

js:

  export default {
    name: 'demo',
    data() {
      return {
        msg: '双向绑定'
      }
    }
  }

---

ES6走你

import 组件名 from '地址'

export default {
    name: 'demo',
    data() {
      return {

      }
    }
  }

vue里使用了ES6里头的import和export
用于组件之间的导入和导出

---

v-for走你

html:

<ul>
    <li v-for="tmp in list">
        <router-link :to="tmp.pathUrl">
            <div>{{tmp.msg}}</div>
            <div>
                <img :src="tmp.pic" alt="no found">
            </div>
        </router-link>
    </li>
</ul>

js:

export default {
    name: 'demo',
    data() {
      return {
        list: [
          {
            num : 1,
            msg : '11',
            pic : '../img/1.jpg',
            pathUrl : '/demo1'
          },
          {
            num : 2,
            msg : '22',
            pic : '../img/2.jpg',
            pathUrl : '/demo2'
          }
        ]
      }
    }
  }

v-for等同于js里面的for循环
通常用于列表渲染也可以通过一个对象的属性
因为vue的机制，每个v-for后面需要加带一个属性key='xxx'以区分多个遍历对象

---

v-on走你

html:

<button v-on:click="toDemo">toDemo</button>

<button @:click="toDemo">toDemo</button>

<button @click.prevent="toDemo">toDemo</button>

js:

methods: {
      toDemo() {
        console.log(toDemo);
      }
    }

v-on用于绑定事件监听
缩写为@，阻止默认事件prevent
methods与data同级

---

常用钩子走你

什么是勾子呢，先看看一张图压压惊

看完是不是更不淡定了，这是一张vue的生命周期图
红色框框就是钩子了，当你需要在某个状态下访问或者操作数据时你就可以用上钩子
常用的钩子有这么几个

created

实例创建后使用

mounted

整个视图都渲染完毕后使用

updated

数据更改导致的 DOM 重新渲染时使用

activated

组件激活时使用

destroyed

实例销毁后调用

---

数据

• data
• props
• computed
• methods
• watch

data通常是以一个function所需的参数写在return的对象里

data（）{
    return {
        name : 'demo'
    }
}

props可以是数组或对象，用来接收来自父组件的参数

props: ['fathers']

computed是一个计算属性

  data: { a: 1 },
  computed: {
    aDouble: function () {
      return this.a * 2
    },
  }

methods作用等同于script标签里面存放方法

methods: {
    plus: function () {
      this.a++
    }
  }

watchvue的监听属性

data() {
    return {
        num: 1
    }
},
watch : {
    num (val) {
        if(val!===1){
            console.log('不为1');
        }else{
            console.log('1')；
        }
    }
}

---

资源

• components

components当import进一个组件时需要在里边注册后才能使用

import demo from 'demo'
export default {
    data () {},
    components : {
        demo
    }
}

---