文章目录
一、Vue概述
1.1、Vue的起源
1.2、Vue概述
Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
教程:https://cn.vuejs.org/v2/guide/
特点:
-
HTML、CSS、JavaScript基础知识后,可快速上手Vue
-
灵活:在一个库和一套完整框架之间自如伸缩
-
高效:20kB运行大小,超快虚拟 DOM
二、Vue基本使用
2.1 传统开发模式对比
2.2 Vues.js之HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1 + 2}}</div>
<div>{{msg + '----' + 123}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
Vue的基本使用步骤
1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法做功能了
4、把vue提供的数据填充到标签里面
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
el:挂载点 :挂载点el可以理解为:告诉Vue你要把数据填充到哪个位置,通过ID进行标注。
1)实例参数分析:
- 实例参数分析el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
- data:模型数据(值是一个对象)
2)插值表达式用法:
- 插值表达式用法将数据填充到HTM标签中
- 插值表达式支持基本的计算操作
3)vue代码运行原理分析概述编译过程的概念
- 概述编译过程的概念(Vue语法原生语法)
2.3 data:数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型的数据时,遵循JS的语法
2.4 问答环节
1、Vue实例的作用范围是什么?
Vue会管理el选项命中的元素及其内部的后代元素
2、是否可以使用其他选择器?
类选择器和ID选择器 但是建议使用ID选择器
3、是否可以设置其他的DOM元素?
可以使用其他的双标签 但是不能用HTML和BODY
三、Vue模板语法
1.如何理解前端渲染?
把数据填充到HTM标签中
2.前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎心
- 使用vue特有的模板语法
3.模板语法概览
- 差值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
四、指令
4.1 什么是指令
- 什么是指令?
- 什么是自定义属性
- 指令的本质就是自定义属性指令的格式:以v开始(比如:v- cloak)
4.2 v-cloak指令
- 插值表达式存在的问题:“闪动“
- 如何解决该问题:使用 v-cloak指令
- 解决该问题的原理:先隐藏,替换好值之后再显示最终的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-cloak指令的用法
1、提供样式
[v-cloak]{
display: none;
}
2、在插值表达式所在的标签中添加v-cloak指令
背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
4.3 数据绑定指令
总览:
- v-text填充纯文本
①相比插值表达式更加简洁 - v-htm填充HTML片段
①存在安全问题
②本网站内部数据可以使用,来自第三方的数据不可以用 - v-pre 填充原始信息
①显示原始信息,跳过编译过程(分析编译过程)
4.3.1 v-text
<h1 v-text="msg"></h1>
v-text指令的作用是:
- v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
- v-text指令无论内容是什么,都只会解析为文本
没有闪动问题,可以经常使用。
4.3.2 v-html指令
<div v-html='msg2'></div>
v-html指令的作用是:
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html
,永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
v-html存在安全隐患一般不进行使用。
4.3.3 v-pre指令
<div v-pre>{{msg}}</div>
v-pre指令作用:
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-html='msg2'></div>
<div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
1、v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中,但是可能有安全问题
3、v-pre用于显示原始信息
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
msg1: '<h1>HTML</h1>',
msg2:"<a href='https://www.baidu.com'>我是百度</a>"
}
});
</script>
</body>
</html>
截图展示:
4.4 数据响应式
- 如何理解响应式
①htm5中的响应式(屏幕尺寸的变化导致样式的变化)
②数据的响应式(数据的变化导致页面内容的变化) - 什么是数据绑定
①数据绑定:将数据填充到标签中 - v-once只编译一次
①显示内容之后不再具有响应式功能
4.4.1 v-once指令
- 执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-once>{{info}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-once的应用场景:如果显示的信息后续不需要再修改,你们可以使用v-once,这样可以提高性能。
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
info: 'nihao'
}
});
</script>
</body>
</html>
4.5 双向数据绑定
- 当数据发生变化的时候,视图也就发生变化
- 当视图发生变化的时候,数据也会跟着同步变化
MVVM设计思想详解 mvvm(分治思想):
- MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
- m model
- 数据层 Vue 中 数据层 都放在 data 里面
- v view 视图
- Vue 中 view 即 我们的HTML页面
- vm (view-model) 控制器 将数据和视图层建立联系
- vm 即 Vue 的实例 就是 vm
4.5.1 v-model指令
1)v-model是一个指令,限制在 <input>、<select>、<textarea>、components
中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
双向数据绑定
1、从页面到数据
2、从数据到页面
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
总结:
1、v-model指令的作用是便捷的设置和获取表单元素的值
2、绑定的数据会和表单元素的值动态关联
2)v- model的低层实现原理分析
v-model的底层实现原理分析
<input type="text" v-bind:value='msg' v-on:input='handle'>
<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value="msg" v-on:input='handle'>
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
<input type="text" v-model='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
v-model指令的本质
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function (event) {
// 使用输入域中的最新的数据覆盖原来的数据
this.msg = event.target.value;
}
}
});
</script>
</body>
</html>
v-model底层的实现原理就是基于v-on和v-bind来实现的。
4.6 事件绑定
Vue如何处理事件呢?那么将介绍如下指令:
4.6.1 v-on指令
- v-on 指令用法
<input type = 'button' v-on:click='num++'/>
- v-on 简写形式
<input type = 'button' @click='num++'/>
4.6.2 事件函数的调用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='num++'>点击</button>
<button @click='num++'>点击1</button>
<button @click='handle'>点击2</button>
<button @click='handle()'>点击3</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
}, // 注意点: 这里不要忘记加逗号
// methods 中 主要是定义一些函数
methods: {
handle: function () {
// 这里的this是Vue的实例对象+
console.log(this === vm)
// 在函数中 想要使用data里面的数据 一定要加this
this.num++;
}
}
});
</script>
</body>
</html>
总结:
1、v-on指令的作用:为元素绑定事件(单击,移入,移出,双击···)
2、事件名不需要写on
3、指令可以简写为@
4、绑定的方法写在methods属性中
5、方法内部通过this关键字才能访问定义在data中的数据
6、事件绑定的方法写成函数调用的形式,可以传入自定义的参数
7、定义方法时可以定义形参来接收传入的实参
8、事件的后面可以跟上.修饰符对事件进行控制(如keyup.enter回车键触发)
9、this就是Vue的实例。vm
4.6.3 事件函数参数传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,
并且事件对象的名称必须是$event
-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function (event) {
console.log(event.target.innerHTML)
},
handle2: function (p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
console.log(event.target.tagName)
this.num++;
}
}
});
</script>
</body>
</html>
4.6.4 事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>点击1</button>
</div>
<div>
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
事件绑定-事件修饰符
*/
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle0: function () {
this.num++;
},
handle1: function (event) {
// 阻止冒泡
// event.stopPropagation();
},
handle2: function (event) {
// 阻止默认行为
// event.preventDefault();
}
}
});
</script>
</body>
</html>
stop阻止冒泡
prevent阻止默认行为
4.6.5 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="">
<div>
用户名:
<input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
</div>
<div>
密码:
<input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
</div>
<div>
<input type="button" v-on:click='handleSubmit' value="提交">
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
事件绑定-按键修饰符
*/
Vue.config.keyCodes.f1 = 113
var vm = new Vue({
el: '#app',
data: {
uname: '',
pwd: '',
age: 0
},
methods: {
clearContent: function () {
// 按delete键的时候,清空用户名
this.uname = '';
},
handleSubmit: function () {
console.log(this.uname, this.pwd)
}
}
});
</script>
</body>
</html>
4.6.6 自定义按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.aaa='handle' v-model='info'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值
*/
Vue.config.keyCodes.aaa = 65
var vm = new Vue({
el: '#app',
data: {
info: ''
},
methods: {
handle: function (event) {
console.log(event.keyCode)
}
}
});
</script>
</body>
</html>
<input type="text" v-on:keyup='handle' v-model='info'>
4.7 简单计算器案例
1)需求:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>简单计算器</h1>
<div>
<span>数值A:</span>
<span>
<input type="text" v-model='a'>
</span>
</div>
<div>
<span>数值B:</span>
<span>
<input type="text" v-model='b'>
</span>
</div>
<div>
<button v-on:click='handle'>计算</button>
</div>
<div>
<span>计算结果:</span>
<span v-text='result'></span>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
简单计算器案例
*/
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function () {
// 实现计算逻辑
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
</script>
</body>
</html>
4.8 属性绑定
4.8.1 v-bind指令
1、v-bind指令用法1
<a v-bind:href='url'>跳转</a>
2、v-bind指令写法2
<a :href='url'>跳转</a>
书写格式:v-bind:属性名 = 表达式
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img v-bind:title="imgTitle" alt="">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
<img :src="imgSrc" alt="">
<img :title="imgTitle" alt="">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
imgSrc: "图片地址",
imgTitle: "标题",
isActive: false
},
methods: {
}
});
</script>
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度1</a>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
属性绑定
*/
var vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
},
methods: {
handle: function () {
// 修改URL地址
this.url = 'https://www.sohu.com/';
}
}
});
</script>
</body>
</html>
总结:
1、v-bind指令的作用:为元素绑定属性
2、完整写法:v-bind:属性名 简写:省略v-bind 直接写 :属性名
3、需要动态的增删class 建议使用对象的方式
4.9 样式绑定
4.9.1 class样式处理对象用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active: isActive,error: isError}">
测试样式
</div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定
*/
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function () {
// 控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
</script>
</body>
</html>
4.9.2 class样式处理数组用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>测试样式</div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定
*/
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function(){
this.activeClass = '';
this.errorClass = '';
}
}
});
</script>
</body>
</html>
4.9.3 样式绑定的语法细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
.test {
color: blue;
}
.base {
font-size: 28px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
<div v-bind:class='arrClasses'></div>
<div v-bind:class='objClasses'></div>
<div class="base" v-bind:class='objClasses'></div>
<button v-on:click='handle'>切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
样式绑定相关语法细节:
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理?默认的class会保留
*/
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error',
isTest: true,
arrClasses: ['active', 'error'],
objClasses: {
active: true,
error: true
}
},
methods: {
handle: function () {
this.isTest = false;
this.objClasses.error = false;
}
}
});
</script>
</body>
</html>
4.9.4 stye样式处理
4.10 分支循环结构
4.10.1 v-if和v-show指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支结构
v-show的原理:控制元素样式是否显示 display:none
*/
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function () {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
总结:
1、v-if指令的作用:根据表达式的真假切换元素的显示状态
2、本质是通过操作DOM元素来切换显示状态(操作DOM树对性能的消耗较大)
3、频繁切换的元素用v-show,反之用v-if
4、表达式为true,元素存在于DOM树中,若为false,则从DOM树种移除
5、v-show指令的作用是:根据真假切换元素的显示状态
6、其原理是修改元素的display,实现隐藏(display:none)
4.10.2 v-for指令遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
循环结构-遍历数组
*/
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '苹果'
}, {
id: 2,
ename: 'orange',
cname: '橘子'
}, {
id: 3,
ename: 'banana',
cname: '香蕉'
}]
}
});
</script>
</body>
</html>
4.10.3 v-for指令遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 使用原生js遍历对象
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for (var key in obj) {
console.log(key, obj[key])
}
/*
循环结构
*/
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>
</html>
根据数据生成列表结构
总结:
1、v-for指令的作用:根据数据生成列表结构
2、数组经常和v-for结合使用
3、语法:(item,index) in 数据
4、item和index可以结合其他指令一起使用
5、数组长度的更新会同步到页面上,是响应式的。
五、案例Tab选项卡
5.1 案例分析
5.2 实现步骤
5.3 实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
cursor
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id'
v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
<img :src="item.path">
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
*/
var vm = new Vue({
el: '#app',
data: {
currentIndex: 0, // 选项卡当前的索引
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods: {
change: function (index) {
// 在这里实现选项卡切换操作:本质就是操作类名
// 如何操作类名?就是通过currentIndex
this.currentIndex = index;
}
}
});
</script>
</body>
</html>