vue 组件开发

 作者QQ：1095737364    QQ群：123300273     欢迎加入！

1.新建路由:router-->index.js,修改成下面的代码

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index/index'
Vue.use(Router)
export default new Router({
    mode:'history',
    routes: [
        {
        path: '/',
        name: 'index',
        component: index
    },
    ]
})

 

2.在components文件夹下新建index文件夹,在index 文件夹下新建:index.vue

<template>
    <div class="">
    </div>
</template>
<script>
export default {
    data () {
        return {}
    },
    props: {},
    computed: {},
    components: {},
    methods: {},
    watch: {},
}
</script>
<style scoped>
</style>

 

3.绑定数据

　　1.单个数据绑定

<template>
<div class="content">
    <span v-text="pageDate.id"></span>
    <span v-text="pageDate.url"></span>
    <span v-text="pageDate.href"></span>
</div>
</template>
 
<script>
var pageDate =
    {
    id: 10000, //该广告的ID
    url: 'http://163.com', //广告图片路径
    href: 'http://baidu.com'//点击跳转连接
    }
export default {
    data () {
        return {
            pageDate
        }
    },
    props: {},
    computed: {},
    components: {},
    methods: {},
    watch: {},
}
</script>
<style scoped>
</style>            

 

 

　　　　　　注意: href 和src 有其特定的方式来绑定数据:

　　　　　　<a :href="pageDate.href"></a>

　　　　　　<img :src="pageDate.url" >

　　2.多条数据绑定:

<template>
<!-- v-for 表情表示循环输出数据:必须要有父类dom,否则会出错的-->
<div>
    <div v-for="item in pageDate">
    <span v-text="item.id"></span>
    <span v-text="item.url"></span>
    <span v-text="item.href"></span>
</div>
</div>
</template>
<script>
var pageDate =[
    {
    id: 10000, //该广告的ID
    url: 'http://163.com', //广告图片路径
    href: 'http://baidu.com'//点击跳转连接
    },
    {
    id: 10002, //该广告的ID
    url: 'http://163.com', //广告图片路径
    href: 'http://baidu.com'//点击跳转连接
    }]
export default {
    data () {
        return {
            pageDate
        }
    },
    props: {},
    computed: {},
    components: {},
    methods: {},
    watch: {},
}
</script>
<style scoped>
</style>

 

　　3.增删改

<template>
    <!-- v-for 表情表示循环输出数据:必须要有父类dom,否则会出错的-->
 <div>
    <div v-for="item in pageDate">
        <span v-text="item.id"></span>
        <span v-text="item.url"></span>
        <span v-text="item.href"></span>
    <button @click="detele()"> 删除数据</button>
    </div>
    <button @click="add"> 添加数据</button>
    <button @click="update"> 修改数据</button>
</div>
</template>
<script>
var pageDate = [
    {
        id: 10000, //该广告的ID
        url: 'http://163.com', //广告图片路径
        href: 'http://baidu.com'//点击跳转连接
    },
    {
        id: 10002, //该广告的ID
        url: 'http://163.com', //广告图片路径
        href: 'http://baidu.com'//点击跳转连接
    }
    ]
export default {
    data () {
        return {
            pageDate
        }
    },
    props: {},
    computed: {},
    components: {},
    methods: {
    add: function () {
    this.pageDate.push({
        id: 10003, //该广告的ID
        url: 'http://163.com', //广告图片路径
        href: 'http://baidu.com'//点击跳转连接
    })
},
update: function () {
    this.pageDate[1].id = 10000000000000000000
},
detele: function (index) {
    this.pageDate.splice(index, 1)
}
},
watch: {},
}
</script>
<style scoped>
</style>