vue
关注
分享
扫一扫
万迹
这个作者很懒，什么都没留下…
展开
-
vue和react配置反向代理
第一步下载插件npm install http-proxy-middleware --save-dev第二步在配置文件里面加入vue的配置文件是vue.config.jsreact的配置文件为setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports=function(app){ app.use(createProxyMiddleware(`/api`,原创 2021-11-20 11:57:47 · 803 阅读 · 0 评论 -
vue的vant组件中sku使用
<template> <div class="info"> <van-button type="primary" @click="show=true">显示商品</van-button> <van-button type="warning" @click="callBackMainPage">返回主页</van-button> <van-sku v-model="show" :s原创 2021-11-05 20:15:07 · 2896 阅读 · 4 评论 -
vue的路由实现原理
主要通过监听地址栏的hash变化结合动态组件来实现对应页面的切换<template> <div id="app"> <h1>APP根组件</h1> <hr /> <a href="#/Home">Home</a> <a href="#/Movie">Movie</a> <a href="#/About">About</a>原创 2021-10-25 15:05:44 · 122 阅读 · 0 评论 -
vue组件通讯之依赖注入（祖先直接传后代）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-10-25 11:31:46 · 196 阅读 · 0 评论 -
vue的生命周期详解
先来张翻译后的官方vue生命周期图可以看到在vue-整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作,那么先列出所有的钩子函数，然后我们再一一详解:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed先来一波代码，各位复制在浏览器中运行，打开console查看就行了:<!DOCTYPE html><html lang="en"&g原创 2020-11-14 18:24:13 · 165 阅读 · 0 评论 -
vue中的混入
混入基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。案例：var mixin = { created () { this.hello(); }, methods: { hello () { console.log('hello，我是混入中的函数'); }, }}Vue.component('my原创 2020-11-14 15:46:14 · 320 阅读 · 0 评论 -
Vue的component标签
作用可以在一个组件上进行多样化渲染。例如：选项卡is属性 <div id="father"> <component is="one"></component> <component is="two"></component> </div> <script> Vue.component('one', { template: `原创 2020-11-13 11:36:51 · 615 阅读 · 0 评论 -
Vue——组件监听
用处我们在创建组件后，如果想给组件里面的标签绑定事件，就需要用到组件监听了。自定义事件绑定到组件中也就是给自定义标签建一个非原生事件，然后将这个事件绑定到主键里。需要用到 Vue的内建方法$emit 来操作 <div id="father"> <zyl-new @test="testClick"></zyl-new> </div> <script> Vue.component('zyl-原创 2020-11-13 11:23:31 · 1189 阅读 · 0 评论 -
vue的插槽
最简单的使用 <div id="father"> <zyl-mew>12312</zyl-mew> </div> <script> Vue.component('zyl-mew',{ template:` <div> <slot></slot>原创 2020-11-12 20:56:48 · 121 阅读 · 0 评论 -
vue的组件和prop
组件基础组件的作用组件是可复用的vue实例，且带有一个名字。组件就是我们自定义的一个元素但是要注意的是：必须用在vue的模版中使用全局组件全局组件挂载：实例化一个vue对象，建立一个组件，然后挂载 <div id="app"> <hc-c></hc-c> </div> <script> Vue.component('hc-c',{ data(){原创 2020-11-11 20:38:21 · 257 阅读 · 0 评论 -
vue的计算属性computed
计算属性1.作用：数据可以进行逻辑处理操作对计算属性中的数据进行监视。2.计算属性和普通属性的区别：计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新变化计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存计算的结果，不会多次执行。计算属性 vs 方法方法： 当使用方法时，每一次页面重新渲染对应的方法都会重新执行一次计算属性：值会存到缓存中，只要它依赖的data的值不发生变化，那么它就不运行，每次访问计算属性的时候都会从缓存中调取数据下面是原创 2020-11-09 20:35:06 · 211 阅读 · 0 评论 -
vue的侦听器及怎么侦听数组
作用侦听属性 响应数据的变化，当数据发生改变的时候 会立即执行对应的函数。<body> <div id="test"> <input type="text" v-model="entry"> </div> <script> let vm = new Vue({ el: "#test", data: { entr原创 2020-11-08 21:08:28 · 1282 阅读 · 0 评论 -
vue的v-model指令
作用：双向数据绑定，只能用于表单元素上<body> <input id="test" type="text" v-model="entry"> <script> let vm = new Vue({ el:"#test", data:{ entry:"" } }) </script></bod原创 2020-11-08 11:13:42 · 451 阅读 · 0 评论 -
利用vue+jsonp技术实现百度搜索下拉框联想
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.js"><原创 2020-11-06 20:35:22 · 449 阅读 · 0 评论 -
vue——v-for指令
在v-for中使用数组用法：(item, index) in itemsindex为数组下标<ul id="app"> <li v-for="(person, index) in persons"> {{ index }}---{{ person.name }}---{{ person.age }} </li></ul>const vm = new Vue({ el: '#app', data: { persons:原创 2020-11-02 20:39:33 · 500 阅读 · 0 评论 -
Vue——v-bind指令
给标签动态绑定一个属性作用: 动态的去绑定一个或者多个特性（属性）<body> <img id="sel" v-bind:src="src"></img> <!-- 可以省略v-bind --> <!-- <img id="sel" :src="src"></img> 效果同上--> <script> let vm = new Vue({原创 2020-11-02 20:12:27 · 253 阅读 · 0 评论 -
vue——v-on指令的常用修饰符
stop作用： 阻止事件冒泡<body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({原创 2020-11-02 18:46:00 · 1100 阅读 · 0 评论 -
vue基础和它的基础指令
vue基础使用创建方法其中的el类型 是一个字符串全称 element（元素）作用 配置控制的元素—表示vue要控制的区域，值为CSS选择器其中的data类型 对象作用 存放要用到的数据，数据为响应式的。 let vm = new Vue({ el:"#select",//获取想要操作的对象 data:{ msg:"zyl", age:18,原创 2020-11-02 18:05:58 · 189 阅读 · 0 评论