![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3前端青铜到黄金王者
vue3前端青铜到黄金王者,一枚资深程序媛。
vue1,vue2, react一路开发过来的。一起加入学习小右的框架吧。
丸子丸子丸子酱
来自底层的小前端
展开
-
vue3前端青铜到黄金王者 - 第16个入门创建可重用组件
小知识,大挑战!本文正在参与「程序员必备小知识」创作活动本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。丸子之前写了一篇 vue3前端青铜到黄金王者 - 第七个入门v组件开发 , 这是在一个html文件内定义的组件,在当前页面中使用。这种做法适合创建一些匿名或者私密组件,如果我们想要重用组件,应该怎么做呢?创建可重用组件之前丸子创建了一个hello01项目(如下图目录和文件展示)我们发现src/components里面有个HelloWorld.vue。我们原创 2021-10-24 19:39:37 · 255 阅读 · 0 评论 -
vue3前端青铜到黄金王者 #15 vue-cli-service lint使用【补充】
前篇我们解析了一下Vue3项目构成,也学习了build和serve命令。这次我们看看lint命令。vue-cli-service是什么?在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。简单理解就是一个构建(build)编译vue项目的工具,还提供了服务页面原创 2021-10-22 06:00:00 · 7023 阅读 · 0 评论 -
vue3前端青铜到黄金王者 #14 vue-cli-service (下)serve使用
前篇我们解析了一下Vue3项目的构成,修改了一下组件的代码。效果如下, 我们也在package.json看到vue-cli-service, 这个到底是啥?我们一起看看。vue-cli-service是什么?在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。原创 2021-10-20 23:25:39 · 2719 阅读 · 1 评论 -
vue3前端青铜到黄金王者 #13 vue-cli-service是啥(上)
这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战前篇我们解析了一下Vue3项目的构成,修改了一下组件的代码。效果如下, 我们也在package.json看到vue-cli-service, 这个到底是啥?我们一起看看。vue-cli-service是什么?在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、原创 2021-10-19 00:07:09 · 1642 阅读 · 1 评论 -
vue3前端青铜到黄金王者 #12 项目结构解析
前篇我们建立一个vue3项目,大概展示了一下。其实可以修改,我们再深度看看。v 项目结构是什么?vue cli架起vue项目如下:./README.md./yarn.lock./public./public/favicon.ico./public/index.html./babel.config.js./package.json./src./src/App.vue./src/main.js./src/components./src/components/HelloWorld原创 2021-08-27 23:31:12 · 249 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第11个入门Cli4创建Vue3项目
前篇写了很多vue的内容,都说单个页面的。这篇我们建立一个vue3项目。其实可以修改的我们再看看。v cli是什么?vue cli是用来架起vue项目的工具。cli2到cli3变化很大,cli3和cli4没什么区别,所有直接说cli2和cli4的区别。区别较大的地方有:npm安装命令的改变生成的目录结构不同 cli4目录更精简cli4可以在npm命令的时候自行选择是否生成vue-router、vue-x、typescript、scss,不用自己手动安装了cli4中要进行webpack配原创 2021-08-25 23:52:06 · 207 阅读 · 1 评论 -
vue3前端青铜到黄金王者 - 第10个入门computed使用set和get
前篇写了computed属性,但是我们发现不能修改computed属性的值。其实可以修改的我们再看看。v computed是什么?计算属性, 一个变量的值根据其他变量(一个或者多个)的变化,自动反映,算出新的结果。我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。好,复习前面的。我们这里改造成get 和set方法。代码如下:<!DOCTYPE html><html l原创 2021-08-24 23:19:43 · 2059 阅读 · 7 评论 -
vue3前端青铜到黄金王者 - 第9个入门computed使用
v computed是什么?计算属性, 一个变量的值根据其他变量(一个或者多个)的变化,自动反映,算出新的结果。我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行当我们计算一个属性并且显示它的时候, 最简单的做法就是用computed。代码如下:<!DOCTYPE html><html lang="en"原创 2021-08-24 22:49:58 · 132 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第8个入门v watch使用
什么是Watchwatch 是 Vue.js 最强大的功能之一。当关注的某个变量的值变化时,watch监听到并且执行,注册监听该变量的函数(比如更根据变化执行一些数据,消息更新等)我们直接敲代码吧:<!DOCTYPE html><html lang="en"><head> <title>vue3青铜到黄金-丸子酱-vue-0n</title> <meta charset="UTF-8"> &原创 2021-08-24 22:48:25 · 146 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第七个入门v组件开发
什么是组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。也就是说,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展的原生 HTML 元素。下面自定义一个wanzi-comp 组件。我们之间看组件代码吧:<body> <div id="wzApp"> <!-- 组件的使用 --> <wanz原创 2021-08-22 23:34:25 · 94 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第六个入门v-model双向数据绑定!
今天学习v-model 展示一下我们的奥运获奖项目。它解决的问题把一个响应式对象绑定展示到html标签,也就是数据绑定显示/更新。比如我们有个状态更加用户数据重复更新。显示v-model来显示内容用法v-model 绑定了一个响应式对象,并把结果展示出来。<input v-model="account" type="text">代码展示<!DOCTYPE html><html lang="en"><head> <title原创 2021-08-09 23:28:53 · 269 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第五个入门v-for循环为奥运加油!
今天学习v-for, 展示一下我们的奥运获奖项目。它解决的问题根据内容集合重复渲染展示html标签,也就是遍历迭代。用法v-for 用户重复输出模版内容,并在每次迭代替换模版为当前迭代的对象(比如当前对象,和下标等)稍微跟v-bind对比,该指令用于设置HTML属性:v-bind:href 缩写为 :href<li v-for="(item,index) of projects"> {{item}} - {{index}} </li>代码展示<!DOC原创 2021-08-08 22:22:47 · 142 阅读 · 1 评论 -
vue3前端青铜到黄金王者 - 第四个入门v-if和v-show指令监听事件
d原创 2021-08-07 22:09:50 · 407 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第三个入门v-on指令监听事件
今天学习v-on。它解决的问题给HTML标签的绑定事件。用法v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click<a @click=“get()”>aa稍微跟v-bind对比,该指令用于设置HTML属性:v-bind:href 缩写为 :href<a :href="{{url}}">aa</a>代码展示<!DOCTYPE html><html lang="en"><head>原创 2021-08-06 09:15:13 · 117 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第二个入门v-bind
今天学习v-bind。它解决的问题给HTML标签的属性赋值用法给已知属性赋值,属性值通过js动态获取。<!DOCTYPE html><html lang="en"><head> <title>vue3青铜到黄金</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-08-05 22:43:01 · 115 阅读 · 0 评论 -
vue3前端青铜到黄金王者 - 第一个入门v-text
本文主要介绍了Vue3的 v-text指令简单使用方法.结合实例形式分析了v-text & v-html指令文本输出显示简单操作技巧,需要的朋友可以参考下原创 2021-08-03 01:11:42 · 436 阅读 · 0 评论