一、第一个项目
# 初始化项目
npm init -y
# 安装vue
npm install vue
# 导入依赖
<script src="./node_modules/vue/dist/vue.js"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="num">
<!-- 事件处理 -->
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1>{{name}},非常酷,有{{num}}个人点赞!</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
name: "小强崽",
num: 1
},
methods: {
cancle() {
if (this.num === 0) {
this.num === 0;
} else {
this.num--;
}
}
}
});
</script>
</body>
</html>
二、安装插件
Vscode
Vetur
Vue 2 Snippets
Chrome
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon
三、常用指令
3.1 v-text和v-html
1、v-text和v-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text和v-html</title>
</head>
<body>
<div id="app">
<!-- 网速慢时会显示插值表达式 -->
{{msg}} {{1+1}} {{hello()}}
<br>
<!-- 网速慢时不会显示插值表达式 -->
<span v-html="msg"></span>
<span v-text="msg"></span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "小强崽"
},
methods: {
hello() {
return "World"
}
}
})
</script>
</body>
</html>
3.2 v-bind
2、v-bind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind</title>
</head>
<body>
<div id="app">
<!-- 单向绑定 -->
<!-- 给html标签的属性绑定 -->
<a v-bind:href="link">小强崽的博客</a>
<!-- 动态绑定样式,isActive为true的时候，样式才生效。 特殊字符用单引号引起来'text-danger'或者驼峰命名法textDanger。:style可以省略v-bind-->
<span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color:color1,fontSize:size}">小强崽</span>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
link: "https://www.wuduoqiang.com/",
isActive: true,
hasError: false,
color1: 'red',
size: '45px'
}
})
</script>
</body>
</html>
3.3 v-model
3、v-model.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- 双向绑定 -->
<input type="checkbox" v-model="language" value="Java">Java<br>
<input type="checkbox" v-model="language" value="Shell">Shell<br>
<input type="checkbox" v-model="language" value="Python">Python<br>
选中了:{{language.join(",")}}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
language: []
}
})
</script>
</body>
</html>
3.4 v-on
4、v-on.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<!-- 绑定事件 -->
<!-- v-on或者@符号代表绑定事件 -->
<button v-on:click="num++">点赞</button>
<button @click="cancle">取消</button>
<h1>{{name}},非常酷,有{{num}}个人点赞!</h1>
<!-- 事件修饰符 once只触发一次 stop阻止事件 prevent阻止默认行为 -->
<!-- 弹窗 -->
<div style="border: 1px solid red; padding:20px;" v-on:click="hello">
大div
<!-- 不会弹窗 -->
<div style="border: 1px solid blue; padding:20px;" @click.stop="hello">
小div】
<!-- 不会跳转链接 -->
<a href="https://www.wuduoqiang.com/" @click.prevent.stop="hello">小强崽的博客</a>
</div>
</div>
<!-- 按键修饰符 -->
<!-- 方向键上下加2减2，ctrl+单击num直接等于10 -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10">
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
name: "小强崽",
num: 1
},
methods: {
cancle() {
if (this.num === 0) {
this.num === 0;
} else {
this.num--;
}
},
hello() {
alert("World!")
}
}
});
</script>
</body>
</html>
3.5 v-for
5、v-for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- 遍历元素 -->
<!-- 直接遍历 v-for="user in users" -->
<ul>
<!-- user为当前遍历的对象，index为当前索引 -->
<li v-for="(user,index) in users">
当前索引：{{index}} ==> 当前用户：{{user}}
<br>
<!-- 遍历对象 -->
<span v-for="v,k,i in user">
当前用户key:{{k}} ==> 当前用户value:{{v}} ==> 当前用户索引:{{i}}
<br>
</span>
</li>
</ul>
<!-- 推荐加上:key来区分不同的元素，加快遍历速度，如user.id -->
<!--
1 ==> 0
2 ==> 1
3 ==> 2
4 ==> 3
5 ==> 4
5 ==> 5
-->
<ul>
<li v-for="(num,index) in nums" :key="index">
{{num}} ==> {{index}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
users: [
{ name: '雪松', gender: '男', age: 21 },
{ name: '致远', gender: '男', age: 22 },
{ name: '郝果', gender: '女', age: 23 },
{ name: '鑫磊', gender: '女', age: 24 }
],
nums: [1, 2, 3, 4, 5, 5]
}
});
</script>
</body>
</html>
3.6 v-if和v-show
6、v-if和v-show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if和v-show</title>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">点我</button>
<!-- 元素已经完全不存在了 -->
<h1 v-if="show">if看到我</h1>
<!-- 元素还存在，display: none; -->
<h1 v-show="show">show看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
show: true
}
});
</script>
</body>
</html>
3.7 v-else和v-else-if
7、v-else和v-else-if.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else和v-else-if</title>
</head>
<body>
<div id="app">
<button v-on:click="random=Math.random()">随机</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75"> >=0.75看到我 </h1>
<h1 v-else-if="random>=0.5"> >=0.5看到我 </h1>
<h1 v-else-if="random>=0.2"> >=0.2看到我 </h1>
<h1 v-else="random<0.2"> <0.2看到我 </h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
random: 1
}
});
</script>
</body>
</html>
与v-for结合使用
主要代码
<!-- 与v-for结合使用，只遍历女的 -->
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender=='女'">
当前索引：{{index}} ==> 当前用户：{{user}}
</li>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- 遍历元素 -->
<!-- 直接遍历 v-for="user in users" -->
<ul>
<!-- user为当前遍历的对象，index为当前索引 -->
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender=='女'">
当前索引：{{index}} ==> 当前用户：{{user}}
<br>
<!-- 遍历对象 -->
<span v-for="v,k,i in user">
当前用户key:{{k}} ==> 当前用户value:{{v}} ==> 当前用户索引:{{i}}
<br>
</span>
</li>
</ul>
<!-- 推荐加上:key来区分不同的元素，加快遍历速度，如user.id -->
<!--
1 ==> 0
2 ==> 1
3 ==> 2
4 ==> 3
5 ==> 4
5 ==> 5
-->
<ul>
<li v-for="(num,index) in nums" :key="index">
{{num}} ==> {{index}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
users: [
{ name: '雪松', gender: '男', age: 21 },
{ name: '致远', gender: '男', age: 22 },
{ name: '郝果', gender: '女', age: 23 },
{ name: '鑫磊', gender: '女', age: 24 }
],
nums: [1, 2, 3, 4, 5, 5]
}
});
</script>
</body>
</html>
四、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
</head>
<body>
<div id="app">
<!-- 数据需要实时计算出来的可以利用计算属性来实现 -->
<ul>
<li>华为手机：价格{{huaWeiPhonePrice}}。数量：<input type="number" v-model="huaWeiNum"></li>
<li>小米手机：价格{{xiaoMiPhonePrice}}。数量：<input type="number" v-model="xiaoMiNum"></li>
<li>总计：{{totalPrice}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
huaWeiPhonePrice: 4000,
xiaoMiPhonePrice: 3000,
huaWeiNum: 1,
xiaoMiNum: 1
},
computed: {
// 计算属性
totalPrice() {
return this.huaWeiPhonePrice * this.huaWeiNum + this.xiaoMiPhonePrice * this.xiaoMiNum;
}
}
});
</script>
</body>
</html>
五、监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和监听器</title>
</head>
<body>
<div id="app">
<!-- 数据需要实时计算出来的可以利用计算属性来实现 -->
<ul>
<li>华为手机：价格{{huaWeiPhonePrice}}。数量：<input type="number" v-model="huaWeiNum"></li>
<li>小米手机：价格{{xiaoMiPhonePrice}}。数量：<input type="number" v-model="xiaoMiNum"></li>
<li>总计：{{totalPrice}}</li>
<li>库存：{{repertory}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
huaWeiPhonePrice: 4000,
xiaoMiPhonePrice: 3000,
huaWeiNum: 1,
xiaoMiNum: 1,
repertory: '充足'
},
computed: {
// 计算属性
totalPrice() {
return this.huaWeiPhonePrice * this.huaWeiNum + this.xiaoMiPhonePrice * this.xiaoMiNum;
}
},
watch: {
// 监听器，这里监听huaWeiNum的数值
huaWeiNum(newValue, oldValue) {
console.log("newValue:" + newValue);
console.log("oldValue:" + oldValue);
// 当库数量大于等于3时，提示库存不足
if (newValue >= 3) {
this.repertory = '不足';
this.huaWeiNum = 3;
} else {
this.repertory = '充足'
}
},
},
});
</script>
</body>
</html>
六、过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!-- 数据需要实时计算出来的可以利用计算属性来实现 -->
<ul>
<li v-for="user in users">
姓名:{{user.name}}==>年龄:{{user.age}}==>
<!-- 三元运算符 -->
性别:{{user.gender==1?"男":"女"}}
<!-- 使用局部过滤器 -->
性别:{{user.gender | genderFilter }}
<!-- 使用全局过滤器 -->
性别:{{user.gender | gFilter }}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局过滤器，gFilter过滤器的名称
Vue.filter("gFilter", function (val) {
if (val == 1) {
return '男';
} else {
return '女'
}
})
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
users: [
{ name: '雪松', gender: '1', age: 21 },
{ name: '致远', gender: '1', age: 22 },
{ name: '郝果', gender: '0', age: 23 },
{ name: '鑫磊', gender: '0', age: 24 }
]
},
filters: {
// 局部过滤器
genderFilter(val) {
if (val == 1) {
return '男';
} else {
return '女'
}
}
}
});
</script>
</body>
</html>
七、组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件化</title>
</head>
<body>
<div id="app">
<!-- 正常的一个方法 -->
<button v-on:click="count++">点击次数{{count}}</button>
<!-- 调用全局声明的组件 -->
<counter></counter>
<!-- 调用局部声明的组件 -->
<button-counter></button-counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 1、全局声明一个组件
Vue.component("counter",{
template: `<button v-on:click="count++">点击次数{{count}}</button> `,
data(){
return {
count: 1
}
}
})
// 2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">点击次数{{count}}</button> `,
data(){
return {
count: 1
}
}
}
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
count: 1
},
components: {
// 要使用的组件 key:value
'button-counter': buttonCounter
}
});
</script>
</body>
</html>
八、生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
</head>
<body>
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞</button>
<h3>{{name}},有{{num}}个人点赞</h3>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
// 管控div元素
el: "#app",
data: {
name: '小强崽',
num: 1
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=================beforeCreate=================");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show);
console.log("html模板未加载：" + document.getElementById("num"));
},
created() {
console.log("=================created=================");
console.log("数据模型已加载：" + this.name, this.num);
console.log("方法已加载：" + this.show);
console.log("html模板已加载：" + document.getElementById("num"));
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=================beforeMount=================");
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
mounted() {
console.log("=================mounted=================");
console.log("html模板已渲染：" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=================beforeUpdate=================");
console.log("数据模型已更新：" + this.num);
console.log("html模板未更新：" + document.getElementById("num").innerText);
},
updated() {
console.log("=================updated=================");
console.log("数据模型已更新：" + this.num);
console.log("html模板已更新：" + document.getElementById("num").innerText);
},
});
</script>
</body>
</html>
九、模块化开发
主要安装步骤
# 全局安装webpack
npm install webpack -g
# 安装vue脚手架
npm install -g @vue/cli-init
# 初始化一个项目,使用webpack模板，名字为xiaoqiang-web
vue init webpack xiaoqiang-web
初始化步骤
# 项目名
? Project name xiaoqiang-web
# 项目描述
? Project description xiaoqiang-web
# 作者信息
? Author QForever <875667601@qq.com>
# 运行环境
? Vue build standalone
# 安装路由
? Install vue-router? Yes
# 安装代码检查
? Use ESLint to lint your code? No
# 单元测试
? Set up unit tests No
# e2e测试
? Setup e2e tests with Nightwatch? No
# 包管理工具
? Should we run `npm install` for you after the project has been created? (recommended) npm
文件及文件夹信息
# config文件夹
主要放配置文件，如端口，IP信息
# package.json文件
需要安装的依赖
# package-lock.json文件
安装依赖的详细信息
# src文件夹
源码目录
# static文件夹
静态资源文件存放
定义一个组件
在src/components创建Qiang.vue
<template>
<div>
<h1>{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
name: '小强崽'
}
}
}
</script>
<style>
</style>
在route/index.js配置路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Qiang from '@/components/Qiang'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/qiang',
name: 'Qiang',
component: Qiang
}
]
})
访问http://localhost:8080/#/qiang
修改App.vue使用route-link跳转
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/qiang">小强崽</router-link>
<router-link to="/">去首页</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
十、整合Element-ui
# 安装
npm i element-ui
在main.js导入element-ui
主要部分
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
完整代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
快速使用
直接将官网的样式复制即可，如使用单选按钮，这里修改radio :2为默认选中
Qiang.vue
<template>
<div>
<h1>{{ name }}</h1>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</template>
<script>
export default {
data() {
return {
name: "小强崽",
radio: "2",
};
},
};
</script>
<style>
</style>
十一、模拟后台管理
11.1 主页组件
修改App.vue
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']" router="true">
<el-submenu index="1">
<template slot="title"
><i class="el-icon-message"></i>导航一</template
>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="/qiang">小强</el-menu-item>
<el-menu-item index="/table">表格</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"
><i class="el-icon-setting"></i>导航三</template
>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<!-- 设置为路由视图 -->
<router-view></router-view>
<!-- <el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table> -->
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
// data() {
// const item = {
// date: "2016-05-02",
// name: "王小虎",
// address: "上海市普陀区金沙江路 1518 弄",
// };
// return {
// tableData: Array(20).fill(item),
// };
// },
};
</script>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
开启路由跳转，根据官网文档
<el-menu :default-openeds="['1', '3']" router="true">
将此区域设置为路由视图
<router-view></router-view>
11.2 配置路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Qiang from '@/components/Qiang'
import Table from '@/components/Table'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/qiang',
name: 'Qiang',
component: Qiang
},
{
path: '/table',
name: 'Table',
component: Table
}
]
})
11.3 表格组件
抽取表格组件，创建Table.vue
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"> </el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
};
</script>
<style>
</style>
11.4 效果展示
点击小强到Qiang.vue
点击表格到Table.vue
