vue零基础开篇

最新推荐文章于 2022-03-09 10:07:04 发布
最新推荐文章于 2022-03-09 10:07:04 发布
阅读量101 收藏
点赞数
分类专栏： 测试开发 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/afangxin/article/details/115054453
版权
测试开发 专栏收录该内容
20 篇文章 1 订阅 ¥79.90 ¥99.00
订阅专栏
本文作为Vue.js的开篇，介绍了Vue的基本概念，包括它在国内的火热程度、与React的对比，以及作为前端框架的主要特点。作者为尤雨溪，曾是Google工程师。文章还提到了Vue的渐进式特性，丰富的生态系统，如DevTools、vue-cli等工具，以及vue-router、vuex等核心插件。最后简要提及了MVVM模式。
摘要由CSDN通过智能技术生成

一、vue零基础开篇

我们今天就开始进入0基础的vue学习

二、基本概念

  1. vue.js是目前国内最火的前端框架，国外的还是React最流程，vue语法也是可以用于进行手机app的开发的，需要借助于Weex
  2. vue.js是前端的主流框架之一，和Angular.js、React.js一起，并称为前端三大主流框架
  3. vue.js是一套构建用户界面的框架，只关注视图层、他不仅易于上手，还便于与第三方库或已有项目整合
  4. 英文网站：c网站：https://vuejs.org；中文网站：https://cn.vuejs.org

三、介绍

  1. 作者尤雨溪，华裔，前Google工程师
  2. vue.js是一个渐进式的框架，动态构建用户界面
  3. 特点：

四、生态

  1. vue.js：专注UI层面
  2. 工具：DevTools、vue-clic.vue脚手架、vue-loader
  3. 核心插件：vue-router路由、vues状态管理、vue服务器
