作者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, //該廣告的IDurl: '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, //該廣告的IDurl: 'http://163.com', //廣告圖片路徑href: 'http://baidu.com'//點擊跳轉連接 },{id: 10002, //該廣告的IDurl: '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, //該廣告的IDurl: 'http://163.com', //廣告圖片路徑href: 'http://baidu.com'//點擊跳轉連接 },{id: 10002, //該廣告的IDurl: 'http://163.com', //廣告圖片路徑href: 'http://baidu.com'//點擊跳轉連接 }] export default {data () {return {pageDate}},props: {},computed: {},components: {},methods: {add: function () {this.pageDate.push({id: 10003, //該廣告的IDurl: '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>

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue 组件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。