vuejs2.0详细教程，结合Api文档

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

---

new vue ({}) 构造函数
注意： 事件不支持驼峰命名，
let 当前作用域的声明不同于全局声明var

"app">
  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

---

components 全局注册，data通过返回函数赋值。

<script>
import componentA from './components/a'
import Vue from 'vue'
export default {
  name: 'app',
  components: {componentA},
  data () {
    return {
      hello: 'word',
      num: 1,
      list: [
        {
          name: 'a',
          age: 23
        },
        {
          name: 'b',
          age: 78
        },
        {
          name: 'c',
          age: 90
        }
      ],
      list2: [
        {
          zy: '工人',
          gz: 2000
        },
        {
          zy: '技术',
          gz: 5000
        },
        {
          zy: '销售',
          gz: 3000
        }
      ],
      objList: {
        name: 'lisj',
        age: 23,
        color: 'red',
        func: 'run'
      }
    }
  },
  methods: {
    // addItem () {
    //   // console.log(this.list2)
    //   this.list2.push({
    //     zy: 'lisl',
    //     gz: 34
    //   })
    // }

    // 替换页面元素
    addItem () {
      Vue.set(this.list2, 0, {
        zy: '商标',
        gz: 20000
      })
    }

  }
}
script>

---

v-text 与 v-html 区别

v-text 绑定变量中有标签 直接会渲染出来，而v-html 会去渲染标签

---

自定义事件如何触发

子级传递父级，父级监听子级。

自定义事件在表单中的应用。通过emit ，当用户点击对应标签执行相应事件。

---

标签属性：

v-bind:class = ‘str’ 简写 =》:class 和本身class不冲突，：class 是动态绑定

注：v-bind 常用绑定class

code=> :style = ‘linkcss’
linkcss:[ css样式多个以逗号隔开]

条件渲染：

v-show 与 v-if 执行v-show还占文档流，既控制元素的显示与隐藏。

---

表单元素

通过v-model 及时处理数据实例

---

计算属性及调用方法的优缺点

---

监听-watch

---

全局注册组件规范写法：

---

---

动态实现模板

---

父子级组件间的通信：
1、子级通过 emit event 向父级通信
2、父级通过 pass props 向子级通信

3、父组件向子组件传html

---

vue高级–动画

---

---

动画实例二

---

动画实例三—-动态切换组件

---

动画实例四—-通过条件切换组件引入key

---

动画实例五—-js控制动画

---

指令也是方法， el 即文档标签 binding绑定 value为绑定的值
自定义指令 一

---

自定义指令 二

---

定义scoped 当前组件样式不会泄露到全局

---

钩子函数

---

安装vue-cli

---

cnpm 使用指南

---

路由设置中加入mode: ‘history’ 可以启动历史记录

---

路由跨模块传值

---

路由嵌套

---

路由设置 通过tag 改变默认标签

---

路由设置 多个router-view

‘

---

路由设置 页面重定向

---

vuex 数据中心

demo： https://github.com/vuejs/vuex/tree/dev/examples

---

结合vue开发的商城源代码：

index页面

<template v-for="product in productList">
          <h3>{{ product.title}}h3>
          <ul>
            <li v-for="item in product.list">
              <a :href="item.url">{{ item.name }}a>
              <span v-if="item.hot" class="hot-tag">HOTspan>
            li>
          ul>
          <div v-if="!product.last" class="hr">div>
        template>

productList: {
        pc: {
          title: 'PC产品',
          list: [
            {
              name: '数据统计',
              url: 'http://starcraft.com'
            },
            {
              name: '数据预测',
              url: 'http://warcraft.com'
            },
            {
              name: '流量分析',
              url: 'http://overwatch.com',
              hot: true
            },
            {
              name: '广告发布',
              url: 'http://hearstone.com'
            }
          ]
        },
        app: {
          title: '手机应用类',
          last: true,
          list: [
            {
              name: '91助手',
              url: 'http://weixin.com'
            },
            {
              name: '产品助手',
              url: 'http://twitter.com',
              hot: true
            },
            {
              name: '智能地图',
              url: 'http://maps.com'
            },
            {
              name: '团队语音',
              url: 'http://phone.com'
            }
          ]
        }

<div class="index-board-list">
        <div
        class="index-board-item"
        v-for="(item, index) in boardList"
        :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
          <div class="index-board-item-inner" >
            <h2>{{ item.title }}h2>
            <p>{{ item.description }}p>
            <div class="index-board-button">
              <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买router-link>
            div>  
          div>
        div>
      div>

.index-board-car .index-board-item-inner{
  background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
  background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
  background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../assets/images/4.png) no-repeat;
}
.index-board-item h2 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}
.line-last {
  margin-right: 0;
}

