零基础学习Vue
文章平均质量分 81
零基础学习Vue
区块链(Web3)开发工程师
全栈工程师、区块链开发工程师、智能合约开发工程、Web3.0工程师
精通Wallet、Token、NFT、Exchange、DEFI、DAPP(web3开发)、智能合约、Gamefi、元宇宙开发。
大家有任何需要,欢迎私信或评论联系我!
展开
-
【Vue】countUp.js 实现数字滚动 动态效果
【Vue】countUp.js 实现数字滚动 动态效果Installation$ npm install --save countup.js vue-countup-v2Usage原创 2019-04-10 11:46:45 · 6051 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第26课 Vue中标签元素节点的获取$refs方法:
ref=“定义标签获取名”this.$refs.标签名 //获取对应的标签元素this.$refs //获取所有定义好的标签首先我们使用代码来简单的获取一个标签:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...原创 2019-07-01 10:30:44 · 1272 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第25课 Vue子组件slot插槽让子组件自定义样式:
slot插槽的作用:slot 可以让组件更加灵活 slot插槽 默认是没有名字的 可以给slot加上name属性 slot也可以设置默认值 一个槽可以被插入多个内容 ,多个内容可以全都放在template中,只要给template命名name即可slot插槽的使用如下:<!DOCTYPE html><html lang="en"><head&...原创 2019-07-01 10:25:58 · 1770 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第24课 Vue子组件触发父主件方法并传递参数:子组件$emit发射事件
实现代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$emit发射事件</title> <!-- 引入vue --> <script src="https://cdn.j...转载 2019-07-01 10:21:39 · 527 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第23课 Vue 单向数据流父组件的属性值子组件如何更改:
单向数据流原理:子组件不能直接修改父组件中传递的数据如需间接改变父组件传递的数据 (解决方法:可以在子组件data选项中存储父组件传递的数据之后修改子组件中的数据 即可)以下是实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-07-01 10:17:01 · 231 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第22课 Vue子组件接收父主件传递的值:
数组接收值方法:(数组表示对变量不做校验)props:['a'] //a为子主件标签内传递值的名称对象接收值方法:(对象表示对变量做校验)props:{ a:{ //校验变量a type:String, //设置传递属性的类型 required:true, //true代表该属性为必传属性没有则会报错 defaul...原创 2019-07-01 10:01:19 · 167 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第21课 Vue父子组件生命周期函数的执行顺序:
首先我们来看看生命周期函数执行顺序:我们来看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue组件</title> <!-- 引入vue --> <script ...原创 2019-07-01 09:50:05 · 215 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第20课 Vue定义子组件template的常见3种写法:
第一种写法: template:`<div><p>我是子组件3</p></div>`第二种写法:<template id="one1"> <div> <p>我是子组件1</p> </div></template>第三种写法:...原创 2019-06-29 17:36:27 · 720 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第19课 Vue实现动态便签功能支持本地存储小案例
实现后的效果图:以下是全部实现代码注解很详细哦!如有疑惑可以评论留言:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>便签</title> <!-- 引入 bootstrap (bootstr...原创 2019-06-29 17:10:13 · 563 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第18课 Vue实现京东商城购物车小案例:
实现后的效果图:以下是全部实现代码注解很详细哦!如有疑惑可以评论留言:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</title> <!-- 引入 bootstrap (bootst...原创 2019-06-29 17:01:32 · 1117 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第17课 Vue的v-bind指令使用与设置及改变标签样式
v-bind指令 给标签绑定vue中定义的属性 :v-bind 缩写 ":"通过缩写 " : "给标签绑定class属性名称:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &l...转载 2019-06-29 16:58:45 · 252 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第16课 Vue的v-for遍历生成标签指令:
遍历数组:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vu...原创 2019-06-29 16:55:17 · 732 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第15课 Watch 如何监听对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-29 16:47:45 · 155 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第14课 Watch 如何侦听数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...转载 2019-06-29 16:42:19 · 198 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第13课 Watch侦听属性、计算属性缓存computed、方法methods的区别
计算属性缓存computed:当页面内需要显示computed内的属性时,则其中某一计算属性的值变化,其他属性不会重新执行计算,只执行改变属性的方法,因为计算属性存在缓存。方法methods:当页面内需要使用methods内的方法时,则其中某一个方法内的属性变化,则其他方法都需要执行,计算出新的结果,因为方法内不存在缓存。侦听属性watch:监控data中属性的变化...转载 2019-06-29 16:34:42 · 162 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第12课 Vue计算属性computed与methods环境的区别
computed环境内:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/...原创 2019-06-29 16:14:57 · 240 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第11课 Vue的各种keyup键盘点击事件:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-28 18:34:16 · 1065 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第10课 Vue中v-model指令 的input单选框、复选框、下拉框、文本框:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-28 18:33:07 · 372 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第9课 Vue的 v-model指令,设置input表单输入的方法:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-28 18:29:30 · 250 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第8课 Vue的v-on点击事件阻止冒泡等:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-28 18:26:39 · 236 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第7课 Vue指令v-if、v-else-if、v-else 的使用:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-06-28 18:23:37 · 229 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第6课 Vue的v-if与v-show的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&g...原创 2019-05-06 18:54:13 · 166 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第5课 Vue动态属性变化关系
给Vue内对象直接设置属性:vm.obj.long = '180';用$set设置属性:vm.$set(vm.obj,'sex','男');检测以上两者的区别:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Do...原创 2019-05-06 11:30:48 · 253 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第4课 vue的模板语法v-once﹑v-html
v-once 指令:使用 v-once 指令,当数据改变时,插值处的内容不会更新。使用方式:<div v-once> </div>使用v-once与没有v-once的对比:<body> <!-- 获取的元素 --> <div id="app"> <!-- 没有使用v-once -->...原创 2019-05-06 11:11:05 · 192 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第3课 vue的基本使用
vue的基本操作:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> 给标签定义vue </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue...原创 2019-05-06 10:58:22 · 229 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第2课 安装vue脚手架
第一步:首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口输入 :node -v 与 npm -v 查看有无,没有则需要安装以下证明已安装若没安装 以下是博友安装方法:https://blog.csdn.net/qq_33362864/article/details/80431162第二步:全局安装vue-cli: 在命令行窗口 ...原创 2019-05-06 10:53:39 · 274 阅读 · 0 评论 -
【Vue】零基础学习Vue: 第1课 Windows下Node.js与npm的安装与配置
1:先下载Node.js,网站https://nodejs.org/en/,左侧为稳定版,右侧为最新版,推荐稳定版2:Node.js安装,运行下载后的.msi文件,一路下一步就可以了,我选择的安装路径为E:\Program Files\nodejs,安装之后运行cmd,执行node -v 和 npm -v命令如执行结果为上图所示出现版本号,说明安装成功,若出现不是内部命令的错误,则...原创 2019-05-06 10:55:25 · 262 阅读 · 0 评论