vue进阶复习笔记2

最新推荐文章于 2022-10-25 13:10:05 发布

400警告

最新推荐文章于 2022-10-25 13:10:05 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/weixin_44952737/article/details/119878858

版权

一、v-model数据双向绑定

双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。

1.手动实现双向绑定

<input type="text" v-bind:value="user" v-on:input="user=$event.target.value">

2.v-model实现双向绑定

<input type="text" v-model="user">

v-model其实就是一个语法糖，这个背后就做了两个操作：

（1）.v-bind绑定一个value属性
（2）.v-on指令给当前元素绑定input事件

3.v-model双向绑定应用案例：

<body>
<div id="app">
    <h2>所有的爱好{{hobbies}}</h2>
  <!-- v-model 可以充当name和value -->
  <!--属性的值不能直接写mustache语法，需要v-bind:绑定-->
  <!--v-model实现双向绑定-->
  <label v-bind:title="index" v-for="(value,index) in hobbies">
    {{value}}:<input v-model="myhobbies" v-bind:value="value" v-bind:id="index" type="checkbox"><br>
  </label><br>
  已选爱好:{{myhobbies}}
</div>
<script src="js/vue.js"></script>
<script>
  const app=new Vue({
    el:"#app",
    data:{
      message:"hello VUE",
      hobbies:['写代码','学习','饥荒','抄笔记','调BUG','课前提问'],
      myhobbies:[]
    }
  })
</script>
</body>

二、v-model的修饰符

1.lazy修饰符

当添加.lazy修饰符之后，改变input框中的内容并不会使得name的内容发生变化，此时当输入框失去焦点后触发change事件.name的内容才发生改变

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

2.number修饰符

将输入的值转换为Number类型

{{typeof name}}
  <input type="text" v-model.number="name">

3.trim修饰符

过滤掉输入的首尾空格

<!-- .trim只去除两边的空格 不会去除中间的空格-->
  <input type="text" v-model.trim="message">

三、Vue的生命周期简述

/*全局的方法-生命周期的函数*/
    created(){
      /*初始化操作*/
      console.log("created创建实例")
    },
    mounted() {
      /*初始化list列表*/
      console.log("mounted创建完成")
    },
    updated(){
      console.log("updated数据发生改变")
    },
    destroyed(){
      console.log("destroyed实例销毁")
    }

四、组件

1.组件的描述

Vue中的组件技术类似于后端开发中常用的一些工具类或方法，如果一个方法或功能在多个地方要用到，我们就需要将其进行抽离出来，在Vue中，组件就是一种很好的复用一个功能的手段

2.注册组件

/*脚本区域:定义初始化组件*/
  const comm=Vue.extend({
    template:`<html>组件</html>`
  })
  /*注册组件
  * 参数1:给当前组件起一个标签名称
  * 参数2:注册组件的名称
  * */
  Vue.component("comm",comm);

注册组件分为全局组件和局部组件：

全局组件:在Vue中定义一个全局组件，意味着所有地方都可以使用

//注册组件--全局组件
  Vue.component("comm",comm);

局部组件:不同点是主键存在父子关系

const app=new Vue({
    el:"#app",
    /*在一个组件中注册另一个组件 叫局部组件*/
    components:{
      /*标签相当于("comm",comm)  */
      // comm:comm 语法糖默认就是将组件的名称当成标签名称
      comm //ES6增强写法
    }
  })

components:组件的意思，在组件中注册组件的时候使用

component:组件创建+注册的过程中使用，只能注册一个

3.父子组件的关系

在根组件中注册子组件，在子组件建中注册孙子组件，每个组件可以调用下一级组件，但是不能越级调用，也就是根组件可以调用儿子组件，但是不能直接调用孙子组件，要想调用孙子组件，需要先调用儿子组件，在儿子组件中调用孙子组件

案例：

<div id="app">
  <comm1>

  </comm1>

</div>
<script src="js/vue.js"></script>
<script>
  //孙子组件
  const comm2=Vue.extend({
    template:`<div>comm1的子组件</div>`
  })

  //子组件
  const comm1=Vue.extend({
    template:`<div>VUE的子组件 <comm2></comm2> </div>`,
    components:{
      comm2
    }
  })


//根组件
  const app=new Vue({
    el:"#app",
    components:{
      comm1
    }
  })


</script>

4.组件的语法糖

全局组件语法糖：

/*全局组件*/
/*const comm=Vue.extend(
//     template:`<div>组件</div>`
  )*/
/*全局组件-语法糖*/
Vue.component("comm",{
    template:`<div>组件</div>`
})

局部组件语法糖：

/*局部组件的语法糖*/
    const app=new Vue({
      el:"#app",
      components:{
          "comm2":{
            template:`<div>组件2</div>`
          }
      }
    })

5.组件的模板抽离

注册组件时将template中的内容抽离出来放入<template></template>中，一定要先加个div标签，给template设置Id，方便后面引用

<template id="comm-temp">
  <!--先给div-->
  <div>
    <font style="color: deepskyblue">VON</font>
  </div>
</template>


Vue.component("comm",{
    template:`#comm-temp`//template的ID
  })

6.组件的数据处理

data数据的三种写法：

(1).data:属性的方式，这种方式在没有组件是可以正常使用

(2).data(){return{}}ES6增强写法的方法形式，在组建的使用过程中，可能存在有多个地方都引用，如果使用data属性的方式会造成数据污染.为了避免这个问题，可以使用方法进行返回，方法的特性是每次调用都要重新初始化。

(3).data:function(){return{}}和ES6增强写法引用一样，只不过是ES6之前的写法

7.组件通讯之父传子

props属性：

子组件绑定一个属性用来获取父组件信息s_f_message绑定了之后为了能够生效一定在子组件中定义,因为是组件标签，所以默认会认为是父组件传递过来的信息，所以必须用props接收

案例：

<div id="app">
  <son v-bind:s_f_message="f_message"></son>
</div>
<template id="son">
  <div>
      我是子组件,{{s_f_message}}
  </div>
</template>
<script src="js/vue.js"></script>
<script>
/*根组件*/
  const app=new Vue({
    el:"#app",
    data(){
      return{
        f_message:"我是父组件传来的消息"
      }
    },
    components:{
      'son':{
        template:`#son`,
        /*props是专门获取父组件专递的信息的*/
        props:{
          /*只需定义并声明类型即可*/
          s_f_message:String
        }
      }
    }
  })

8.props数据类型

父传子的重要属性是props属性，它有两种形式，一是数组的形式，一是对象的形式。

props属性有三个重要的参数 type 、required和default；这些是可以传入的属性的类型props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }

400警告

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue进阶复习笔记2

一、v-model数据双向绑定双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。1.手动实现双向绑定<input type="text" v-bind:value="user" v-on:input="user=$event.target.value">2.v-model实现双向绑定<input type="text" v-model="
复制链接

扫一扫