了解本专栏 订阅专栏 解锁全文
测试开发架构师
关注
专栏目录
订阅专栏
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
Vue--》从零开始打造交互体验一流的电商平台（一）
最新发布
ztK63LrD的博客
05-06 481
今天开始使用搭建一个电商项目平台，因为文章会将项目的每处代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端vue知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（：快速轻量且功能丰富的前端构建工具，帮助开发人员更高效构建现代Web应用程序。：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。
Vue学习笔记(一)：从零开始创建一个Vue前端项目
热门推荐
江夏、的博客
09-02 1万+
一、开篇 最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM，因为Vue.js是数据驱动的，所以无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起
Vue3.0项目实战+ElementUI从入门到实战
m0_67390788的博客
03-09 6286
课程地址:Vue3.0项目实战2021｜Vue差异化对比+实操公司后台管理系统｜零基础入门前端开发教程(C#/.Net/Vue基础/Vue3技术入门讲解/Vue实战)_哔哩哔哩_bilibili https://www.bilibili.com/video/BV17V411j76p?p=1 ElementUI从入门到实战【升职加薪，只争朝夕】-学习视频教程-腾讯课堂 https://ke.qq.com/course/3547529 零.开篇介绍 Vue3 vs Vue2 Vue-cli构建Vue3项目 .
经典案例-todoList
测试开发架构师
04-08 1248
经典案例-todoList 一、案例介绍 todolist主要是实现添加日程，设置日程为完成，清除完成的日志等等 本案例是一个非常经典的案例，会把之前学得的很多知识都可以深度的运用起来 这里使用组件化的思想，如下图，框框 框起来的作为一个组件，划分组件最合适就好，并不是越多越好 二、案例实现 2.1、划分组件 按上面红框，我们可以划分为几块组件：最上面的绿框我们定义为Header，中间的我们定义为List，下面的是Footer，中间List里面的一条记录我们定义为Item： 2.2、
Vue基础知识-模板语法
测试开发架构师
03-28 685
Vue基础知识-模板语法 一、双大括号{{}} 向页面输出数据 内部㐀是变量、对象调用、表达式 一定要有具体的结果 如下图，这里是固定写法，使用钩子函数data，return出去，然后在上面用{{}}进行引用，进行渲染，见下面示例：直接使用，也可以进行表达式 <template> <div> <!-- <h1>我是一个组件</h1>--> <h3>双括号表达式</h3> <div&
测试开发大纲及本课程的介绍
测试开发架构师
01-30 577
本人是一名从事测试10几年的老司机，现是一枚测开。接下来将给大家分享有关测开的技术栈。 并且提供学习过程中的技术支持，有不懂的测开技术问题都可以向我提问，同时也提供免费的简历修改和润色。 本课程大纲暂定如下，后续会根据用户的建议调整优先级： 介绍互联网测试流程和测试技术理论 Shell课程 python课程 接口自动化测试 web自动化测试 App自动化测试 自动遍历 兼容性测试 专项测试 性能测试 安全测试 Docker实战 Devops与持续交付 质量审计和监控平台 测
npm的全局模块管理
测试开发架构师
03-28 336
一、查看全局模块路径 使用npm config list查看npm的默认包安装路径 二、修改全局路径 用下面的命令修改npm包默认路径 配置完成全局模块安装路径后，需要设置下环境变量，才可以使用全局模块安装路径 在path新增前面添加的模块全局路径，双击下面的path 一路确定就成功了 ...
安装VUE插件DevTool
测试开发架构师
03-28 276
安装VUE插件DevTool 一、在chrome商店直接安装 如果可以访问chrome商店，可以在商店搜索插件进行直接安装，但是，国内这个方法经常会访问不了chrome商店，请参考下面手动按照 二、手动安装 找到vue-devtools的github项目，并将其clone到本地：git clone https://github.com/vuejs/vue-devtools.git 安装项目所需要的npm包：npm install 编译项目文件：npm run build 添加至chrome浏览
VUE项目工程目录介绍
测试开发架构师
03-28 241
VUE项目工程目录介绍 一、目录 node_modules：相当于管家，管理第三方依赖，运行时需要，在上线和项目给到别人时，可以删除掉 public里面，favicon.ico是图标，index.html是入口 src：开发的工程目录都在src下面 main.js是我们整个工程的入口 App.vue是所有组件的汇集点 components组件文件夹，可以把很多组件放到里面，然后在App.vue里面汇总 assets：放静态资源，图片，css，js
路由：Vue-Router-1
测试开发架构师
04-20 169
路由：Vue-Router-1 一、动态路由 1.1、动态路由方式一：路径 动态路由示例：如下图在mine后面加:name/:sex来传递动态路由，?后面的不影响路径导向 获取路径上面的动态参数：可以通过路由或路由器来获取，下面我们来通过示例来打印下 路由通过this.route，路由器通过this.$router，我们一般使用路由来获取数据 通过路由对象获取的路径参数 1.2、动态路由方式二：属性 通过props拿到动态参数 把props改成true，就可以通过路径或者pro
组件间传参-触发事件
测试开发架构师
04-05 168
组件间传参-触发事件 一、使用注意 此方式只用于子组件向父组件发送消息（数据） 隔代组件或兄弟组件间通信不适合 二、案例 实现一个删除父组件中的标签：在父组件中添加子组件 如下图：先在子组件中绑定一个事件，然后通过this.$emit在子组件点击了按钮是告诉父组件，然后后在父组件中通过@btnClick绑定一个事件，在事件中做事情，如下图 下图中子组件传递参数是在this.$emit中传递的，如下面传递了一个对象 点击按钮后，把p标签删除了，传递到父组件的数据也打印了： ..
class与style动态样式绑定
测试开发架构师
03-28 158
class与style 1.1、概念 在模板界面中，某些元素的样式是变化的，class/style用于动态绑定类和样式 class/style绑定技术就是专门用来处理动态样式效果的 样式类也是对对象和数组 style： 格式 :style="{backgroundColor:bgColor,fontSize:fSize}"，其中bgCorlor/fSize都是data属性 黄色框里面的样式就是通过参数传
列表渲染：数组、对象、过滤、排序遍历
测试开发架构师
03-28 157
列表渲染：数组、对象、过滤、排序遍历 一、数组遍历 1.1、实例 使用v-for进行遍历，下面是persons的列表进行遍历，展示在列表中——这里是简单的展示 1.2、绑定key 为什么要绑定KEY呢？ key是给每一个虚拟的节点一个唯一的id，更精准，更快的拿到oldvnode中对应的vnode节点，方便进行更新和删除等操作，有一个坏处就无法被复用 使用注意 有的人可能会说直接使用上面的index，但是是不能直接这样使用的，官网使用的列表里面的元素的编号作为key的： 不能使用in
安装vue-cli
测试开发架构师
03-28 151
安装vue-cli 一、vue-cli是什么 vue-cli是vue官方提供的脚手架工具，默认搭建好一个项目的基础架子，我们在其基础上进行相应的修改即可 下载模板地址：https//github.com/vuejs/vue-cli 或者全局安装vue-cli：npm install -g @vue/cli（建议全局安装，安装好后，在任何一个文件夹下面初始化项目都可以使用这个脚手架） 查看脚本是否安装成功 ...
todolist项目改造
测试开发架构师
04-08 148
todolist项目改造 数据持久化，我们网络还没有学，这里使用本地持久化 持久化，就是对数据的保持，数据都在App.vue里面，我们统一在这里，一般是封装一些工具类 一、本地持久化 这里使用深度监视来进行本地持久化的处理 一般工具类都放在一个文件中，如下图，这个工具类需要对数据进行读和存，定义好之后，在App.vue里面引入就可以使用了 思考存的工具类 存的动作是在所有的todos改变时都要触发，那就只要监视todos值值得改变就可以了 而且这里必须要深度监视：这里监视的内容是数组，里面又
VUE基础知识一——创建和使用三部曲组件
测试开发架构师
03-28 117
VUE基础知识一 一、组件的定义与使用 组件的组成可以分为三块 模板页面 JS模块对象 样式 二、基本使用 也是分三步： 引入组件 映射成标签 使用组件标签 下图中新建一个组件： 然后进入到App.vue里面使用这个组件 ...
路由：Vue-Router
测试开发架构师
04-08 114
路由：Vue-Router 一、概念 Vue Router是Vue.js官方的路由管理器，他和Vue.js的核心深度集成，让构建单页面应用变得更加轻松 二、示例 2.1、基本使用 直接在示例中来了解路由的使用吧 创建一个新的工程vue create xx，会有一个Router选项，如果选择了，就会自动化方式集成到项目中了，为了学习，我们不选择，手动集成进来 进入工程目录，安装路由：npm i vue-router --save 启动工程：vue run serve 配置路由：
前端vue零基础入门
09-07
你好！要学习前端开发，特别是Vue框架，以下是一些入门的步骤和资源： 1. HTML和CSS基础：作为前端开发的基础，你需要熟悉HTML和CSS。可以通过W3School的教程来学习这两个技术。 2. JavaScript基础：Vue是一个基于JavaScript的框架，因此你需要了解JavaScript的基础知识。同样，W3School也提供了JavaScript的教程。 3. 学习Vue框架：一旦你掌握了HTML、CSS和JavaScript的基础知识，就可以开始学习Vue了。Vue官方文档是最好的学习资源，你可以从官方网站上查找并阅读文档。 4. 练手项目：为了加深对Vue的理解，你可以尝试做一些小型的练手项目。这可以帮助你将理论知识应用到实践中，并提升你的编码能力。 5. 社区和论坛：加入Vue开发者社区和论坛可以让你与其他开发者交流经验、解决问题。在这些平台上，你可以提问、分享和学习更多关于Vue的实践经验。 此外，还有很多在线课程和视频教程可供学习。你可以在网上搜索相关资源并选择适合自己的学习方式。记得不断练习和实践，只有通过实践才能真正掌握前端开发技术。祝你学习愉快！如果你还有其他问题，我很乐意帮助你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值