测试生财的博客_前端

Vue自学之路11-属性绑定

Vue属性绑定属性绑定指的是Vue中属性绑定到变量，实现MVVMVue属性绑定语法v-bind语法<a v-bind:href='url'></a>缩写方式<a :href='url'></a>原生JS操作属性的方法（DOM操作）getAttribute：获取html标签的属性setAttribute：设置html标签的属性属性绑定的例子<di

vue

属性绑定

原创 2021-04-18 09:17:33 553 阅读 1点赞

Vue自学之路10-简单的计算器

如何使用Vue实现一个简单计算器功能分析计算A和B的加和，显示到最终计算结果一栏。思路两个input输入框，分别使用v-model绑定a和b计算按钮绑定事件，实现计算逻辑将结果绑定到对应位置例子<div id='app'> <form> <div> <!--敲击delete键，调用handleContent，

vue

计算器

例子

原创 2021-04-17 08:56:51 1107 阅读 1点赞

Vue自学之路9-vue模版语法（事件修饰符&按键修饰符)

Vue中的事件修饰符1) .stop 阻止冒泡 <input type='button' @click.stop='handle1()'/>VUE方式阻止冒泡</input> 2) .prevent 阻止默认行为 <a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:cli

vue

事件修饰符

按键修饰符

原创精选 2021-04-16 07:43:39 1403 阅读 1点赞

Vue自学之路8-vue模版语法（事件绑定)

事件绑定一个复杂的前端应用，离不开用户交互，而用户交互离不开事件绑定。Vue中事件绑定语法//1. v-on指令语法：<input type='button' v-on:click='num++' />//2. 简写方式(常用）：<input type='button' @click='num++' />事件函数的调用方式//1. 直接绑定函数名称：<button v

vue

事件绑定

原创 2021-04-15 08:41:11 523 阅读 1点赞

VUE自学之路7-vue模版语法（双向数据绑定)

MVVM含义：数据变化影响视图，视图变化反过来又影响数据。 M（model）：即data中的数据变量V（view）：即所写的模块（dom元素）VM（view-model）：实现model和view的控制逻辑实现过程：DOM listeners：监听View的变化，及时告知给Model。Data Bindings：绑定Model到View，模型变化后View及时做变化。v-model实现数据绑定&

vue

MVVM

原创 2021-04-13 08:02:36 581 阅读 1点赞

Vue自学之路6-vue模版语法（数据响应式)

什么是响应式html5中响应式：屏幕尺寸变化导致样式的变化。数据的响应式（数据变化导致页面内容的变化）什么是数据绑定：　　数据绑定：将数据填充到HTML标签中，html的视图和数据相互作用，相互影响。v-once：只编译一次，可以理解HTML中标签变为只读（数据变化不会在影响视图变化）。<div id='app'> 　　<!-- 显示的信息后续不需要修改，可以直接声明v-once

vue

数据绑定

原创 2021-04-12 07:55:11 414 阅读 1点赞

Vue自学之路5-vue模版语法（v-text,v-html,v-pre)

前言前一篇讲了v-cloak指令，今天来进行v-text,v-html,v-pre这三个指令的学习数据绑定指令v-text:用于填充纯文本　　比插值表达式更加简洁，不存在闪动问题。v-html：用于填充html片段　　存在网络安全问题，容易遭到XSS工具，不应该使用在用户提交的内容上。　　网站内部数据可以使用，第三方数据不可以用v-pre：用于填充原始信息　　显示原始信息，跳过编译过程例子<

vue

v-html

v-text

v-pre

原创 2021-04-08 07:32:33 486 阅读 1点赞

Vue自学之路4-vue模版语法（v-clock)

Vue模板Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并

vue

模板

v-cloak

原创 2021-04-06 09:21:17 811 阅读

Vue自学之路3-vue模版初探

前端渲染前端渲染就是把数据填充到HTML标签中过程：模版+数据->前端渲染->HTML静态内容前端渲染方式1. 原生js拼接字符串方式：数据以字符串的方式拼接到HTML标签。缺点：不规范，代码不清晰，维护麻烦2. 前端模版引擎方式：基于art-template，代码更加规范，标准化优点：可读性提高，方便后期维护缺点：没有专门的事件机制，需要和js结合3. 使用vue特有的模板语法插值表

