随笔分类 - VUE
从0开始学VUE
摘要：阶段案例 案例效果 新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <h1>需求:
阅读全文
摘要：父子组件的访问方式 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件 父组件访问子组件:使用$children或者$refs 子组件访问父组件:使用$parent 子组件访问根组件:使用$root 父组件访问子组件[$children] <!DOCTYPE html>
阅读全文
摘要：父子组件的通信 为什么需要通信 在开发中往往一些数据确实需要下面的子组件进行展示 比如在一个页面中,我们从服务器请求了很多的数据,其中一部分数据并不是页面的大组件来展示的,而是需要下面的子组件进行展示,这个时候肯定不会让子组件再次调用网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)
阅读全文
摘要：组件数据的存放 组件无法直接访问页面的对象数据 组件对象也有自己的data属性(也可以有Methods方法) 只是这个data属性必须是一个函数 而且这个函数返回一个对象,对象内部保存着数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
阅读全文
摘要：组件分离写法 使用Script标签分离组件代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script>
阅读全文
摘要：语法糖优化组件注册 /** * 直接使用对象,省略掉使用Vue.extend */ Vue.component('my-cpn',{ // 在ES6中可以使用 `` 标识字符串 并且可以换行不需要拼接 template: ` <div> <h2>this is cpn</h2> <span>this
阅读全文
摘要：父组件与子组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body>
阅读全文
摘要：局部组件是通过components属性注册的,只能在当前注册的实例范围内调用 注册局部组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../.
阅读全文
摘要：全局组件是通过Vue.component在Vue实例声明之前注册的,可以在全局任意地方调用,只要是属于Vue接管的界面 注册全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
阅读全文
摘要：注册组件的步骤 组件的使用分为三个步骤 创建组件构造器 注册组件 使用组件 作者：彼岸舞 时间：2021\06\02 内容关于：VUE 本文属于作者原创,未经允许,禁止转发
阅读全文
摘要：Vue组件化思想 组件化是Vue.js中的重要思想 它提供了一种抽象,让我们可以出一个个独立可复用的小组件来构造我们的应用 任何的应用都会被抽象成一颗组件树 组件化思想的应用 有了组件化思想,我们在开发中就可以运用了 尽可能的将页面拆分成一个个小的,可复用的组件 这样让我们的代码更加方便组织和管理,
阅读全文
摘要：v-model <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body>
阅读全文
摘要：阶段案例 案例效果 新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </
阅读全文
摘要：循环遍历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body> <di
阅读全文
摘要：条件判断 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></script> </head> <body> <di
阅读全文
摘要：事件监听 v-on指令(缩写"@") 简单点击事件案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../../js/vue.js"></scr
阅读全文
摘要：计算属性 setter与getter 使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl
阅读全文
摘要：绑定属性 v-bind指令(缩写":") 绑定属性(src) 用于动态绑定属性值,比如src动态绑定地址,新建v-bind.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
阅读全文
摘要：插值操作 {{}}语法 新建InsertValue.html,使用双大括号可以获取data中的值,可以写一些简单的表达式,比如加减乘除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插入值</title>
阅读全文
摘要：Vue的生命周期 什么是生命周期?其实就是一个东西从诞生到死亡的一个过程,对于Vue来说就是从创建到销毁的一个过程就称之为Vue的生命周期 以上图片就是官网中对于Vue的整个生命周期的过程了 其实生命周期的存在就是,为了在Vue执行到一定阶段的时候,我们需要做一些事情,就比如在人的一生的生命周期中,
阅读全文
