vue中的data里的信息注意作用就是将里面的信息在视图中渲染
el:(element)就是元素(绑定某个选择器) , data里面写是属性 , methods 里面写的是方法
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
上面的命令行就是引入vue的框架 , 同时会向外暴露一个Vue(),所以使用时 , 只需要new vue()即可 , 使用里面的工具
<hr >实线
<hr style="border:1px dashed "> 虚线; 加上这两个就变成了虚线
如果不对span元素应用样式，使用span标签没有任何的显示效果；
span标签可以设置id或class属性，这样不仅能增加语义，还能更方便的对span元素应用样式；
vue的介绍
Vue 是一套用于构建用户界面的渐进式框架。
渐进式 : 也可以制作简单页面还可以制作复杂的页面 (构建项目可以由简单到复杂) ; 只不过在里面加一些插件就变成复杂的页面
vue框架的优点
体积小 压缩后的文件只有33k
2).运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3).双向数据绑定 让开发者不再去操作DOM,将更多的经历投入到业务中
4).生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定.
如何使用vue框架
vue的入门案例
在F12 获取属性值只需app.msg=“xxxx”
插值表达式{{ key }}是将script里的引用到div里 , 里面只需写key就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello 入门案例</title>
</head>
<body>
//此处的div是一个盒子模型, 其最主要 的作用就是将script里的内容通过在这里进行展现
<div id="app">
<h1>测试</h1>
//插值表达式{{}}
<h3>{{ hello }}</h3>
</div>
<!-- 引入vue框架直接从官网将这行代码进行粘贴复制, 然后就引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<!-- 引入js,第二中方式将vue的文件放到该目录下在进行引入 -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素 绑定id选择器
el: "#app",
//这里面写的是要使用的属性
data: {
hello: "helloVue"
}
})
</script>
</body>
</html>
v-cloak属性的说明
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的
Mustache (插值表达式) 标签直到实例准备完毕。
如果不加v-cloak 那么加载 的时候会先出现{{ hello }} 然后字出现 , (hello的value(属性值))就是hellovue这几个字这个速度比较快
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
<style>
/* 定义属性样式 */
[v-cloak]{
/*将元素进行隐藏 */
display: none;
}
</style>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app" v-cloak>
<h1>v-clock属性</h1>
<h3 v-cloak>{{ hello }}</h3>
</div>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
hello: "helloVue"
}
})
</script>
</body>
</html>
v-text说明
就是优化v-cloak , 且v-text=“value值” 和插值表达式进行传值 , 而v-cloak则不可以后面传值 , 只能通过插值表达式进行传值 ,
<!-- v-text指令 没有闪动效果 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app">
<h3 v-text="text"></h3>
<h3 v-text=>{{text}}</h3>
</div>
<!-- 引入js -->
<h3 v-text="text"></h3>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
hello: "helloVue",
text: "数据绑定text"
}
})
</script>
</body>
</html>
v-html说明
就是将属性值中含有的h标签不再页面中进行展现
就比如下列中的h3标签不会再页面中展现
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app">
<span v-html="html"></span>
</div>
<!-- 引入js -->
<h3 v-text="text"></h3>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
html: "<h3>数据绑定text</h3>"
}
})
</script>
</body>
v-pre 的说明
**就是展现出key , 不解析该标签 **
效果
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app">
<span v-pre>{{html}}</span>
</div>
<!-- 引入js -->
<h3 v-text="text"></h3>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
html: "<h3>数据绑定text</h3>"
}
})
</script>
</body>
v-once说明
数据只解析一次, 即使点击F12在console中修改该值 , 那么在页面中也不会改变
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app">
<span v-once="html">{{html}}</span>
</div>
<!-- 引入js -->
<h3 v-text="text"></h3>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
html: "<h3>数据绑定text</h3>"
}
})
</script>
</body>
v-model的说明
就是通过F12可以修改在页面上展现的值 , 页面上的 值也可以修改通过F12的值
双向绑定只能在可以动态编辑的标签 比如多/单选框 下拉框 input框等
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-clock属性</title>
</head>
<body>
这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
<div id="app">
<input type="text" v-model="html">
</div>
<!-- 引入js -->
<h3 v-text="text"></h3>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
//element 元素
el: "#app",
data: {
html: "<h3>数据绑定text</h3>"
}
})
</script>
</body>
mvvm双向页面的绑定的思想
Dom就是整个页面(前端的一个html的文件)就成之为一个dom的对象;
1).字母解释
1.M model 数据
2.V view 视图
3.VM (view-model) 数据和视图的控制
2).当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定 绑定到页面中
v-on事件绑定(加一)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
v-on事件绑定
数值: {{num}}
<button v-on:click="num++">加一</button>
<button @click="num=num+2">加二</button>
<button @click="addnum">加一</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script >
const app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
addnum(){
this.num++
}
}
})
</script>
</body>
</html>
stop冒泡阻止事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件访问修饰符</title>
</head>
<body>
<div id="app">
数值{{num}}
<!-- 1. stop 阻止事件冒泡
事件冒泡: 由于嵌套关系,先执行内部事件,如果执行成功之后,
则事件冒泡给外层事件.
-->
<div @click="addNum1">
<button @click="addNum2">冒泡自增</button>
//由于有嵌套所以会增加二,加了stop就会有增二变为增一
<button @click.stop="addNum2">阻止冒泡自增</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num: 1
},
//定义vue对象中的方法
methods: {
addNum1(){
this.num++
},
addNum2(){
this.num++
}
}
})
</script>
</body>
</html>
prevent阻止默认行为
就是在使用form表单进行提交的时候在点击事件中加prevent就不会跳转到form中的action指定的网站
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件访问修饰符</title>
</head>
<body>
<div id="app">
数值{{num}}
<!-- 1. stop 阻止事件冒泡
事件冒泡: 由于嵌套关系,先执行内部事件,如果执行成功之后,
则事件冒泡给外层事件.
-->
<div @click="addNum1">
</div>
<hr >
<!-- 2.阻止默认行为 -->
<!-- 2.1 案例说明: 编辑一个表单 2属性 username,password
要求实现ajax提交(伪代码)
2.2 需求: 要求用户只执行login的操作,而不执行action的动作
2.3 解决方案: prevent属性 阻止默认行为
2.4 同类型案例: a标签阻止href跳转
-->
//form中的action是同步请求 加上一个事件就变成了异步,
<form action="http://www.baidu.com">
<input name="username" type="text" />
<input name="password" type="password" />
<button type="submit" @click.prevent="login">提交</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num: 1
},
//定义vue对象中的方法
methods: {
login(){
alert("实现ajax数据提交")
}
}
})
</script>
</body>
</html>
按键修饰符
使用某个键触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键访问修饰符</title>
</head>
<body>
<div id="app">
<!-- 1.按键访问修饰符 回车触发
keyup: 键位弹起 常用的
keydown: 键位按下
keypress: 数字键盘
-->
回车触发: <input type="text" @keyup.enter="enter"/> <br>
空格按下触发: <input type="text" @keydown.space="enter"/><br>
<!-- 2.常用按键
.enter .tab .delete (捕获“删除”和“退格”键)
.esc .space .up .down .left .right
-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
//定义vue对象中的方法
methods: {
enter(){
alert("触发按钮")
}
}
})
</script>
</body>
</html>
问题: 就是将两个input输入框里面的数字进行动态的输入并将两个框的数字进行动态相加,并且使用回车键进行触发事件 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 需求: 要求用户输入2数字 要求做加法操作.
要求展现 总数: num1+num2
要求 :
1.输入第二个数字时回车触发.
2.指定一个"计算"的按钮
-->
<div id="app">
数值1: <input type="text" v-model="num1" /> <br>
数值2: <input type="text" v-model="num2" @keyup.enter="addNum"/>
<button @click="addNum">计算</button><br>
总数: <span v-text="count"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: '',
num2: '',
count: ''
},
methods: {
addNum(){
//将字符转化为数值类型
this.count = parseInt(this.num1) + parseInt(this.num2)
}
}
})
</script>
</body>
</html>
v-bind属性的绑定
就是将标签里的 属性与data里的属性进行绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<!-- 定义样式 -->
<style>
.redClass{
width: 200px;
height: 100px;
background-color: red;
/* 样式不会问百度!!! */
}
.blueClass{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 需求: 如果直接将地址写死在href标签中,扩展性差
需要实现属性的动态获取
标签: v-bind:属性="数据的key"
-->
<a href="http://www.baidu.com">百度</a>
<a v-bind:href="url">百度</a>
<!-- 简化写法 -->
<a :href="url">百度</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
url: 'http://www.jd.com',
flag: true,
myClass: "blueClass" //动态绑定样式类型可以直接绑定
},
methods: {
}
})
</script>
</body>
</html>
类型class(样式)绑定
就是通过选择器进行绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<!-- 定义样式 -->
<style>
.redClass{
width: 200px;
height: 100px;
background-color: red;
/* 样式不会问百度!!! */
}
.blueClass{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 类型绑定 一般的class用来修饰样式-->
<!-- 需求: 这个样式有时需要,有时不需要
动态的切换样式
:class="{类型名称 : boolean类型数据}"
true: 样式绑定正常
false:不绑定样式
-->
<div :class="{redClass: flag}"></div>
<button @click="flag = !flag">切换样式</button>
<div :class="myClass"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
url: 'http://www.jd.com',
flag: true,
myClass: "blueClass" //动态绑定样式类型可以直接绑定
},
methods: {
}
})
</script>
</body>
</html>
vue的总结
分支结构 v-if
就相当于java中的if条件语句
注意:含有else的就不能单独存在,就要和if配合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构</title>
<body>
<div id="app">
<!-- 1.什么时候使用分支结构
需求: >=90分 展现优秀
>=80分 良好
>=70分 中等
>=60分 及格
<60分 再接再厉,你是最棒的
语法:
1.v-if 如果满足条件则展现后续内容
2.v-else-if 除了if之外的其他的可能.
3.v-else 上述条件都不满足时 展现如下内容
要求: 要求成绩可以手动录入!!!
注意事项:
1.v-if 可以单独编辑
2.v-else/v-else-if 不可以单独使用必须与v-if联用
-->
<h1>考试成绩</h1>
录入成绩:<input type="text" v-model="score" />
<div v-if="score>=90">优秀</div>
//注意已定要将"优秀" ,"良好" , "中等" ,"及格"这几个字样写在div标签的中间 不然无论输入多少分数都只会显示"你是最棒的"
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=70">中等</div>
<div v-else-if="score>=60">及格</div>
<div v-else>你是最棒的</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 0
},
methods: {
}
})
</script>
</body>
</html>
循环语句v-for
就相当于java的for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
<body>
<div id="app">
<!-- 问题: 什么样的数据需要循环 1.数组 2.对象
语法: v-for 遍历展现的是标签
v-for="遍历后的元素 in 集合数据"
-->
<h1>遍历数组</h1>
<p v-for="item in hobby">{{item}}</p>
<p v-for="item in hobby" v-text="item"></p>
<hr />
<h1>遍历对象</h1>
//value 是data里的属性的值 , key是data里的属性 index就是data的值的下标
<!-- 方式1.如果直接遍历对象,则展现value的值 -->
<div v-for="item in user">{{item}}</div>
<!-- 方式2.如果直接遍历对象 arg1:value arg2:key -->
<div v-for="(value,key) in user">
<p>{{key}}---{{value}}</p>
</div>
<!-- 方式3.如果直接遍历对象 arg1:value arg2:key arg3:index-->
<div v-for="(value,key,index) in user">
<p>{{value}}---{{key}}----{{index}}</p>
</div>
<hr />
<h1>遍历集合</h1>
<!-- 约定: :key用来区分遍历的节点信息 -->
<div v-for="user in userList" :key="user.id">
<p>ID编号:{{user.id}}</p>
<p>名称:{{user.name}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobby: ['电脑','手机','平板'],
user: {
id: 100,
name: 'tomcat猫'
},
userList: [{id:100,name:"tomcat猫1"},
{id:200,name:"tomcat猫2"},
{id:300,name:"tomcat猫3"},
]
},
methods: {
}
})
</script>
</body>
</html>
v-for表单的提交
通过一下几种框进行提交
1.input文本输入框
2.textarea 文本域
3.select下拉框
4.radio 单选框
5.checkbox复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
<body>
<div id="app">
<!-- vue使用双向数据绑定的结构
案例: 1.input文本输入框
2.textarea 文本域
3.select下拉框
4.radio 单选框
5.checkbox复选框
-->
<form action="xxxxx">
<h1>表单数据提交-数据封装</h1>
姓名: <input type="text" v-model="user.username" /><br>
详情: <textarea v-model="user.info"></textarea><br>
<!-- 如果下拉框支持多选 multiple="true"-->
城市: <select name="city" v-model="user.city" multiple="true">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="成都">成都</option>
</select><br>
性别:
<input type="radio" value="男" name="gender" v-model="user.gender"/>男
<input type="radio" value="女" name="gender" v-model="user.gender"/>女
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
user: {
username: '',
info: '添加用户详情信息',
//如果数据单值采用字符串, 如果是多值 采用数组
city: ['北京','上海'],
gender: '女'
}
},
methods: {
}
})
</script>
</body>
</html>
案例 : 扩增倍数 , 长度
属性说明:
1.number 将用户输入变为数值类型
2.trim 去掉开头和结尾的空格
3.lazy 懒加载 当鼠标离焦时生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交2</title>
<body>
<div id="app">
<!-- 属性说明:
1.number 将用户输入变为数值类型
2.trim 去掉开头和结尾的空格
3.lazy 懒加载 当鼠标离焦时生效
-->
<input name="age" v-model.number="age"/>
<button @click="add">增加10</button><br>
<input name="name" v-model.trim="name"/>
获取name属性长度 {{name.length}}<br>
<input name="username" v-model.lazy="username"/>
观察响应现象{{username}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
age: '',
name: '',
username: ''
},
methods: {
add(){
this.age = 10 + this.age
}
}
})
</script>
</body>
</html>
计算属性
注意 : methods里只能写方法不能写其他的属性, 即就是在引入的只能是引入方法不能将方法 , 改为属性引入 ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
<body>
<div id="app">
<!-- 需求: 将数据字母进行反转 abc 反转之后 cba
方法: 将数据拆分为数组,将数组进行反转,再将数组合并为字符串
函数:
1.split 拆分
2.reverse 反转数据
3.join('') 将数组转化为字符串
-->
用户输入: <input v-model="msg"/><br>
数据展现: {{msg.split('').reverse().join('')}}<br>
<!--
计算属性用法:
将需要计算的操作通过特定的方法先行计算之后将结果进行展现
使用场景: 如果数据需要大量的计算 可以使用计算属性实现.
-->
计算属性: {{reverse}}
<hr />
<!-- 面试题: 计算属性与方法的区别
1.计算属性如果调用多次,则有缓存的机制 只计算一次.
2.方法调用没有缓存机制,所以调用多次,则计算多次.
如果一个计算重复调用时首选计算属性.
-->
<!-- 计算属性 -->
{{reverse}} {{reverse}}<br>
<!-- 将方法的计算结果,在该位置进行展现.所以需要return-->
{{reverseMe2()}}{{reverseMe2()}}{{reverseMe2()}}
<button @click="reverseMe">调用方法</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'abcdefg'
},
//定义计算属性
computed: {
//定义一个方法,要求必须有返回值!!
reverse(){
console.log("计算属性执行")
return this.msg.split('').reverse().join('')
}
},
methods: {
reverseMe(){
console.log("方法执行")
this.msg = this.msg.split('').reverse().join('')
},
reverseMe2(){
console.log("方法执行")
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
vue的生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<!-- 钩子函数:
整个VUE有一个完整的执行的过程.如果用户需要对vue的对象
进行额外的扩展时,可以采用预留的"接口"进行扩展.
我们把项目中提前设定好的"接口" 在JS中称之为钩子函数
-->
<!-- 总结:
1.钩子函数作用: 对原有的操作进行扩展 8个函数
2.初始化函数 4个, 修改函数2个,销毁函数2个
3.mounted() 函数标识VUE对象实例化成功.
4.生命周期函数是VUE对象独有的内容 注意写法,不要放到methods中
-->
<div id="app">
<h3 v-text="msg"></h3>
<button @click="destroy">销毁</button>
</div>
<!--引入js函数类库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el : "#app",
data : {
msg: "vue生命周期"
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate(){
console.log("beforeCreate")
},
//在实例创建完成后被立即调用
created(){
console.log("created")
},
//在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount(){
console.log("beforeMount")
},
//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
mounted(){
console.log("mounted")
},
//数据更新时调用，发生在虚拟 DOM 打补丁之前
beforeUpdate(){
console.log("beforeUpdate")
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
updated(){
console.log("updated")
},
//实例销毁之前调用。在这一步，实例仍然完全可用
beforeDestroy(){
console.log("beforeDestroy")
},
//实例销毁后调用。
destroyed(){
console.log("destroyed")
},
methods:{
destroy(){
this.$destroy()
}
}
})
</script>
</body>
</html>
VUE数组操作
** 文档位置**
数组方法的介绍
1.10.2 数组用法介绍
1.push() 在最后一个追加
2.pop() 删除最后一个
3.shift() 删除第一个元素
4.unshift() 在开头追加一个元素
5.splice() 在指定位置替换元素
6.sort() 数组排序 默认是按照字符编码的顺序进行排序
7.reverse() 数组反转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组用法</title>
</head>
<body>
<div id="app">
<span v-for="num in array"> {{num}}</span>
<hr />
<input type="text" name="num" v-model="num"/>
<button @click="add">添加</button>
<button @click="del">删除</button>
<button @click="shift">删除第一个</button>
<button @click="upshift">从第一个元素添加</button>
<button @click="splice">替换数据</button>
<button @click="sort">排序</button>
<button @click="reverse">反转</button>
</div>
<!--引入js函数类库 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
array: [4,2,3,1,5],
num: ''
},
methods:{
add(){
this.array.push(this.num)
},
del(){
this.array.pop()
},
shift(){
this.array.shift()
},
upshift(){
this.array.unshift(this.num)
},
splice(){
//参数说明: 1.操作数据起始位置 2. 操作数量 3.替换元素的值(如果不写表示删除)
//将第二位进行替换
//this.array.splice(1,1,this.num)
//删除第二位数据
this.array.splice(1,1)
},
sort(){
//数组从小到大
this.array.sort()
},
//数组反转
reverse(){
this.array.reverse()
}
}
})
</script>
</body>
</html>
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
