vue基础语法

一、绑定事件

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指令来实现单元素和数据的双向绑定

    
    {{username}}

2.v-model原理

绑定value,绑定input事件

    
    {{value}}

3.单选和多选的v-model

• 单选

  v-model绑定普通的一个值

  
      
  单选
      
  
          男
          女
          {{sex}}
      
      
  多选
  
  

• 多选

  • 普通多选

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

  • 单个多选

    v-model绑定布尔值

   
  
        运动
        唱歌
        跳舞 {{hobby}}
  ​
        多选中的单选
        {{isSelect?'选择了':'没有选择'}}
      
      

4.select的v-model

• 单选

  v-model绑定普通的一个值

  
      
          福州
          厦门
          南京
      
      {{selectData}}
  
  

• 多选

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

  
      
          福州
          厦门
          南京
      
      {{selectData}}
  
  

5.v-model的修饰符

• number:用户输入值转换成数值类型(输入的得是数字)

• lazy:输入框输入后要在光标离开或者是按下回车键的时候更新数据

• trim:过滤用输入首尾空格

      
      

​
      
      

​
      
      

​
      长度:{{value.length}}
      

       {{typeof value}}---{{value}}