·傻蛋儿·-CSDN博客

原创 vue学习之路（九）：组件——父组件向子组件传值props属性

vue组件——父组件向子组件传值问题：希望在子组件中调用父组件中的数据，但是默认情况下子组件不能访问父组件data中的数据和methods中的方法。解决方法：在父组件控制区域内通过标签的形式引入子组件，在引入子组件的同时将需要传递给子组件的数据以属性绑定v-bind的形式传递给子组件。在子组件的结构内部直接调用绑定的属性，该属性中的数据就是父组件传递给子组件的数据。子组件调用父组件传递的数据，需要先在子组件的props属性中定义绑定的属性。 <div id="app"&g

2021-11-25 08:47:37 669

原创 vue学习之路（八）：组件——全局组件and局部组件的注册

vue组件组件基础知识：什么是组件组件是功能完整，具有复用性的独立模块，为什么需要组件化代码复用，提高开发效率，节省成本组件三要素：结构：HTML样式：CSS功能：JS JQuery Vue全局组件：在实例化vue对象前注册的组件是全局组件注册之后可以用在任何新创建的 Vue 实例化对象中语法格式： Vue.component('组件名称',{ template：`组件内容`, data(){ re

2021-11-24 16:19:00 359

原创 vue学习之路（七）：watch监听和computed计算属性

vue的watch监听watch监听：在vue中，使用watch来响应数据的变化。watch监听分为浅监听和深监听。**浅监听：**监听是简单的数据类型：数字，布尔值，字符串，普通数组语法格式：设有两个参数，一个是新的数据，一个是旧的数据 watch:{ //写法1 被监听的变量名称:function ( newVal , oldVal ) { 执行的程序 }, //写法2 被监听的变量名称 ( newVal , oldVal ) { 执行的程序

2021-11-24 15:30:00 1671

原创 vue学习之路（六）：自定义指令

vue自定义指令什么是自定义指令：在实际的开发过程中，vue内置指令并不能满足所有的需求，或者说想为元素附件一些特别的功能，这时候，就需要用到 Vue 提供的自定义指令。自定义指令的钩子函数：bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调 (仅保证父节点存在，但不一定已被插入文档中)。update：组件更新时调用。componentUpdated：组件和子组件全部更新后调用。unbind：只调用一次，指令

2021-11-24 10:15:15 470

原创 vue练习demo（2）——键盘事件：信息发送

在vue学习之路（五）：事件处理&键盘事件这篇文章中对触发事件的四种方式和键盘事件有了初步的了解，并完成了简易的消息发送demo，并留了一个小任务：对消息发送demo进行升级。先回顾一下升级demo的要求：通过select选择框，选择发送消息的方式第一个option：按下enter键发送消息第二个option：Ctrl+enter发送消息主要思路：使用select选择框提供发送方式，每个发送方式给定一个编号value，使用v-if判断选择的发送方式，显示对应的input输入框

2021-11-23 12:41:47 332

原创 vue学习之路（四）：v-model双向数据绑定

数据双向绑定简单理解为：当视图中的数据发生变化的时候，数据包中的数据也要发生改变；同理，数据包中的数据改变时，视图中的数据也要发生改变。下面通过两个简单的demo理解一下单向绑定和双向绑定：单向数据绑定 <div id="app">  <input type="text" v-bind:value="msg"> <h1>{{msg}}</h1> <

2021-11-22 21:45:00 396

原创 vue学习之路（五）：事件处理&键盘事件

vue四种事件触发方式不定义事件函数，直接通过 v-on 处理事件（只能处理简单的事件） <div id="app">  <button @click="num++">按钮{{num}}</button> </div> <script> new Vue({ el:'#app', d

2021-11-22 21:05:02 581

原创 vue练习demo（1）——使用vue基本指令实现切换菜单栏效果

这篇文章最后的小demo大家解决了吗？我来更新代码了哦！实现效果的方式有很多种，我这只是其中一种方法，如果大家有什么不同的意见可以相互讨论。需要实现的效果：菜单栏+与菜单相对应的内容区域点击菜单栏的时候添加样式点击不同的菜单，显示对应的内容区域核心代码如下：<style> li{ list-style: none; display: inline-block; padding: 10px 30px; margin: 0

2021-11-22 17:08:25 920

原创 vue学习路(三)：computed计算属性，字符串翻转+成绩筛选

vue-computed计算属性什么是计算属性？可以简单的理解能够在里面写一些计算逻辑的属性。特点：能够处理data数据，并返回处理后的数据结果，供页面直接使用。能够监测到data的变化，重新触发计算。data不变的情况下，第一次运算的结果可以多次重复使用，相当于被缓存起来。computed计算属性内可以非常灵活的处理数据。降低了代码冗余度(相比较不使用计算属性而言)。只看到这里还是有点懵，下面通过两个小demo可以更加深入的了解computed计算属性。demo1——字符串翻转&l

2021-11-20 16:13:22 1197

原创 vue学习路(二)：v-for列表渲染

vue列表渲染只有核心部分的代码，大家别忘记导入外部vue.js文件哦，具体可以参照上一篇文章vue学习路(一)：常用指令v-text，v-html，v-bind，v-if，v-on<div id="app"> <ul>  <li v-for="(item,index) in stu"> 序号：{{in

2021-11-19 20:00:00 380

原创 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 482

qq_44860114的博客