Vue
关注
分享
扫一扫
文章平均质量分 57
好运haoyun
这个作者很懒，什么都没留下…
展开
-
Vue-组件-component
组件定义一个Vue组件，可以实现代码的复用，结构的复用，像是一个组件中应该有哪些模块，把这些模块装入组件中，组件的复用，整体结构就能复用<body><div id="vue-app"> <haoyun v-for="item in items" v-bind:lin="item"></haoyun> <haoyun v-bind:lin="test"></haoyun></div><sc原创 2020-09-05 22:39:59 · 126 阅读 · 0 评论 -
Vue_slot插槽 简单理解
slot插槽留一个代办事项，之后想添加什么再添加进来像是这个结构，从后端要遍历数据传统的方法是，只在一个标签中遍历数据，但是要把数据放在 ul 中的li中就很难实现<li v-for="item in items"> {{item.message}}</li>要保持这种结构div下一个有一个 p 标签 还有一个 ul 标签，ul 标签下还有一些 li 标签，的层次结构不变，最好就使用插槽的知识，更好的进行模块化的规范，让视图层更专原创 2020-09-05 22:34:48 · 252 阅读 · 0 评论 -
Vue-指令（v-bind,v-if,v-else,v-else-if,v-for,v-on）
指令指令带有v-前缀，表示它们是Vue提供的特殊特性，渲染Dom上的一些特殊行为v-bind绑定一个参数，可以使用 {{}} 或者v-bind的形式Demo<body><!--view层，模板--><div id="vue-app"> <span v-bind:title="name">鼠标悬停几秒显示title属性值</span></div><script src="https:原创 2020-09-05 22:37:12 · 298 阅读 · 0 评论 -
Vue-双向数据绑定VM_View-Model
VM双向数据绑定MVVM框架，当数据发生改变的时候，视图也发生变化，当视图发生变化的时候，数据也会发生变化只要使用 v-model 指令在表单 元素上创建双向数据绑定，v-model本质上是一个语法糖，负责监听用户的输入事件以更新数据，并对一些极端场景做一些处理Demo<div id="vue-app"> <input type="text" v-model="message">{{message}}</div><script src=原创 2020-09-05 22:38:43 · 305 阅读 · 0 评论 -
IDEA新建没有Vue选项
新建Vue选项设置<template></template><script> export default { name: "asfsad" }</script><style scoped></style>原创 2020-09-05 22:41:15 · 2058 阅读 · 1 评论 -
Vue-Axios异步通信
Axios异步通信网络通信可以使用jQuery，但是vue是一个视图层框架，作者比较遵守Soc原则，所以vue不包含Ajax异步通信功能，为了解决通信功能，就开发了vue-resource插件，但是这个插件停止了更新，就推荐使用了这个框架，少用jQuery，因为操作Dom太频繁了Axios是一个开源的可以使用在浏览器端和NodeJS的异步通信框架，主要作用是实现Ajax异步通信从浏览器创建异步请求XML Http Requests从Node.js创建http请求支持PromiseAPI拦截请求原创 2020-09-05 22:42:32 · 823 阅读 · 1 评论 -
Vue计算属性computed
Vue计算属性计算出来的结果保存在属性中，保存在内存中，可以想象成一个缓存Demo：和定义方法进行对比<body><div id="vue"> <!--需要通过括号去调用--> <p>{{currentTime1()}} <!--主要区别就是上面通过方法来调用，下面通过属性来调用--> <p>{{currentTime2}}</p></div><scr原创 2020-09-05 22:44:40 · 115 阅读 · 0 评论 -
狂神 Vue slot插槽 笔记
slot插槽留一个代办事项，之后想添加什么再添加进来像是这个结构，从后端要遍历数据传统的方法是，只在一个标签中便利数据，但是要把数据放在中的中就很难实现<li v-for="item in items"> {{item.message}}</li>要保持这种结构div下一个有一个 p 标签 还有一个 ul 标签，ul 标签下还有一些 li 标签，的层次结构不变，最好就使用插槽的知识，更好的进行模块化的规范，让视图层更专注的设置结构原创 2020-09-11 07:33:34 · 237 阅读 · 0 评论 -
狂神 Vue 自定义内容分发
自定义内容分发如何在slot组件插槽的基础上实现数据操作因为组件与Vue实例传递数据是通过v-bind和props，当前组件可以绑定当前组件中的事件，但是不能直接绑定到vue实例中的事件，但是要操作vue中的data必须要通过Vue实例中的方法删除，通过自定义事件就能调用到绑定的事件，就可以绑定到Vue实例的事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-09-11 07:34:45 · 196 阅读 · 0 评论 -
狂神 Vue 第一个vue-cli项目
第一个vue-cli项目vue-cli提供一个脚手架，用于快速生成一个vue项目模板预先定义好的目录结构以及基础代码，好比创建maven项目可以选择创建骨架项目，能提高开发效率需要环境Node.js:https://nodejs.org/en/Git:https://git-scm.com/download/win镜像:https://npm.taobao.org/mirrors/git-for-windows/Node安装一直下一步就行安装好cmd检查一下C:\User原创 2020-09-11 07:35:53 · 490 阅读 · 0 评论 -
狂神 Vue Webpack
Webpack是一个现代化的JavaScript应用程序的静态模块打包器（module bundler），会递归的构建依赖关系图（dependency graph）浏览器逐渐进化到WebApp模式，通常是一个SPA（单页面应用），每一个视图通过异步通信加载，导致页面初始化和使用过程中会加载越来越多JS代码主要为了解决代码版本不同解决兼容性规范import export在JavaScript中结构都是暴露在全局模式下的，不同模块调用的都是同一个作用域，弊端全局作用域容易造成变量冲突只能原创 2020-09-11 07:36:49 · 215 阅读 · 0 评论 -
狂神 Vue-router
vue-router因为Vue是一个专注于视图层的框架，所以要使用vue-router路由来进行转发和重定向是Vue.js的官方路由管理器，和Vuejs深度集成包含的功能:嵌套的路由/视图表模块化、基于组件的路由配置路由参数、查询、通配符基于Vue.js过度系统的视图过度效果细粒度的导航控制带有自动激活CSS class的链接Html5历史模式或hash模式，在中自动IE9中自动降级自定义的滚动条行为安装vue-routervue-router检查是否安装np原创 2020-09-11 07:37:38 · 196 阅读 · 0 评论 -
狂神 Vue-elementUI
vue-elementUI能快速的让网站上线直接看官方文档，里面的文档很详细https://element.eleme.cn/#/zh-CN直接全部从头来一遍vue-router自己安装的时候老是容易出问题直接让他默认安装C:\Users\haoyun\Desktop\vue\vue-elementUI>npm i element-ui -S安装elementUI安装SASS加速器cnpm install sass-loader node-sas原创 2020-09-11 07:39:11 · 1434 阅读 · 2 评论 -
狂神 vue 路由嵌套
路由嵌套对于组件来说只是对局部的改变主要流程创建两个组件路由注册两个组件首页通过路径点击事件通过路由找到组件，将组件渲染上去List.vue<template> <h1>用户列表</h1></template><script> export default { name: "UserList" }</script><style scoped&原创 2020-09-11 07:40:30 · 317 阅读 · 0 评论 -
狂神 Vue 参数传递以及重定向
参数传递以及重定向通过前端url传递参数，对应的路径添加params接收，显示参数Main.vue<el-menu-item index="1-1"> <router-link v-bind:to="{name:'UserProfile',params:{id:1}}">个人信息</router-link></el-menu-item>index.jschildren:[ { path:"/user/profile/:id",原创 2020-09-11 07:41:40 · 261 阅读 · 0 评论 -
狂神 Vue 钩子函数与异步请求
404和路由钩子参数传递将Login界面的用户名显示到main页面先从Login界面，转发时加上用户名输入框的数据<el-form-item label="账号" prop="username"> <el-input type="text" placeholder="请输入账号" v-model="form.username"/></el-form-item>this.$refs[formName].validate((valid)=>{原创 2020-09-11 07:43:15 · 717 阅读 · 0 评论