Vue 实现轮播

思路

  • 需要一个数组储存图片的地址
  • 需要遍历这个数组,只有当它的index 等于currentIndex的时候,才会显示这个图片
  • 需要用setInterval()来重复切换图片
  • 当鼠标点到不同tab上,切换图片
  • 用transition 来实现动画

难点

  • 动画的实现(自己对CSS不熟)

实现

简单的部分略过,具体代码去codepen上看。记录一下,遇到的问题。

  • vue如何渲染组建后自动执行某个函数?
    简单来说在created或者mounted中添加函数
mounted:function(){
    this.go()
  }

具体请看 Vue生命周期

它可以总共分为8个阶段:
beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后), beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后)
图片如下

  • CSS transition的使用

对CSS transition 不熟悉

transition: property duration timing-function delay;
.list-enter-to {
  transition: all 2s ease;
  transform: translateX(0);
}

transition time-function

  • Vue transition-group的使用

这个是最坑的,弄了半天,说一下要注意的点吧
transition-group 总是需要提供唯一的 key 属性值
v-show="index===currentIndex"要放到<li>中,不是<img>

 <transition-group tag="ul" name="list" class="imagebox">
    <li v-for="(item,index) in imagebox" :key="index" v-show="index===currentIndex">
     <a href="#">
       <img :src="item.src":alt="item.desc" @mouseenter="stop" @mouseleave=go >
      </a>
    </li>
  </transition-group>

Vue transition-group

一些有用的链接

Vue 的生命周期
transition time-function
Vue transition-group
vue实现轮播

Vue.js 2.0 教程

### Vue

首先,我们要先全局安装vue-cli.

$ sudo npm install -g vue-cli

然后,我们来创建一个新的项目

$ vue init webpack vueapp01

进入项目的文件夹,安装dependencies

$ cd vueapp01
$ npm install

安装完之后,我们就可以打开一个web server 了

$ npm run dev

这个命令会自动在localhost:8080创建一个server并把output显示在浏览器里。

项目结构

我们来看一下在新建项目里的文件结构

  • package.json文件里包括项目所有的dependecies
  • npm install 会把package.json里列出的dependecies 安装到 node_modules文件夹中

下面是index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

接下来,我们看一下在src文件夹中的main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

  • App是项目的根组件(root component)
  • Vue 是项目的主要框架

我们再看一下 App.vue 的内容

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
<script>
import Hello from './components/Hello'
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我们可以看到App 需要Hello 组件。Hello 组件被定义到了component 文件中的Hello.vue.

下面是Hello.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

值得注意的是这里的data不是object. 这里的data是一个function return to an object.


下面我们可以来改一下Hello.vue

<template>
  <div class="hello box">
    <ul>
      <li v-for="name in names">{{name.name}}</li>
    </ul>

    <input type="text" placeholder="THis is my input" v-model="input">
    <div >
      Input Name: {{input}}
    </div>

    <button type="button" @click="counter++">You've clicked this button
      {{counter}} times</button>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      names:[
        {name:"Jaime Lannister"},
        {name:"John Snow"},
        {name: "Sansa Stark"},
        {name: "Arya Stark"}
      ],
      input:"",
      counter:0

    }
  }
}
</script>

<style media="screen">
  .box{
    width:20%;
    margin:0 auto;
  }
</style>

效果如下

至此,我们已经完成了一个用vue-cli写的小demo.

用vue写一个to do list

最近,想学一些前端的知识。但感觉无从下手,因为前端的框架好多,不知道选哪一个 Angular, Vue, reat,backbone… 想想还是先学一下最近最火的vue好了,毕竟以前用vue写过一个网站而且vue也是中国人写的。但已经快一年没碰过vue了,什么都不记得了,就写一个to do list来复习一下vue好了。

构思

  • 用什么储存数据?

因为, 要做一个简单to do list,就不想考虑数据库了,用一个数组来储存数据就可以了。

  • 需要什么功能?

to do list 的功能的话,只需要有增加任务和删除任务就好。所以,需要两个function就可以了。

实际效果

全部代码可以到codepen上去查看,https://codepen.io/jingfei/pen/Npppya

下面我就讲一下关于vue的代码好了.

 <input v-model="task" @keyup.enter="add_task"  type="text" placeholder="Enter Your Task" />

v-model实现输入的内容和task进行双向绑定。用v-on来监听DOM事件,如果enter(按回车),执行add_task function.

下面是Vue实例

var app = new Vue({
  el: '#app',
  data: {
    task:"",
    todos:[]
  },
  methods:{
  add_task: function(){
    if(this.task){
      this.todos.push({text:this.task,isCompleted:false})
      this.task=""
    }else{
      alert("content cannot be empty")
    }
  },
  completed: function(index){
    this.todos[index].isCompleted=!this.todos[index].isCompleted
  }
}
})
<div class="box1">
     <ul v-for="todo,index in todos">
     <li>
       <input type="checkbox":checked="todo.isCompleted" @click="completed(index)">
       <span :class="todo.isCompleted?'completed':'' ">
        {{todo.text}}
       </span>
     </li>
   </ul>
  </div>

v-for来遍历todos的数组。用v-bind来把checkedhtml 属性和todo.isCompleted绑定。用v-on来监听鼠标左键,如果按了左键,执行completed(index) function. 利用v-bind来绑定class, 如果todo.isCompleted 是真的话,加入completed class.

总结

以上就是关于vue的代码了。在这个小项目里,对双向绑定,自定义触发和监听,绑定hmtl属性和class进行了实践。