[JavaScript知识库] vue进阶复习笔记2

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue进阶复习笔记2 -> 正文阅读

[JavaScript知识库]vue进阶复习笔记2

作者:more-toolbox-new

一、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 }

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript