随笔分类 - Vue
摘要：子组件访问父组件的对象，使用场景，较少，因为子组件访问父组件，会存在耦合度较高，不建议这么做。这里只做了解。 1 <!-- 2 @author:invoker 3 @project:project 4 @file: 18 组件通信 子访问父 parent root.html 5 @contact:i
阅读全文
摘要：背景:之前讲的父子组件之间的通信都是指传值，数据的传递。还有另一种方式叫做调用，即父组件直接调用子组件的对象，属性和方式，也是可以的。具体应用场景后面写项目时再来补充。 父组件访问子组件对象，需要用到关键字 $children 和 $refs 一、$children（开发中使用的较少） 需求：在父组
阅读全文
摘要：前置：父组件有data.num1,子组件通过props定义了cnum1来接收data.num1的值 需求：在子组件内定义个输入框,希望输入数据时能够改变父组件的data.num1的值。 思路：v-model双向绑定 1.通过v-model将子组件的输入框与props.cnum1双向绑定 代码如下：
阅读全文
摘要：场景：用户进入首页，点击分类导航栏获取分类数据信息。 逻辑原理是：一般所有的网络请求是通过最外层的父组件发送给服务器，而用户对系统的操作都是对子组件的操作。比如用户点击分类导航栏（分类导航栏是子组件）获得指定分类中的数据，用户就需要子组件将请求数据（分类：手机数码）发送给父组件。由父组件请求服务器获
阅读全文
摘要：子组件变量名称为驼峰标识时，在html中子组件中子组件的变量与父组件的变量绑定关系时，子组件标签中的变量需要使用横杆，比如子组件变量为childMessage，那么在html中子组件绑定父组件的标签就应该写成child-message。具体代码如下： 1 <!DOCTYPE html> 2 <htm
阅读全文
摘要：前面阐述了平级访问，即父组件的view层访问父组件的data层，直接通过插值显示即可简单访问。但是实际开发的场景如下： 1.结构：开发场景中一个主页面是一个父组件，内部很很多子组件，子组件内部又有子组件2.网络请求：一个页面的数据一般是由父组件请求网络数据后，再向下传递给子组件3.父子组件之间的通信
阅读全文
摘要：一、同级访问 父组件的components下即可以存放子组件的template，有可以存放子组件的数据和方法。子组件的结构和Vue实例结构是相似的。 另外，子组件的view层可以直接方位子组件的data，父组件的view层可以直接访问父组件的data 来个例子，同级访问： 1 <!-- 2 @aut
阅读全文
摘要：template中写html标签非常麻烦，如果标签复杂就更难于维护。因此需要将template内的标签抽离出来。 方式一：抽离到script中 1.全局组件的template抽离，将template的html标签模板写到script中，script的type属性为"text/x-template"，
阅读全文
摘要：之前创建组件的代码略显繁琐，可以简化，使用到语法糖。 1.未使用语法糖创建全局组件 1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 01-vue组件的基本使用.html 5 @contact:invoker2021@126.co
阅读全文
摘要：父组件和子组件，如何理解，当成一种组件关系理解。 对于全局组件而言，似乎没有父组件。 但是对于局部组件而言，每一个局部组件都是对应Vue实例的子组件。 第九行在root根上只需要使用父组件即可，子组件也会被渲染出来 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he
阅读全文
摘要：组件化开发是程序代码的分类复用，使用抽象的思想,将相同的页面模块抽象成一个组件，以便在不同页面复用，不同项目复用。 一、全局组件 解释下，全局组件就是构建的组件所有vue实例都可以用， vue组件创建的基本方法如下： 1.创建组件构造器 ： const cpn =Vue.extend({ templ
阅读全文
摘要：一、v-model双向绑定初体验 前面学习的都是插入式展示后台数据，即后台提供什么数据，页面就如何展示。 现在学习一个新技能，v-model双向绑定。即做了双向绑定的数据，前台页面可以轻松改变后台数据。 v-model="message" 写法很简单。详见代码： 1 <!-- 2 @author:i
阅读全文
摘要：代码如下： 1 <!-- 2 @author:invoker 3 @project:project_lianxi 4 @file: 05-购物车.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/1 15:25 8 @ve
阅读全文
摘要：需求：实现一个功能，点击的记录呈现一个颜色。 代码如下： <!-- @author:invoker @project:project_lianxi @file: 05-作业.html @contact:invoker2021@126.com @descript: @Date:2021/7/1 15:
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04 数组方法是响应式的</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div> 10 <b
阅读全文
摘要：v-for用于循环遍历 一、遍历数组 界面有个ul和li的标签，需要在页面循环遍历动态展示多个li标签。 使用item表示数组中每一个元素，index表示索引值，索引值从0开始 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
阅读全文
摘要：一、v-if判断指令的基本使用 v-if v-else v-else-if 可以在标签中使用这些指令，vue会根据其值判断标签是否在界面渲染。同样也可以使用计算属性，无需在标签上写过多的逻辑判断 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met
阅读全文
摘要：v-on是事件监听指令，用于监听标签的一些列操作，如点击操作，如果坚挺到有点击操作，可以执行对应的内部方法。 一、事件监听基本使用代码如下, 1.做事件监听时，如果没有参数，在html中调用方法时，可以不使用括号() 2.事件监听的写法1是v-on:click="methodName" 3.事件监听
阅读全文
摘要：Vue对象中的一个选项，计算属性, computed 该属性和一般方法的区别在于，计算属性是属性，html中各个地方调用计算属性中的方法都是调用存储在内存中计算属性的方法。方法是方法，html中各个地方调用方法中的方法，则需要重新调用方法的次数。 知识点1：以下代码中 getFullname()是方
阅读全文
摘要：v-bind:style用途：动态绑定一些CSS内联样式。 demo1（对象语法）: 1.写CSS属性名方式1，如fone-size，要以驼峰方式写：fontSize 2.样式的值如果非引用，则需要使用单引号 3.样式的值如果是从其他处导入，则需要使用变量来存储 代码如下： 1 <!-- 2 @au
阅读全文
浙公网安备 33010602011771号