Vue期末复习（一）—Vue开发基础

目录导读1.Vue实例1.1创建Vue实例根标签el初始数据data定义方法methods计算属性computed状态监听watch过滤器filters1.2 数据绑定v-modelv-textv-htmlv-bindv-onv-forv-if和v-show导读本章着重在：Vue实例的创建和数据绑定Vue的事件监听操作Vue组件的注册和组件之间的数据传递的方法Vue生命周期钩子函数的使用1....

北半球的彼得兔

4355人浏览 · 2021-12-13 09:00:00

北半球的彼得兔 · 2021-12-13 09:00:00 发布

3.2 两种组件注册类型：全局注册和局部注册

导读

本章着重在：

Vue实例的创建和数据绑定
Vue的事件监听操作
Vue组件的注册和组件之间的数据传递的方法
Vue生命周期钩子函数的使用

1.Vue实例

1.1创建Vue实例

Vue实例：通过new关键字实例化Vue({})构造函数

<script>
  var vm = new Vue({
    // 选项
  })
<script>

选项中可以添加的内容：

选项	说明
data	Vue实例数据对象
methods	定义Vue实例中的方法
components	定义子组件
computed	计算属性
filters	过滤器
el	唯一根元素
watch	监听数据变化

根标签el

说明：

在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

用法：

<!-- 定义唯一根元素div -->
<div id="app">{{name}}</div>  //唯一根元素<div>通过id值与Vue中的el选项绑定
<script>
var vm = new Vue({
  el: '#app', // 通过el与div元素绑定
  data: {name: 'Vue实例创建成功！'}
})
<script>

初始数据data

说明：

Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。

用法：

<!-- 定义唯一根元素div -->
<div id="app"><p>{{name}}</p></div>
<script>
var vm = new Vue({
  el: '#app', // 通过el与div元素绑定
  data: {name: '定义初始数据'}
})
console.log(vm.$data.name)
console.log(vm.name)
</script>

console.log(vm._data.name)
console.log(vm.$data.name===vm.name)
console.log(vm.$data.name===vm._data.name)

定义方法methods

说明：

methods属性用来定义方法，通过Vue实例可以直接访问这些方法

在定义的方法中，this指向Vue实例本身

定义在methods属性中的方法可以作为页面中的事件处理方法使用

当事件触发后，执行相应的事件处理方法

用法：

var vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  },
  methods: {
     // 定义事件处理方法showInfo
    showInfo ：function() {
      this.msg = '触发单击事件'
    }
 }
})

计算属性computed

说明：

计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

用法：

<div id="app">
  <p>总价格：{{totalPrice}}</p>
  <p>单价：{{price}}</p>
  <p>数量：{{num}}</p>
  <div>
    <button @click="num == 0 ? 0 : num--">减少数量</button>
    <button @click="num++">增加数量</button>
  </div>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {price: 20, num: 0},
  computed: {
    // 总价格totalPrice
    totalPrice () {
       return this.price * this.num
    }
  }
})

</script>

状态监听watch

说明：

事件处理方法是根据用户所需自行定义的，通过单击事件、键盘事件等条件触发，但不能自动监听当前Vue对象的状态变化。 watch状态监听功能，监听当前Vue实例中的数据变化，就会调用当前数据所绑定的事件处理方法。

用法：

<div id="app">
  <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
  <input type="text" v-model="cityName">
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    cityName: ‘shanghai’
  }, 
  watch: {
    cityName (newName, oldName) {
      console.log(newName, oldName)
    }
  }

})
</script>

监听过程：

过滤器filters

说明：

在前端页面开发中，通过数据绑定可以将data数据绑定到页面中，页面中的数据经过逻辑层处理后展示最终的结果。数据的变化除了在Vue逻辑层进行操作外，还可以通过过滤器来实现。即在页面中直接操作数据，返回最终结果。

用法：

<div id="app">
  <div>{{message | toUpcase}}</div>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'helloworld'
  },
  filters: {
    // 将 helloworld 转换为 HELLOWORLD
    toUpcase (value) {
      return value ? value.toUpperCase() : ''
    }
  }

})
</script>

2 数据绑定

两种样式绑定方法：绑定内联样式、绑定样式类

<div id="app">
  <!-- 绑定样式属性值 -->
  <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
         <!-- 绑定样式对象 -->
         <div v-bind:style=“myDiv”></div>
  </div>
