Vue.js
关注
分享
扫一扫
文章平均质量分 66
Vue.js
AlvinUnity
这个作者很懒，什么都没留下…
展开
-
3. Vue Router
一、认识路由1、锚点的概念案例：百度百科特点：单页Web应用，预先加载页面内容形式：url#锚点2、路由的作用Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）3、参考https://router.vuejs.org/zh/二、路由实例1、创建文件夹和文件创建文件夹 07-router，创建index.原创 2021-04-17 22:33:00 · 117 阅读 · 0 评论 -
2. Element-UI进门
一、常用组件库1、Mint UI主页：http://mint-ui.github.io/#!/zh-cn说明：饿了么开源的基于Vue的移动端UI组件库2、Element-UI主页：http://element-cn.eleme.io/#/zh-CN说明：饿了么开源的基于Vue的PC端UI组件库二、Element-UI实例1、引入脚本库创建 06uipro文件夹，复制05vue中综合案例相关代码2、引入css和脚本 <!-- 引入样式 --> <head>原创 2021-04-17 18:22:54 · 154 阅读 · 0 评论 -
1. Vue-js进门
一、Vue.js的基本认识1、官网英文官网：https://vuejs.org中文官网：https://cn.vuejs.org2、简介渐进式JavaScript 框架（核心 + 扩展）作者：尤雨溪(一位华裔前 Google 工程师)作用：动态构建用户界面3、优点体积小：压缩后33K更高的运行效率：基于虚拟dom双向数据绑定：不操作dom，关注业务逻辑生态丰富、学习成本低：入门容易，学习资料多二、第一个Vue应用1、引入脚本库创建文件夹05-vue，复制vue.js，创建 0原创 2021-04-17 17:17:16 · 267 阅读 · 0 评论 -
19. Vue.js 404、钩子函数
404处理 404 需要创建一个名为 NotFound.vue 的视图组件钩子函数类似拦截器的作用beforeRouteEnter：在进入路由前执行beforeRouteLeave：在离开路由前执行<script> export default { props: ['id'], name: "UserProfile", //在进入路由前执行 beforeRouteEnter: (to, from, next) => { co原创 2020-09-05 06:52:01 · 139 阅读 · 0 评论 -
17. Vue.js重定向
重定向修改index.js添加一个新的路由{ path:'/home', redirect:'/main' }修改Profile.vue在前端使用 <el-menu-item index="1-3"> <!--插入的地方--> <router-link to="/home">回到首页</router-link>原创 2020-09-05 06:51:36 · 381 阅读 · 0 评论 -
16. Vue.js参数传递
参数传递示例一修改index.js// ...export default new Router({ routes: [ { path: '/main', name: 'Main', component: Main, children: [ {path: '/user/profile/:id', name: 'UserProfile', component: UserProfile}, {path: '/原创 2020-09-05 06:51:23 · 266 阅读 · 0 评论 -
15. Vue.js路由嵌套
路由嵌套路由嵌套又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样的，URL中各段动态路径也按某种结果对应嵌套的各层组件在views目录下创建一个user文件夹，添加新的组件List.vue<template> <div style="float: left;"> <h1>用户列表</h1> </div></template><script> export defaul原创 2020-09-05 06:51:01 · 113 阅读 · 0 评论 -
14. vue+ElementUI
vue+ElementUI环境配置创建一个vue-cli的工程vue init webpack hello_vue安装依赖# 进入工程目录cd hello_vue# 安装 vue-routernpm install vue-router --save-dev# 安装 element-uinpm i element-ui -S# 安装依赖npm install# 安装 SASS 加载器cnpm install sass-loader node-sass --sav原创 2020-09-05 06:50:26 · 126 阅读 · 0 评论 -
12. Vue.js Webpack
Webpack本质上，webpack是一个现代JavaScript应用程序的静态模块打包器，它会递归的构建一个依赖关系图ES6模块EcmaScript6标准增加了JavaScript语言层面的模块体系定义，其核心思想就是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量，而以往的CommondJS和AMD模块，都只能在运行时确定这些东西。优点：容易进行静态分析面向未来的EcmaScript标准缺点：原生浏览器还没有实现该标准全新的命令，新版的NodeJS才支持原创 2020-09-05 06:49:49 · 115 阅读 · 0 评论 -
18. Vue.js路由模式
路由模式路由模式有两种hash：路径带 # 符号，如 http://localhost/#/login（默认）history：路径不带 # 符号，如http://localhost/login修改路由配置index.jsexport default new Router({ mode:'history'})原创 2020-09-05 06:51:47 · 186 阅读 · 0 评论 -
13. vue-router
vue-routerVue Router 是 Vue.js官方的路由管理器安装npm install vue-router --save-dev清空router文件夹内的所有文件创建components文件夹存放编写的组件定义一个Content.vue的组件<template> <h1>内容页</h1></template><script> export default { name原创 2020-09-05 06:49:59 · 109 阅读 · 0 评论 -
11. Vue.js vue-cli npm
vue-clivue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板config目录下的index.js可以修改端口号1. 安装Node.js2. 安装Node.js淘宝镜像加速器（cnpm） npm install cnpm -g3. 安装vue-cli cnpm install vue-cli -g 4. 查看是否安装成功 vue list 5. 创建一个项目，建立一个空文件夹，命令行跳转到目录，项目名myvue vue init webpack myv原创 2020-09-05 06:49:28 · 121 阅读 · 0 评论 -
10. Vue.js自定义事件
自定义事件流程解析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> &l原创 2020-09-04 21:20:49 · 135 阅读 · 0 评论 -
9. Vue.js slot
slot在Vue中使用<slot>元素作为承载分发内容的出口，称之为插槽，可以应用在组合组件的场景中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入Vue.js --> <script src="https://cdn.jsdeli原创 2020-09-04 21:19:58 · 123 阅读 · 0 评论 -
8. Vue.js计算属性
计算属性简单点来说，计算出来的结果，保存在属性中，内存中运行，可以想象为缓存。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入Vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue@2.原创 2020-09-04 21:18:59 · 105 阅读 · 0 评论 -
7. Vue.js Axios*
Axios*Axios是一个开源的用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信。<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>T原创 2020-09-04 21:18:17 · 105 阅读 · 0 评论 -
6. Vue.js组件
组件组件就是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签等框架类似。通常一个应用会以一棵嵌套的组件树的形式来组织<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <!原创 2020-09-04 21:17:29 · 140 阅读 · 0 评论 -
5. Vue.js双向数据绑定
Vue.js双向数据绑定Vue.js是一个MVVM框架，既数据双向绑定，既当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是Vue.js的精髓了。可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model会忽略所有表单元素的value、c原创 2020-09-04 21:16:35 · 181 阅读 · 0 评论 -
4. Vue.js绑定事件
Vue.js绑定事件v-on简写@<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入Vue.js --> <script src="https://cdn.jsdel原创 2020-09-04 21:15:23 · 107 阅读 · 0 评论 -
3. Vue.js基本语法
Vue.js基本语法v-bind操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bindv-bind简写:<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</原创 2020-09-04 21:14:13 · 169 阅读 · 0 评论 -
2. MVVM模式
MVVM模式MVVM是一种软件架构模式，源自于经典的MVC模式，它的方式是以事件驱动编程。它的核心就是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。ViewModel封装出来的数据模型包括视图的状态和行为两部分视图的状态和行为都封装在了ViewModel里面，这样的封装使得ViewModel可以完整的去描述View层Vue完全解耦了View层和Model层，这个解耦至关重要，它是前后端分离方案实施的重要一环。Vue.js就是一个MVVM的实现者，它的核心原创 2020-09-04 21:12:56 · 185 阅读 · 0 评论 -
1. Vue.js简介、前端知识体系
1、简介什么是Vue.jsVue 是一套用于构建用户界面的渐进式框架，渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等特性。Vue 的核心库只关注视图层，易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。为什么使用Vue.js吸取了Angular（模块化）和React（虚拟Dom：就是把Dom操作放到内存中执行）的长处，并拥有自己独特的功能，如：计算属性2、前端知识体系前端三要素HTML（结原创 2020-09-04 21:11:54 · 125 阅读 · 0 评论 -
Vue.js快速进门
什么是Vue.jsVue 是一套用于构建用户界面的渐进式框架，渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等特性。Vue 的核心库只关注视图层，易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。前端知识体系前端三要素HTML（结构）CSS（表现）JavaScript（行为）CSS预处理器用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用L原创 2020-08-27 22:27:42 · 247 阅读 · 0 评论