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>

事件修饰符

  1. prevent阻止默认行为

    <form action = "/abc">

    <input type="submit" @click.prevent="handleClick"/>

    </form>

    @click.prevent阻止默认行为代替了

    @click = "handleClick"

    handleClick : function(e){

    e.preventDefult();

    }

  2. stop阻止向外冒泡

  3. self只有自己进行某些事件才会响应

    要求e.target = e.currentTarget才会执行

    <div >

    <div @click.self="handleClick">

    hello

    <div>

    click

    </div>

    </div>

    </div>

    加了self之后,click事件在点击click的div之后,冒泡出来的click不会被响应

  4. once触发一次事件只会就会解绑

  5. capture遵循事件绑定原则,不遵行事件冒泡原则

    冒泡原则是从内往外

    事件绑定时从外向内

    <div >

    <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

按键修饰符

  1. @keydown.enter

    当点击enter键才能响应事件

    <div >

    <input @keydown.enter="handleKeyDown"/>

    </div>

  2. delete

  3. esc

系统修饰符

  1. @keydown.ctl

  2. alt

  3. shift

  4. meta

    <div>

    <input @keydown.ctl="handleKeyDown"/>

    </div>

    只有当按键按下并且一直按住ctrl键才能执行函数

鼠标按键修饰符

  1. @click.right

  2. left

  3. 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>

表单绑定修饰符

  1. lazy

    当表单失焦的时候再改变value

    <input v-model.lazy="value" />

  2. number

    当表单内容填写时能被转化为number时,就转换为number

    而不是存成字符串

  3. trim

    去掉首位空格后再处理数据

3.样式绑定:


  1. 借助一个class和一个对象进行绑定

<style>

.active : {

color : red

}

</style>

<div >

<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>

  1. class与数组绑定,更改数组的内容改变class

<style>

.active{

color : red

}

</style>

<body>

<div >

<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>

  1. 对style样式进行操作,一样的也是操作一个对象,或者操作一个数组

<div >

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

以上是 vue中个别技术总结 的全部内容, 来源链接: utcz.com/z/379859.html

回到顶部