vue中个别技术总结
个人技术总结 —— vue中个别技术总结
| 这个作业属于哪个课程 | 2021春软件工程实践S班 (福州大学) |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | |
| 其他参考文献 |
个人技术总结 —— vue中个别技术总结
在自学vue的过程中，自己也对某些部分做了点笔记，记录了使用方式与心得，现将部分展示如下：
1.Vue当中的事件处理：
- 两句语法区别
<button @click="handleClick"></button> <!--事件可以接收到e参数-->
<button @click="handleClick($event)"></button><!--传递参数，可以让事件接受，也可以传递更多参数-->
<script>
var vm = new Vue({
el : "#app",
methods : {
handleClick : function(e){console.log(e)}
}
})
</script>
事件修饰符
-
prevent阻止默认行为
<form action = "/abc"> <input type="submit" @click.prevent="handleClick"/> </form>@click.prevent阻止默认行为代替了
@click = "handleClick"
handleClick : function(e){
e.preventDefult();
}
-
stop阻止向外冒泡
-
self只有自己进行某些事件才会响应
要求e.target = e.currentTarget才会执行
<div id="app"> <div @click.self="handleClick"> hello <div> click </div> </div> </div>加了self之后，click事件在点击click的div之后，冒泡出来的click不会被响应
-
once触发一次事件只会就会解绑
-
capture遵循事件绑定原则，不遵行事件冒泡原则
冒泡原则是从内往外
事件绑定时从外向内
<div id="app"> <div @click.capture = "handleClickOuter"> <div @click.capture = "handleClickInner"> hi </div> </div> </div> <script> var vm = new Vue({ el : "#app", methods:{ handleClickOuter : function(){ alert("1") }, handleClickInner : function(){ alert("2") } } }) </script>不加capture，alert的内容应该是2，1
加了capture，alert的内容应该是1，2
按键修饰符
-
@keydown.enter
当点击enter键才能响应事件
<div id="app"> <input @keydown.enter="handleKeyDown"/> </div> -
delete
-
esc
系统修饰符
-
@keydown.ctl
-
alt
-
shift
-
meta
<div> <input @keydown.ctl="handleKeyDown"/> </div>只有当按键按下并且一直按住ctrl键才能执行函数
鼠标按键修饰符
-
@click.right
-
left
-
middle
按下指定方向的鼠标才能响应的事件
2.Vue当中的表单绑定：
-
v-model表单与数据进行双向绑定
-
input 值
-
textarea 值
-
input type= "checkbox" true/false
-
input type="radio" value="男" 男
-
select
<select v-model=”value“> <option disabled>---请选择---</option> <option>A</option> <option>B</option> <!--输出结果为A或者B--> </select><select v-model=”value“> <option disabled>---请选择---</option> <option value="1">A</option> <option value="2">B</option> <!--输出结果为1或者2--> </select>
-
表单绑定修饰符
-
lazy
当表单失焦的时候再改变value
<input v-model.lazy="value" /> -
number
当表单内容填写时能被转化为number时，就转换为number
而不是存成字符串
-
trim
去掉首位空格后再处理数据
3.样式绑定：
- 借助一个class和一个对象进行绑定
<style>
.active : {
color : red
}
</style>
<div id="app">
<div @click = "handleDivClick"
:class = {active : isActived}
>
<!--绑定class属性，里面有一个active命名的类，与isActived数据进行绑定-->
hello
</div>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
isActived : false
},
methods:{
handleDivClick : function(){
this.isAcived = !this.isAcitved
}
}
})
</script>
- class与数组绑定，更改数组的内容改变class
<style>
.active{
color : red
}
</style>
<body>
<div id="app">
<div @click="handleClick"
:class = "[actived , activedOne]"
>
Hello
</div>
</div>
</body>
<script>
var vm = new Vue({
el : "#app",
data : {
actived : "",
activedOne : "actived-one"
},
methods : {
this.actived = this.actived==="active" ? "" : "active"
}
})
</script>
- 对style样式进行操作，一样的也是操作一个对象，或者操作一个数组
<div id="app">
<div :style = “styleObj”
@click = "handleClick"
>
<!--同样也可以进行数组操作:style="[styleObj]"-->
Hello
</div>
</div>
<script>
var vm = new Vue({
el : "app",
data : {
styleObj : {
color : black
}
},
methods : {
handleClick : function(){
this.styleObj.color = this.setyleObjColor === "black" ? "red":"black"
}
}
})
</script>
- 用class
- 绑定对象
- 绑定数组
- 用style
- 绑定对象
- 绑定数组
4.axios相关：
- 基本格式，如下以个人代码显示：
this.$axios({
method: 'post',
url: 'http://1.15.149.222:8080/coursewebsite/comment/add',
data: {
account: localStorage.getItem('account'),
topicId: this.topicID,
content: this.comment
}
}).then((response) =>{
console.log(response.data)
this.$refs.commentValue.value=''
this.getCommentInfo()
this.$router.go(0)
}).catch((error) => {
console.log(error) //请求失败返回的数据
})
- method：请求的类型
- url：请求的接口路径
- data：向后端传输的数据
- then：axios执行后的回调，response是回调后端传来的参数，存放所有数据
- catch：捕捉错误
遇到的问题
- 在编写代码的过程中碰到了大大小小各种各样的问题，也算是把该踩的坑都踩了个差不多。这里就列举一个虽然已经解决了但是任然不知道为什么的问题。
- 问题描述：我在写讨论答疑界面时，要求点击话题后会自动跳转到该话题的详情界面，并且要显示该话题和该话题的所有评论。由于页面跳转，我需要将此话题内容，以及其他信息传给跳转后的页面。由该页面保存后再向后端发送请求获取该话题下的讨论。如果我用一个对象存储传送的信息，那么在讨论详情页面刷新界面后，话题就会消失。当我把对象差分成单个数据依次传送后这个问题就解决了。什么原理至今还不知道。。。。。。代码如下：
data(){
return{
commentList:[],
newTitle:'',//将newTitle以及newContain从对象中脱离出来单独传输就不会出现问题
newContain:'',
type:'文章标题',
search:'',
pagesize: 5,
//当前页码
currentPage: 1,
//查询的页码
start: 1,
//默认数据总数
totalCount: 1,
//搜索条件
criteria: '',
}
总结
- 通过自学vue我深感做笔记的重要性。再出现问题的时候及时回头看看笔记，对解决问题很有帮助。在以后的学习中我将继续保持这个习惯，多做笔记。