vue

模板

原创 2021-04-02 06:27:19 599 阅读

Vue自学之路2-vue初探

初探用vue实现一个“hello，world”例子1）原生JS的写法:DOM操作的方式<div id='msg'></div> <script> var msg = "hello ,world" var div = document.getElementById('msg'); div.innerHTML = msg; </script>2

vue

原创 2021-04-01 08:24:53 514 阅读

Vue自学之路1-vue概述

Vue概述简介vue是国产框架，作者尤雨溪，2014年2月份发布。官网：https://cn.vuejs.org/v2/guide/其中在2015发布了vue1.0，2016发布了vue2.0，目前最新版本为vue3。传统的JQuery和Bootstrap基本都是国外诞生的。vue1.0到vue2.0，语法发生了较大变化。Vue的设计初衷Vue 只关注视图层，采用自底向上增量开发的设计。Vue

vue

原创 2021-03-31 07:44:10 579 阅读

js循环遍历数组的方式

前言最近在写前端代码，里面经常涉及到数组的循环取值。这里简单总结下前端中数组遍历的四种方式：数组下标循环for in 循环for of 循环foreach循环例子假设有如下数组：members，每个数组元素是一个字典/map,要遍历数组打印每个memberID的值。var members =[{"memberID" : 1 },{"memberID" : 2 },{"memberID" : 3 }

js

数组

遍历

原创精选 2020-12-16 09:02:24 3430 阅读

vue父组件调用子组件中的属性和方法

接上篇，vue的父组件向子组件获取值，如果父组件需要主动调用子组件中的属性方法该如何实现？获取方法1、父组件中使用子组件的时候在给子组件定义一个ref属性2、父组件可以通过this.$refs.XXX，来操作子组件中的属性和方法子组件Sub1.vue<template> <module :title="title" /> <button :cli

vue

父子组件

传值

前端

原创精选 2020-11-13 08:20:38 2357 阅读

vue父组件向子组件传值

简介vue中组件与组件的关系存在两类：父子组件与非父子组件。如下图所示，三个组件中就包含了父子组件与非父子组件两种情况，这里组件之间的交互主要由值传递和事件触发调用两种方式，这里先分享下父组件向子组件值传递。方式父组件可以向子组件传递的值有三种类型属性变量或者纯文本函数名父组件自身实例（this）例子假设有两个组件App.vue和Sub1.vue，其中App.vue为父组件，Sub1.vue为子组

vue

父子组件

prop

传值

原创精选 2020-11-12 08:52:42 2160 阅读

vue入门：属性绑定与事件绑定

简介vue中的html元素的属性和事件是支持通过变量方式动态修改，和原始js的dom操作有一些区别。这里总结一下vue的属性绑定与事件绑定的方法，以及与原生js的对比。属性绑定属性绑定指的是将html元素的一个属性值设置成变量。原生的html中，比如<input type="text" />，这里的type的值就是text。在vue中，我们可以把text设置成一个变量:input_ty

vue

js

动态绑定

html

原创精选 2020-11-06 08:12:25 3441 阅读

vue踩坑:axios使用this指针

前言在vue中，请求后端接口的模块有三种：vue-resourceaxiosfetch这我们使用axios去请求后端接口。安装进入vue项目的目录，执行：npminstallaxios--save使用axios支持的http请求方法如下axios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(u

vue

js

axios

ajax

this

原创精选 2020-11-05 07:59:57 1497 阅读

npm run serve失败：重新生成node_modules/.bin

背景最近在开发一个前端项目，这个项目是从老的git工程拷贝过来的，在执行npm run serve的时候，报错说找不到vue-cli-service命令，但是原来的那个项目这么操作是没有问题的。报错：code: 'MODULE_NOT_FOUND', xxx/node_modules/.bin/vue-cli-service出问题了。node_modules/.bin的作用执行npm run，可以

vue

npm

node

node_modules

linux

原创 2020-10-12 08:14:59 3192 阅读 2评论

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

测试生财的博客