vue中一些基本语法

189 阅读5分钟

在vue中所有的组件都继承自vue的原型

v-on修饰符的使用

  1. @click.stop: stop修饰符用于阻止点击事件的向上冒泡
  2. @click.prevent: 阻止事件的默认行为
  3. @keyup.enter: 监听键盘的抬起(按下为keydown),enter可以改为其他键
  4. @.native: 监听自定义组件的根事件,如click或者keyup等
  5. @click.once: 让事件只能触发一次

一个vue实例中的各种属性

computed(计算属性):

在多次调用时,computed内的函数是有缓存的,而method中的函数则是没有缓存的
该属性中的函数起名时一般不起动词,而是直接名词,如totalprice等

data:

methods:

数组

数组的响应式方法

  1. shift() :删除数组的第一个元素
  2. unshift() :从数组头开始增加元素,可以一次增添多个
  3. reverse() :反转数组
  4. sort() :排列数组元素
  5. push() :从第一个元素开始增加
  6. pop() :弹出第一个元素,返回第一个元素
  7. splice() :删除/替换/增加元素

数组的循环遍历

<div v-for="(item,index) in list" :key="index">{{item.name}}</div>

数组的filter()

1.filter 在调用filter时,其接收的参数为一个回调函数,该回调函数则必须返回一个boolean值。

 返回true时:将该数据添加到新数组  
 返回false时: 将该数据过滤不添加到新数组
 使用方式:
 let newList=list.filter(function(n){
   return n>100
 })

数组的map方法

1.map方法会对数组的每个元素进行遍历

 使用方法:
   let newList=list.map(function(n){
     return n*2
   })

数组的reduce方法

reduce()方法用于对数组中的所有内容进行汇总(求和)
reduce()方法的参数:
  let total=numList().reduce(function(pre,n){
    return pre+n
  },0)
在该函数中有两个参数,第一个参数是函数,第二个参数则是pre初始值,然后在进行一次计算后将
值传给pre进行下一次计算

按钮根据表达式被禁用

<button :disable="aa<=1"></button>

vue中v-model绑定变量

v-model大致可以看成是v-value(:value="{{numvalue}}")与某个响应式函数如@input的合集, 可以通过该函数改变value绑定的值。

1. v-model绑定radio

```
<input v-model="sex" type="radio" id="meal"/>
<input v-model="sex" type="radio" id="femeal">
```
 以上两个input都绑定了同一个变量sex,并且此时只能对一个进行选择。

2. checkbox单选框

<input type="checkbox" v-model="isAgree">点击同意
<button :disable="!isAgree">下一步</button>

3. checkbox复选框

    <input type="checkbox" v-model="balls" value=""篮球">篮球
    <input type="checkbox" v-model="balls" value="排球">排球
    <input type="checkbox" v-model="balls" value=""羽毛球">羽毛球
     data:{
      balls:[]
     }
     
     复选框的经典用法:
     
     <label v-for="(item,index) in balls" :for="item">
       <input type="checkbox"  value="item" id="index" v-model="loveBalls"/>
     </label>
     <--循环展示列表,并按照元素展示复选框-->
     
     data:{
       balls:['游泳','乒乓球','篮球','羽毛球'],
       loveBalls:[]
     }
     

在以上代码中,选择了多个复选框的话,vue会自动将复选框的内容加入到ball中。

4. v-model结合select标签使用(下拉列表)

<select v-model="fruit">
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="凤梨">凤梨</option>
</select>
  data:{
    fruit:'香蕉'
  }

此时我们fruit会随着用户的选择而发生改变,select标签可以添加multiple以达成选择多个的目的

5. v-model.lazy

<input v-model.lazy="userName" type="text">

使用了该属性后,会在input/textarea等绑定了该属性的组件失去焦点后才进行数据的交换

6. v-model.number

  <input v-model.number="userAge" type="text"> 
   
   使用了该属性后,会在input/textarea等绑定了该属性的组件输入的值转换为数字,需要注意的是,如果不
   声明该属性,v-model中绑定的变量都会默认转换为字符串

7. v-model.trim

 <input v-model.trim="userLastName" type="text">
 使用了该属性后,会自动进行过滤空格

组件

1.局部组件与全局组件

   使用脚手架搭建的一般都是注册为局部组件,在vue示例的component方法中注册。

2.组件内的数据必须以函数形式返回

   data(){
     return{
     aa:"asdas"  
     }
   }
   若不以函数形式返回,则在复用组件时会使得多个实例共享一个作用域,导致数据出错,使用函数形式则
   会在每次显示的时候,都重新开辟一块内存来存取数据,避免共享。

3.父子组件间传值

53f24a7619859ee91e26802f9dc7d7d.png

     props支持的类型:    
         String  Symbol  Boolean  Number Date Function  Array  Object
 props是一种单向数据流,即父组件可以改变子组件的值,而子组件无法改变父组件的值。
 当prop为数组或者对象时,其默认值需要一个函数进行传递。
    在官方文档中,要求声明props时尽可能的详细,如:
    props:{
      status:{
        type:String,
        require:true,  //必传
        default:"aaa"
      }
      numList:{
        type:Array,
        require:false;//不一定要传
        default(){
          return []
        }
      }
      propc:[number,array] , //该属性可能有多种
    }
 父组件向子组件传值:
    <comp :status="{{haveSend}}"></comp>
 
 子组件向父组件传值:
   子组件:
   <button @click="sendtofather"></button>
   
   methods:{
     sendtofather(){
     //emit中有两个参数
     //第一个是父组件调用子组件时所监听的属性
     //第二个则是要传递给父组件的值
       this.$emit('listenchild','a message from child')
     }
   }
   
   父组件:
   <div>
    <child @listenchild="getMessage"></child>
   </div>
   
    methods:{
     getMessage(data){
       console.log(data)
     }
   }

4. 父组件通过$refs或者$children访问子组件

父组件中调用子组件:
  <comp ref="aaaa"></comp>
  <button @click="getRef"></button>
  
  method:{
    getRef(){
      console.log(this.$refs.aaaa.name)
      //name为子组件中的属性
    }
  }

5. 子组件通过$root访问vue实例

子组件方法:
  methods:{
    btnclick(){
    //message为vue实例中定义的变量
     console.log(this.$root.message)
    }
  }

插槽(slot)

插槽的基本使用

组件comp模板:
 <div>
   <h1></h1>
   <h2></h2>
   <slot></slot>
   <slot name="first"></slot>
   <slot name="second"></slot>
 </div>
 使用组件:
 //在组件的使用过程中,会将h1 h2标签替换到slot标签中
 <comp>
 <h1 slot="first"></h1>  //只会替换name为first的插槽
 <h2></h2>
 </comp>

作用域插槽

子组件如何将数据通过插槽传送到父组件:
  在子组件模板中:
    <templete>
      <div>
        <slot :data="numList">
         <div v-for="itme in numList">{{item}}</div>
        </slot>  //将数据绑定在插槽中,这样可以获得子组件的数据
      </div>
    </templete>
    
    在父组件调用该子组件时:
       //需要重新写一个模板 在vue2.5以前
       //当父组件需要重新排列子组件中所需要展示的数据时,就使用该方法来获取子组件中的数据并重新展示
    <templete slot-scope="slot">
      <div v-for="item in slot.data.numList">{{item}}</div>
    </templete>

vue中自定义全局变量

在main.js中定义,而这可以被所有组件使用,也证明在vue中所有的组件都继承自vue的原型
Vue.prototype.test="aaa"