Vue
关注
分享
扫一扫
文章平均质量分 67
逐步深入了解vue
蒙悦纳
这个作者很懒，什么都没留下…
展开
-
Vue项目更改为local以及Network启动
compilationSuccessInfo: { messages: [ `App runing at: `, `Local: http://localhost:${port}`, `Network: http://${require('ip').address()}:${port}`, ] },原创 2021-06-21 20:16:09 · 3740 阅读 · 0 评论 -
Vue之路由导航（路由守卫）
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航1、全局前置守卫使用 router.beforeEach 注册一个全局前置守卫const router = new VueRouter({ routes // (缩写) 相当于 routes: routes})router.beforeEach((to, form, next) => { //to即将要进入的目标 路由对象 next(); //from当前导航正要离开的原创 2020-07-29 08:27:22 · 314 阅读 · 0 评论 -
Vue之路由详解
1、路由传参参数可以分为；查询参数和路径参数<router-link to="/user?username=XXX&pass=123">Go to user</router-link>//使用$route.query来获取<router-link to="/user/123">Go to user</router-link>//需要先在路由定义中定义<script> var routers = [ { .原创 2020-07-28 20:51:18 · 144 阅读 · 0 评论 -
Vue之组件分发
当写Vue项目的时候，会把所有的组件进行拆分，根据需求来引入对应的组件，也就是模块化开发。1、模板定义插槽<template id="headers"> <!-- 模板里面定义插槽，只能有一个外部元素--> <div> <div style="border:2px solid green;width:70%;"> <slot name="header"> &原创 2020-07-28 19:35:33 · 393 阅读 · 0 评论 -
Vue之组件切换
先看效果：两种方法：1、使用v-show来实现组件切换<button @click="flag=!flag">{{flag?"列表":"表格"}}</button><showtable :list="list" v-show="flag"></showtable><showlist :list="list" v-show="!flag"></showlist>//利用v-show的显示隐藏来实现列表和表格之间的切换/原创 2020-07-28 19:26:55 · 589 阅读 · 0 评论 -
Vue路由创建步骤
路由创建大致分为6步：定义组件：代码示例：<template id="user"> <div> <h2>user------user------user</h2> <h3>path-------{{$route.path}}</h3> <h3>query-------{{$route.query}}</h3> <h3>p原创 2020-07-27 21:36:39 · 362 阅读 · 0 评论 -
Vue组件传值（父传子，子传父，兄弟相传）
1. 组件传值之父传子父子之间的传值比较简单，父传子直接通过props来进行传值，在子组件中要定义对应的prop来获取父组件的值。代码：<childredone @changeparent="changemsgg" :handler="num" :strings = "msg" ></childredone>props:{ handler:Number, strings:String},2.组件传值之子传父原创 2020-07-27 21:19:40 · 418 阅读 · 0 评论 -
Vue组件注册的方式
全局创建组件：2.先定义后引用:3.局部组件注册组件全局注册和局部主要要根据实际的情况来选择。原创 2020-07-27 20:38:04 · 134 阅读 · 0 评论 -
Vue自定义指令实现拖拽效果
Vue提供了自定义指令的方法，使得功能更加丰富，现在就用Vue提供的自定义指令实现拖拽。先看效果：自定义指令，可以实现指令的复用，上代码：Vue.directive("drag", { //指令的名称 inserted: function (el, binding) { //当被绑定的元素插入到 DOM 中时 el.style.position = "absolute"; el.style.left = binding.arg.left + "px";原创 2020-07-24 16:24:52 · 897 阅读 · 0 评论 -
Vue获取表单的值
Vue自带一个特别神奇的指令，v-model可以实现表单元素的值得双向数据绑定，举个例子：<input type="text" v-model="msg"><p>{{msg}}</P>当改变input的值，对应的p标签的值也会发生改变，修改p标签的值，input里面的值也会发生改变。<div id="example-3"> <input type="checkbox" id="jack" value="JACK" v-model="ch原创 2020-07-24 08:14:34 · 3887 阅读 · 0 评论 -
Vue结合animate动画库实现选项卡
先看效果：利用animate的动画效果实现，看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <script src=原创 2020-07-23 20:41:20 · 432 阅读 · 0 评论 -
Vue实现简单购物车（computed+filter）
同源策略：只有当协议、端口、和域名都相同的页面，则两个页面 具有相同的源原创 2020-07-23 20:21:42 · 435 阅读 · 1 评论 -
Vue实现留言板功能以及原生js实现留言板对比
先看效果：原生js实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>留言板</title> <style> .box{原创 2020-07-22 20:15:51 · 597 阅读 · 0 评论