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>