vue学习
文章平均质量分 82
vue小白学习路漫漫
·傻蛋儿·
前端小白学习中
展开
-
vue学习之路(九):组件——父组件向子组件传值props属性
vue组件——父组件向子组件传值问题:希望在子组件中调用父组件中的数据,但是默认情况下子组件不能访问父组件data中的数据和methods中的方法。解决方法:在父组件控制区域内通过标签的形式引入子组件,在引入子组件的同时将需要传递给子组件的数据以属性绑定v-bind的形式传递给子组件。在子组件的结构内部直接调用绑定的属性,该属性中的数据就是父组件传递给子组件的数据。子组件调用父组件传递的数据,需要先在子组件的props属性中定义绑定的属性。 <div id="app"&g原创 2021-11-25 08:47:37 · 667 阅读 · 0 评论 -
vue学习之路(八):组件——全局组件and局部组件的注册
vue组件组件基础知识:什么是组件组件是功能完整,具有复用性的独立模块,为什么需要组件化代码复用,提高开发效率,节省成本组件三要素:结构 :HTML样式 :CSS功能 :JS JQuery Vue全局组件:在实例化vue对象前注册的组件是全局组件注册之后可以用在任何新创建的 Vue 实例化对象中语法格式: Vue.component('组件名称',{ template:`组件内容`, data(){ re原创 2021-11-24 16:19:00 · 358 阅读 · 0 评论 -
vue学习之路(七):watch监听和computed计算属性
vue的watch监听watch监听:在vue中,使用watch来响应数据的变化。watch监听分为浅监听和深监听。**浅监听:**监听是简单的数据类型:数字,布尔值,字符串,普通数组语法格式: 设有两个参数,一个是新的数据,一个是旧的数据 watch:{ //写法1 被监听的变量名称:function ( newVal , oldVal ) { 执行的程序 }, //写法2 被监听的变量名称 ( newVal , oldVal ) { 执行的程序原创 2021-11-24 15:30:00 · 1664 阅读 · 0 评论 -
vue学习之路(六):自定义指令
vue自定义指令什么是自定义指令:在实际的开发过程中,vue内置指令并不能满足所有的需求,或者说想为元素附件一些特别的功能,这时候,就需要用到 Vue 提供的 自定义指令。自定义指令的钩子函数:bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调 (仅保证父节点存在,但不一定已被插入文档中)。update:组件更新时调用。componentUpdated:组件 和 子组件 全部更新后调用。unbind:只调用一次,指令原创 2021-11-24 10:15:15 · 468 阅读 · 0 评论 -
vue学习之路(五):事件处理&键盘事件
vue四种事件触发方式不定义事件函数,直接通过 v-on 处理事件(只能处理简单的事件) <div id="app"> <!-- 1. 不定义事件函数 --> <button @click="num++">按钮{{num}}</button> </div> <script> new Vue({ el:'#app', d原创 2021-11-22 21:05:02 · 579 阅读 · 0 评论 -
vue学习之路(四):v-model双向数据绑定
数据双向绑定简单理解为:当视图中的数据发生变化的时候,数据包中的数据也要发生改变;同理,数据包中的数据改变时,视图中的数据也要发生改变。下面通过两个简单的demo理解一下单向绑定和双向绑定:单向数据绑定 <div id="app"> <!-- 1. 单向绑定 --> <input type="text" v-bind:value="msg"> <h1>{{msg}}</h1> <原创 2021-11-22 21:45:00 · 396 阅读 · 0 评论 -
vue学习路(三):computed计算属性,字符串翻转+成绩筛选
vue-computed计算属性什么是计算属性?可以简单的理解能够在里面写一些计算逻辑的属性。特点:能够处理data数据,并返回处理后的数据结果,供页面直接使用。能够监测到data的变化,重新触发计算。data不变的情况下,第一次运算的结果可以多次重复使用,相当于被缓存起来。computed计算属性内可以非常灵活的处理数据。降低了代码冗余度(相比较不使用计算属性而言)。只看到这里还是有点懵,下面通过两个小demo可以更加深入的了解computed计算属性。demo1——字符串翻转&l原创 2021-11-20 16:13:22 · 1190 阅读 · 0 评论 -
vue学习路(二):v-for列表渲染
vue列表渲染只有核心部分的代码,大家别忘记导入外部vue.js文件哦,具体可以参照上一篇文章vue学习路(一):常用指令v-text,v-html,v-bind,v-if,v-on<div id="app"> <ul> <!-- item是数组中的每一个对象,index是组数的索引下标 --> <li v-for="(item,index) in stu"> 序号:{{in原创 2021-11-19 20:00:00 · 378 阅读 · 0 评论 -
vue学习路(一):常用指令v-text,v-html,v-bind,v-if,v-on
什么是vuevue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架。vue的优点体积更小:压缩后的vue.js的体积只有33k。运行效率更高:vue.js基于虚拟DOM操作,大幅度提高了DOM的操作渲染效率。双向数据绑定:开发者不需要再进行DOM操作,只需要操作数据包。生态丰富,学习成本低。vue的基本代码<!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-11-19 15:28:55 · 479 阅读 · 0 评论