</div>
<script>
var vm=new Vue({
  el:'#app',
  data: {
    myDiv:  {
      backgroundColor: 'red', 
      width: '100px',
      height: '100px‘
   }
     pink:'pink',
     width:'100%', 
     height: '200px'
}
})
</script>

内置指令：

路径	说明
v-model	双向数据绑定（语法糖）
v-on/@	监听事件
v-bind/:	单向数据绑定
v-text	插入文本内容
v-html	插入包含HTML的内容
v-for	列表渲染
v-if	条件渲染
v-show	显示隐藏

v-model

v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

用法：

<div id="app">
  <input type="text"  v-model="msg">
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'v-model指令'
  }
})
</script>

v-text

v-text是在DOM元素内部插入文本内容

用法：

<div id="app">
  <p v-text="msg"></p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: '我是v-text '
  }
})
</script>

v-html

v-html是在DOM元素内部插入HTML标签内容

用法：

<div id="app">
  <div v-html="msg"></div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '<h2>我是v-html</h2>' 
    }
  })
</script>

v-bind

v-bind可以实现单向数据绑定

用法：

<div id="app">
  <input v-bind:value="msg">
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: '我是v-bind '
  }
})
</script>

v-on

v-on是事件监听指令，直接与事件类型配合使用

用法：

<div id="app">
  <p>{{msg}}</p>
  <button v-on:click="showInfo">请单击</button>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: '请单击按钮查看内容'
  },
  methods: {
    showInfo () {
      this.msg = '我是v-on指令'
    }
  }

})
</script>

→→→→

v-for

v-for可以实现页面列表渲染，常用来循环数组

用法：

<div id="app">
  <div v-for="(item,key) in list" data-id="key">
    索引是：{{key}}，元素内容是：{{item}}
  </div>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      list: [1, 2, 3]
    }
  })
</script>

v-if和v-show

v-if用来控制元素显示或隐藏，属性为布尔值。 v-show可以实现与v-if同样的效果

用法：

<div id="app">
  <div v-if="isShow" style="background-color:#ccc;">我是v-if</div>
  <button @click="isShow=!isShow">显示/隐藏  </button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      isShow: true
    }
  })
</script>

3.组件

3.1了解组件

人面对复杂问题的处理方式：

将一个复杂的问题，拆分成很多个可以处理的小问题。

组件化思想：

将一个逻辑复杂的页面拆分成一个个小的功能块，每个功能块完成独立的功能，整个页面的管理和维护就变得容易。

每个组件都用于实现页面的一个功能块。每一个组件又可以进行细分。

组件：在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。

组件必须先注册，再使用

3.2 两种组件注册类型：全局注册和局部注册

全局注册

Vue.component()方法实现全局注册组件。

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>
Vue.component('my-component', {
  data () {
     return {
        count: 0  //表示组件中的数据，必须是一个函数，并返回初始数据，每个实例可以维护一份被返回对象的独立的拷贝

  }},
  template: '<button v-on:click="count++">被单击{{count}}次</button>'
})
var vm = new Vue({ el: '#app' })

//Vue.component()表示注册组件的API，参数my-component为组件名称，该名称与页面中的<my-component>标签名对应。
组件名还可以用驼峰法，如在注册组件时，将参数修改为：myComponent

局部注册组件

局部组件：注册的组件是挂载在某个实例中的

注册局部组件：通过Vue实例的components属性来实现

<div id="app">
  <my-component></my-component>
</div> 
<script>
  var com1 = {
    template: '<p>我是vm实例中的局部组件</p>'
  }
  var vm = new Vue({
    el: '#app',
    // 注册局部组件
    components: { 
         myComponent: com1 
    }
  })
</script>

3.3组件之间数据传递

上层传递到下层：

一个页面会从服务器请求到很多的数据，可能需要多个子组件进行展示。

不会让子组件发送网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

props传值：

props即道具，用来接收父组件中定义的数据，其值为数组，从上到下的实现单向数据流传递。

<div id="app">
  <my-parent name="title"></my-parent>
</div>
<script>
Vue.component('my-parent',{
  props: ['name'],
  template: '<div>我是父组件{{name}}<div>'
})
var vm = new Vue({
  el: '#app'
})
</script>

4.组件的生命周期钩子函数

4.1钩子函数

钩子	说明
beforeCreate	创建实例对象之前执行：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	创建实例对象之后执行：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
beforeMount	页面挂载成功之前执行：在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted	页面挂载成功之后执行：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate	组件更新之前执行：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated	组件更新之后执行：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
beforeDestroy	实例销毁之前执行：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	实例销毁之后执行：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^