vue基础语法

用户10216580

发布于 2022-12-06 13:48:38

4070

发布于 2022-12-06 13:48:38

文章被收录于专栏：一叶知秋一叶知秋

一、绑定事件

1.使用

v-on绑定

格式

v-on:事件类型 = "函数名"

简写

@事件类型 = "函数名"

2.参数问题

没有参数,省略小扩号

绑定函数默认有一个事件对象,写$event当参数

3.事件修饰符

(1)阻止事件冒泡:

@事件类型.stop
事件中调用event.stopPropagation()

(2)阻止默认事件：

@事件类型.prevent
事件中调用event.preventDefault()

(3).once 一次性事件

只做一次的事件

(4).enter 回车事件（vue -- 按键修饰符 - 不会代码的前端 - 博客园）

二、条件判断

vue条件指令可以根据表达式结果来渲染或者销毁组件

1.v-if,v-else-if,v-else

v-if后面表达式为true的时候,对应元素或者组件渲染,否则不渲染

2.v-show

后面表达式或者是值是否是true

区别

v-if:隐藏就是销毁标签,适合做一次的显示隐藏

v-show:隐藏是用display:none,适合于频繁切换

三、遍历循环

1.v-for遍历

格式:

<标签 v-for="(item,index) in 数组">

item:当前遍历值

index:遍历的下标

2.key属性

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

key原则上是不能一样的

不建议index,接口数据返回,每一条数据都有一个id

3.数据更新检测

数组的更新需要使用vue提供的方法

push():末尾插入
pop():末尾删除
shift():前面删除
unshift():后面删除
splice(index,length):删除选中内容
sort()排序
- 升序数组.sort(function(a,b){ return a-b })
- 降序
- 数组.sort(function(a,b){ return b-a })
reverse():反转
this.$set(要修改的对象,索引值,修改后的值)

四、表单绑定

1.v-model

vue中使用v-model指令来实现单元素和数据的双向绑定

<div id="app">
    <input type="text" v-model="username">
    {{username}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            username:'默认'
        }
    })
</script>

2.v-model原理

绑定value,绑定input事件

<div id="app">
    <input type="text" :value="value"  @input="getValue($event)">
    {{value}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            value:'默认值'
        },
        methods: {
            getValue(e){
                console.log(e.target.value)
                this.value = e.target.value
            }
        },
    })
</script>

3.单选和多选的v-model

单选 v-model绑定普通的一个值

<div id="app">
    <h1>单选</h1>
    <form action="">
        <span>男</span><input type="radio" v-model="sex" value="man">
        <span>女</span><input type="radio" v-model="sex" value="woman">
        {{sex}}
    </form>
    <h1>多选</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            sex:'man'//默认
        }
    })
</script>

多选
- 普通多选 v-model绑定普通的一个数组
- 单个多选 v-model绑定布尔值

<div id="app">
      <input type="checkbox" value="01" v-model="hobby" />运动
      <input type="checkbox" value="02" v-model="hobby" />唱歌
      <input type="checkbox" value="03" v-model="hobby" />跳舞 {{hobby}}

      多选中的单选
      <input type="checkbox" v-model="isSelect">{{isSelect?'选择了':'没有选择'}}
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          hobby: [],
          isSelect:false
        },
      });
    </script>

4.select的v-model

单选 v-model绑定普通的一个值

<div id="app">
    <select name="" id="" v-model="selectData" >
        <option value="1">福州</option>
        <option value="2">厦门</option>
        <option value="3">南京</option>
    </select>
    {{selectData}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            selectData:1
        }
    })
</script>

多选 v-model绑定普通的一个数组

<div id="app">
    <select name="" id="" v-model="selectData" multiple>
        <option value="1">福州</option>
        <option value="2">厦门</option>
        <option value="3">南京</option>
    </select>
    {{selectData}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            selectData:[]
        }
    })
</script>

5.v-model的修饰符

number:用户输入值转换成数值类型(输入的得是数字)
lazy:输入框输入后要在光标离开或者是按下回车键的时候更新数据
trim:过滤用输入首尾空格

<div id="app">
      <input type="text" v-model.number="value" />
      <br />

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

      <input type="text" v-model.trim="value" />
      <br />

      长度:{{value.length}}
      <br>
       {{typeof value}}---{{value}}
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          value: 1,
        },
      });
    </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-12，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js