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 · 134 阅读 · 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 · 261 阅读 · 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 · 307 阅读 · 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 · 315 阅读 · 0 评论 -
IDEA新建没有Vue选项
新建Vue选项设置 <template> </template> <script> export default { name: "asfsad" } </script> <style scoped> </style>原创 2020-09-05 22:41:15 · 2067 阅读 · 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 · 839 阅读 · 1 评论 -
Vue计算属性computed
Vue计算属性 计算出来的结果保存在属性中，保存在内存中，可以想象成一个缓存 Demo：和定义方法进行对比 <body> <div id="vue"> <!--需要通过括号去调用--> <p>{{currentTime1()}} <!--主要区别就是上面通过方法来调用，下面通过属性来调用--> <p>{{currentTime2}}</p> </div> <scr原创 2020-09-05 22:44:40 · 121 阅读 · 0 评论 -
狂神 Vue slot插槽 笔记
slot插槽 留一个代办事项，之后想添加什么再添加进来 像是这个结构，从后端要遍历数据 传统的方法是，只在一个标签中便利数据，但是要把数据放在中的中就很难实现 <li v-for="item in items"> {{item.message}} </li> 要保持这种结构div下一个有一个 p 标签 还有一个 ul 标签，ul 标签下还有一些 li 标签，的层次结构不变，最好就使用插槽的知识，更好的进行模块化的规范，让视图层更专注的设置结构原创 2020-09-11 07:33:34 · 244 阅读 · 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 · 200 阅读 · 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 · 503 阅读 · 0 评论 -
狂神 Vue Webpack
Webpack 是一个现代化的JavaScript应用程序的静态模块打包器（module bundler），会递归的构建依赖关系图（dependency graph） 浏览器逐渐进化到WebApp模式，通常是一个SPA（单页面应用），每一个视图通过异步通信加载，导致页面初始化和使用过程中会加载越来越多JS代码 主要为了解决代码版本不同解决兼容性规范 import export 在JavaScript中结构都是暴露在全局模式下的，不同模块调用的都是同一个作用域，弊端 全局作用域容易造成变量冲突 只能原创 2020-09-11 07:36:49 · 229 阅读 · 0 评论 -
狂神 Vue-router
vue-router 因为Vue是一个专注于视图层的框架，所以要使用vue-router路由来进行转发和重定向 是Vue.js的官方路由管理器，和Vuejs深度集成 包含的功能: 嵌套的路由/视图表 模块化、基于组件的路由配置 路由参数、查询、通配符 基于Vue.js过度系统的视图过度效果 细粒度的导航控制 带有自动激活CSS class的链接 Html5历史模式或hash模式，在中自动IE9中自动降级 自定义的滚动条行为 安装vue-router vue-router 检查是否安装 np原创 2020-09-11 07:37:38 · 203 阅读 · 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 · 1447 阅读 · 2 评论 -
狂神 vue 路由嵌套
路由嵌套 对于组件来说只是对局部的改变 主要流程 创建两个组件 路由注册两个组件 首页通过路径点击事件通过路由找到组件，将组件渲染上去 List.vue <template> <h1>用户列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped&原创 2020-09-11 07:40:30 · 324 阅读 · 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.js children:[ { path:"/user/profile/:id",原创 2020-09-11 07:41:40 · 271 阅读 · 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 · 728 阅读 · 0 评论