VUE
文章平均质量分 71
以基础为主
zhishuiyu
这个作者很懒,什么都没留下…
展开
-
7. Vue的生命周期
一、实例生命周期实例生命周期如图所示:二、生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。钩子函数说明beforeCreate创建实例对象之前执行created创建实例对象之后执行beforeMount页面挂载成功之前执行mounted页面挂载原创 2021-02-04 12:55:11 · 429 阅读 · 0 评论 -
6. Vue组件(基础)
一、组件基本概念Vue可以进行组件化开发,组件是Vue的基本结构单元。 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。组件主要以页面结构的形式存在,不同组件也具有基本交互功能,根据业务逻辑实现复杂的项目功能。组件只有注册后才能使用二、组件注册2.1 全局注册组件全局注册组件:Vue.component(id[,definition])<div id="app"> <my-component></my-component>原创 2021-02-04 08:55:45 · 809 阅读 · 0 评论 -
5. Vue事件
一、事件监听可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript 代码或绑定事件处理方法。1.1 在触发事件时执行JavaScript代码<div id="app"> <button v-on:click="count=count+1">单击按钮</button> <p>上述按钮被单击{{count}}次</p></div><script src="https://cdn.jsdeli原创 2021-02-03 15:39:20 · 320 阅读 · 0 评论 -
4. Vue数据绑定
一、绑定样式Vue提供了样式绑定功能,可以通过绑定内联样式和绑定样式类这两种方式来实现。1.1 绑定内联样式在Vue实例中定义的初始数据data,可以通过v-bind将样式数据绑定给DOM元素。<div id="app"> <div v-bind:style="{backgroundColor:pink,width:width,height:height}"> <div v-bind:style="myDiv"></div>原创 2021-02-03 09:44:31 · 392 阅读 · 0 评论 -
3. Vue实例简介
创建Vue实例每个Vue应用都是通过Vue构造器创建新的Vue实例开始。var vm=new Vue({ //选项});原创 2021-02-02 10:03:29 · 1531 阅读 · 0 评论 -
2. 第1个Vue页面
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">{{msg}}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s原创 2021-01-29 10:30:39 · 118 阅读 · 0 评论 -
1.Vue基础知识
虚拟DOM技术Vue通过虚拟DOM技术来减少对DOM的直接操作支持单向或双向数据绑定MVVM模式Vue的数据驱动是通过MVVM模式实现的,MVVM主要包含三部分:Model(数据部分,主要负责业务数据)、View(视图部分,即DOM元素,负责视图处理)和ViewModel(是连接视图与数据的数据模型,负责监听Model或View的修改)。工作原理如下:在MVVM中,数据(Model)和视图(View)是不能直接通信的,视图模型(ViewModel)就相当于一个观察者,监控着双方原创 2021-01-29 08:31:22 · 292 阅读 · 0 评论