目录

导读

1.Vue实例

1.1创建Vue实例

 根标签el

初始数据data

定义方法methods 

 计算属性computed

状态监听watch

过滤器filters

2 数据绑定

v-model

v-text

v-html

v-bind

v-on

 v-for

 v-if和v-show

3.组件 

3.1了解组件

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

全局注册

局部注册组件

3.3组件之间数据传递

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

4.1钩子函数


导读

本章着重在:

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

1.Vue实例

1.1创建Vue实例

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

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

        选项中可以添加的内容:

                选项                                          说明
dataVue实例数据对象
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 实例的所有指令都被解绑,

所有的事件监听器被移除,所有的子实例也都被销毁。

Logo

前往低代码交流专区

更多推荐