作者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>
 
 
 
 
 
 

vue 组件开发的更多相关文章

  1. vue前端开发那些事——vue组件开发

    vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...

  2. Vue组件开发实例(详细注释)

    Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  4. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  5. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  6. vue 开发系列(三) vue 组件开发

    概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...

  7. Vue组件开发实践之scopedSlot的传递

    收录待用,修改转载已取得腾讯云授权 导语 现今的前端开发都讲究模块化组件化,即把公共的交互和功能封装到一个个的组件之中,在开发整体界面的时候就能像搭积木一样快速清晰高效.在使用Vue开发我们的vhtm ...

  8. Vue组件开发分享

    在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们 ...

  9. vue组件开发练习--焦点图切换

    1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换 ...

  10. Vue 组件开发demo

    1.代码地址 github:https://github.com/MengFangui/VueComponentDemo- 2.关键代码 (1)main.js //引入vue import Vue f ...

随机推荐

  1. 合并静态库出现 can't move temporary file错误

    静态库的制作就不说了很简单,网上也很多例子,这里主要讲下我合并通用静态库时候遇见的坑,在合并前注意.a文件一定要正确,我有一次scheme选了release但是device忘了换,结果怼着两个模拟器静 ...

  2. OpenCV学习2-----使用inpaint函数进行图像修复

    安装opencv时,在opencv的安装路径下, sources\samples\cpp\  路径里面提供了好多经典的例子,很值得学习. 这次的例子是利用inpaint函数进行图像修复. CV_EXP ...

  3. [leetcode-553-Optimal Division]

    Given a list of positive integers, the adjacent integers will perform the float division. For exampl ...

  4. 进程间通信之AIDL

    一.引言 AIDL是android内部进程通信接口的描述语言,是实现跨进程方法调用的一大利器,其中Binder和Messenger的实现机制都是AIDL. 二.使用下面结合示例说明其使用过程: 本次示 ...

  5. Python3 从入门到出门

    引:此文是自己学习python过程中的笔记和总结,适合有语言基础的人快速了解python3和没基础的作为学习的大纲,了解学习的方向:笔记是从多本书和视频上学习后的整合版. (一)初识python 1. ...

  6. MyEclipse2014web工程项目直接复制不能访问报错处理方案

    在学习web servlet项目中,做一个项目时 , 完成到了某一阶段 实现了部分功能,有必要保存这一项目,当复制这个项目之后发现发布会报错或者不能访问. 其实复制项目主要是为了在以后的学习中如果能顺 ...

  7. HTML form表单小结

    HTML form标签小结 最近研究 form标签,有一些小心得写下来与大家分享分享,共勉.在小结的最后有一个form表单的小例子,可以作为参考. -----DanlV form是HTML的一个极为重 ...

  8. string.trim().length()的用法

    public class Test{ public static void main(String args[]){ String data = " a bc "; //调用str ...

  9. java在控制台输出空心正方形,菱形,空心菱形

     使用for和if打印一个空心正方形 /*思路:要想打印一个5x5的空心正方形,首先它的第一横行和最后一行都是填满的,需要全部遍历出来,第二三四行和只有左右两条边是出来的,中间部分为空的.因此在打印第 ...

  10. 详解equals()方法和hashCode()方法

    前言 Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码.equals()和hashCode()都不是final方 ...