Vue 学习1

最新推荐文章于 2022-10-31 21:13:05 发布

x-dragon8899

最新推荐文章于 2022-10-31 21:13:05 发布

阅读量288

点赞数 1

分类专栏：前端-vue 文章标签： vue npm

本文链接：https://blog.csdn.net/m0_45234510/article/details/105825956

版权

前端-vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vue

一、安装nodejs、vue-cli
二、安装及使用webpack
三、Vue-router路由
四、Vue+ElementUI
- 1、创建一个名为 hello-vue 的工程
2、安装依赖
五、嵌套路由
六、路由与404
七、路由钩子

一、安装nodejs、vue-cli

在这里插入图片描述

二、安装及使用webpack

在这里插入图片描述

三、Vue-router路由

在这里插入图片描述
思路：在components中创建一个vue组件，去index.js导入组件并配置路由，去App.vue 中使用

四、Vue+ElementUI

1、创建一个名为 hello-vue 的工程

vue init webpack hello-vue

2、安装依赖

# 进入工程目录
cd hello-vue
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

五、嵌套路由

在这里插入图片描述

重定向
在这里插入图片描述

六、路由与404

在这里插入图片描述

七、路由钩子

在这里插入图片描述

优惠劵

x-dragon8899

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue 学习1

vue cli报错 vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFO UND github.
复制链接

扫一扫

专栏目录

Vue学习笔记（尚硅谷天禹老师）

qq_55593227的博客

08-15

31万+

Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网英文官网中文官网 1.1.2. 介绍与描述动态构建用户界面的渐进式JavaScript框架作者：尤雨溪 1.1.3. Vue的特点遵循MVVM模式编码简洁，体积小，运行效率高，适合移动/PC端开发它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联借鉴 Angular 的模板和数据绑定技术借鉴 React 的组件化和虚拟DOM

Vue学习心得

weixin_49331914的博客

07-08

4291

Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点; mvvm ●Model:模型层，在这里表示JavaScript对象 ●View:视图层,在这里表示DOM (HTML操作的元素) ●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通

1 条评论您还未登录，请先登录后发表或查看评论

vue 学习

freeking101的博客

07-17

8072

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................

Vue基础知识总结 1：Vue入门

热门推荐

学Java，找哪吒

06-23

8万+

Vue基础教程系列，打造精品专栏。

Vue学习心得（1）

a253399414的博客

10-09

1760

** Vue 的安装方式 ** 下载使用（两种方式） 1.直接下载并用script标签引入，Vue 会被注册为一个全局变量，平时对于 Dom 操作比较频繁的小项目可以直接这样使用。 2.Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：针对单页应用的构建推荐使用这种方式，可以更好的体验到 vue 所提供的组件化功能（单文件组件），顺带着享受到 webpa

学习Vue3 第一章

qq1195566313的博客

02-02

6万+

1.介绍vue Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官方文档地址介绍 — Vue.js 2.回顾vue2 对比 vue3 我们看如下图发现传统的vue2 逻辑比较分散可读性差可维护性差对比vue...

Vue学习总结

魅控

08-07

5832

Vue 基础指令：插值表达式：语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成 Model中的数据 bug点：当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在 HTML元素之后时会出现该bug） 1.v-cloak指令：语法：把它当作HTML元素的一个属性使用示例： {...

vue-router入门学习1

STATICHIT静砸的博客

10-31

2118

更新中

vue——菜鸟教程学习

weixin_42109930的博客

06-27

1万+

此篇文章仅仅是提纲摘要，用于自己学习时的一个笔记1. v-if：条件语句；v-show2. v-for：循环语句3. computed和methods：计算属性4. watch：监听属性5. 样式绑定：v-bind6. v-on：事件处理器7. Vue的表单：简言之，vue是MVVM模型，即：view：管理DOM事件Model：进行js逻辑处理ViewModel：是view和model之间的桥梁，进行DOM事件监听和数据交互v-modle会根据控件类型自动选取正确的方法来更新元素，进行双向绑定；我们可以在前

vue初学——vue学习路线

copple的专栏

03-05

3487

上个周末写了2篇文章都是关于vue的学习，然后在写第三篇的时候，看了一个视频——里面提到学习方法。作为一个程序员，对新技术的学习需要有一个自己的套路，即学习方法。掌握一套好的学习方法，后面不管学习什么新技术、新知识都能快速的上手吸收。所以，我停止了写第三篇文章的步伐，开始停下来思考如何构建自己的学习体系？ ...

vue学习1--10

04-13

绑定数据，循环数组 Vue绑定属性，绑定html,绑定class,绑定style ...demo练习，实现todolist效果1 demo练习，实现todolist效果2 demo练习，todolist使用localStorage实现数据的永久存储 Vue中创建组件以及使用组件

jxu86#technique-architect#vue学习1

07-25

参考:基于vue+vant搭建H5通用架子HTML5中盒子模型重点总结animate动画库animation实现一闪一闪效果在vue中使用animate.css

Vue3学习ddddddddd

08-18

Vue3学习ddddddddd

学习Vue组件实例

11-29

Vue实例项目启动过程看一下现在我们的项目，想想整个项目的启动过程是什么（以直接打开index.html的方法访问为例来说明）？你首先打开了index.html，里面只有一个写了一个id=’root’的div，还有你引入了打包...

vue学习基础以及大纲

07-19

vue学习大纲

Vue学习9-项目实战二：完成九宫格、组件切换、新闻列表、时间过滤器、评论功能

x-dragon8899的博客

05-22

4206

一、上次的反馈二、完成首页九宫格步骤 1、查看MUI https://dcloud.io/hellomui/examples/grid-default.html 2、到组件中使用 3、调整样式(按F12查看有没有现成的样式名) 1、修改图标 2、查看自己图标的信息 3、找样式名 4、修改 5、效果三、完成组件切换动画效果 1、分析 2、使用transtion元素 3、添加动画样式 4、效果四、完成新闻列表 1、新建新闻列表组件 2、页面上换成<router-l

学习Vue的常见问题

x-dragon8899的博客

06-16

2774

一、消除router-link的下划线要消除下划线，增加一下样式代码即可： * { text-decoration: none; } .router-link-active { text-decoration: none; }

Vue学习8-项目实战一：完成header、tabbar区域、路由组件切换与轮播图功能

x-dragon8899的博客

05-21

2270

一、安装Mint UI Mint UI官网 # Vue 2.0 npm install mint-ui -S 在main.js中引入 // 引入全部组件 import Vue from 'vue'; import Mint from 'mint-ui'; Vue.use(Mint); // 按需引入部分组件 import { Cell, Checklist } from 'mint-ui'; Vue.component(Cell.name, Cell); Vue.compo

Vue学习7-MinUI组件与项目托管到码云上

x-dragon8899的博客

05-21

425

一、使用render函数渲染组件 render函数的特点：可以在页面指定的容器中渲染一个组件；和传统的渲染组件方式相比，render 更霸道一些，页面上，只能渲染这唯一组件，其它的内容，都会被覆盖掉；二、在webpack中配置.vue组件页面的解析 1、运行npm i vue -S将vue安装为运行依赖； 2、运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； 3、运行npm i style-loader css-loader

vue学习-vue入门

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交