首页 > 其他分享> > vue中个别技术总结

vue中个别技术总结

2021-06-28 18:00:07 作者：互联网

个人技术总结 —— 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我深感做笔记的重要性。再出现问题的时候及时回头看看笔记，对解决问题很有帮助。在以后的学习中我将继续保持这个习惯，多做笔记。

标签：总结,function,vue,绑定,Vue,个别,修饰符,data,click
来源： https://www.cnblogs.com/luluCoding/p/14945629.html