轮播图

:slides="slides" :inv="invTime">

<script>
import slideShow from '../components/slideShow'
export default {
  components: {
    slideShow
  },
  created: function () {
    this.$http.get('api/getNewsList')
    .then((res) => {
      this.newsList = res.data
    }, (err) => {
      console.log(err)
    })
  },
  data () {
    return {
      invTime: 2000,
      slides: [
        {
          src: require('../assets/slideShow/pic1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'http://xxx.xxx.com'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
      ],
      boardList: [
        {
          title: '开放产品',
          description: '开放产品是一款开放产品',
          id: 'car',
          toKey: 'analysis',
          saleout: false
        },
        {
          title: '品牌营销',
          description: '品牌营销帮助你的产品更好地找到定位',
          id: 'earth',
          toKey: 'count',
          saleout: false
        },
        {
          title: '使命必达',
          description: '使命必达快速迭代永远保持最前端的速度',
          id: 'loud',
          toKey: 'forecast',
          saleout: true
        },
        {
          title: '勇攀高峰',
          description: '帮你勇闯高峰，到达事业的顶峰',
          id: 'hill',
          toKey: 'publish',
          saleout: false
        }
      ],
      newsList: [],
      productList: {
        pc: {
          title: 'PC产品',
          list: [
            {
              name: '数据统计',
              url: 'http://starcraft.com'
            },
            {
              name: '数据预测',
              url: 'http://warcraft.com'
            },
            {
              name: '流量分析',
              url: 'http://overwatch.com',
              hot: true
            },
            {
              name: '广告发布',
              url: 'http://hearstone.com'
            }
          ]
        },
        app: {
          title: '手机应用类',
          last: true,
          list: [
            {
              name: '91助手',
              url: 'http://weixin.com'
            },
            {
              name: '产品助手',
              url: 'http://twitter.com',
              hot: true
            },
            {
              name: '智能地图',
              url: 'http://maps.com'
            },
            {
              name: '团队语音',
              url: 'http://phone.com'
            }
          ]
        }
      }
    }
  }
}
script>

子组件

<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
      <a :href="slides[nowIndex].href">
        <transition name="slide-trans">
          <img v-if="isShow" :src="slides[nowIndex].src">
        transition>
        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        transition>
      a>
    div>
    <h2>{{ slides[nowIndex].title }}h2>
    <ul class="slide-pages">
      <li @click="goto(prevIndex)"><li>
      <li v-for="(item, index) in slides"
      @click="goto(index)"
      >
        <a :class="{on: index === nowIndex}">{{ index + 1 }}a>
      li>
      <li @click="goto(nextIndex)">>li>
    ul>
  div>
template>

<script>
export default {
  props: {
    slides: {
      type: Array,
      default: []
    },
    inv: {
      type: Number,
      default: 1000
    }
  },
  data () {
    return {
      nowIndex: 0,
      isShow: true
    }
  },
  computed: {
    prevIndex () {
      if (this.nowIndex === 0) {
        return this.slides.length - 1
      }
      else {
        return this.nowIndex - 1
      } 
    },
    nextIndex () {
      if (this.nowIndex === this.slides.length - 1) {
        return 0
      }
      else {
        return this.nowIndex + 1
      }
    }
  },
  methods: {
    goto (index) {
      this.isShow = false
      setTimeout(() => {
        this.isShow = true
        this.nowIndex = index
      }, 10)
    },
    runInv () {
      this.invId = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    clearInv () {
      clearInterval(this.invId)
    }
  },
  mounted () {
    this.runInv();
  }
}
script>

<style scoped>
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  height: 30px;
  text-align: left;
  padding-left: 15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.slide-pages li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
}
.slide-pages li .on {
  text-decoration: underline;
}
style>