vue
关注
分享
扫一扫
詩酒趁年华
这个作者很懒，什么都没留下…
展开
-
个人笔记-----vue组件基础（ 一 ）创建和使用【如有不对，欢迎指正】
所有组件都存放在 components 中首先要在页面中引入组件，然后再注册组件在页面中引用组件在js中进行注册组件使用组件原创 2019-04-12 14:56:17 · 157 阅读 · 0 评论 -
个人笔记-----Vue中作用域插槽【如有不对，欢迎指正】
子组件向父组件传递数据，在子组件中设置一个通过 slot 传递数据的属性，<slot :list='list'></slot> :list是自定义属性，父组件中依然需要先引入子组件，然后注册，最后再引用，接收子组件的标签的 template，是一定要写的，一定要写在字标签里面。接收子组件数据用slot-scope=“变量”，这个变量可以自定义，变量里面存储的是子组件向父...原创 2019-05-01 12:56:00 · 257 阅读 · 0 评论 -
个人笔记-----Vue中 设置404页面【如有不对，欢迎指正】
首先创建一个404页面的文件，然后再router里面设置， path: '*',import Error from './views/Error.vue' { path: '*', name: 'error', component: Error },原创 2019-05-01 13:18:03 · 5581 阅读 · 0 评论 -
个人笔记-----Vue中路由里的钩子函数【如有不对，欢迎指正】
路由里的钩子函数有两个，beforeRouteEnter和beforeRouteLeavebeforeRouteEnter是进入…之前，next(true)必须要写，要进入哪个页面就写在哪个页面里面。beforeRouteLeave是离开…之前， next(true)必须要写，要离开哪个页面就写在哪个页面里面。写在页面中，这是要about页面，<script> expo...原创 2019-05-01 14:35:47 · 394 阅读 · 0 评论 -
个人笔记-----Vue中构造函数进行页面跳转【如有不对，欢迎指正】
methods: { next(){ this.$router.go(1); //前进 }, goback(){ this.$router.go(-1); //后退 }, href(){ this.$router.push('/about') ...原创 2019-05-01 14:58:42 · 178 阅读 · 0 评论 -
个人笔记-----Vue中子路由的配置【如有不对，欢迎指正】
router.js 文件的 children 里的 path 的路径不能加 /， 因为不是根目录下的，about文件里的 to 属性要有父级路径，<router-link to="/about/about1">about1</router-link><template> <div class="about"> 这是About文件 ...原创 2019-05-01 16:09:56 · 662 阅读 · 0 评论 -
个人笔记-----Vue中的router-link标签参数传递【如有不对，欢迎指正】
router-link标签的 to 属性的值 既可以是 router.js 里面 pash 值 ，<router-link to="/about">about</router-link>也可以是 router.js 里面 name 值 ，<router-link to="about">about1</router-link>也可以这样写<r...原创 2019-05-01 16:46:45 · 507 阅读 · 0 评论 -
个人笔记-----Vue属性绑定，双向数据绑定，ref获取dom节点【如有不对，欢迎指正】
绑定属性v-bind: 可简写 ： 需要绑定标签已有属性，例如 class，style，title，url...等等<div id="root"> <div v-bind:title="title">hello world</div></div><script> new Vue({ el:"...原创 2019-05-09 22:40:34 · 678 阅读 · 0 评论 -
Vue中this指向的问题
在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值，而箭头函数的this指向了window，不能获取到值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume...转载 2019-05-09 22:43:46 · 6929 阅读 · 2 评论 -
个人笔记-----Vue怎么玩，Vue就是这么玩【如有不对，欢迎指正】
请求数据请求数据后在 <ul> 标签中渲染出来，先定义一个空的数组 list:[] ，然后循环这个空数组 <li v-for="(item,index) in list" :key="index">{{item}}</li> ，再给list:[]这个空数组赋值，先用 for 循环模拟下，再使用 this.list.push() 进行赋值。<bu...原创 2019-05-10 12:51:33 · 421 阅读 · 0 评论 -
个人练习----Vue案例--toDoList（ 必须会，用到的地方很多 ）【如有不对，欢迎指正】
1，首先完成一个添加删除的功能，已有。 添加删除数据2，模拟数据，在list数组中模拟数据，也可以为空。list:[ {title:'进行中',checked:true}, {title:'已完成',checked:false}]3，在 data 中添加状态 checked:true ，通过更改状态来完成需求，3，在数据前面添加多选按钮，再使用 v-model 进行双向...原创 2019-05-10 21:19:30 · 631 阅读 · 0 评论 -
v-loading
https://blog.youkuaiyun.com/qq_36437172/article/details/83618051转载 2019-05-30 10:39:33 · 2002 阅读 · 0 评论 -
VUE tabs切换
每次切换给后台传递一个状态 region<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in type_option" :key="index" :name="item.optValue.toString()" ...转载 2019-06-19 19:51:13 · 4550 阅读 · 1 评论 -
vue 中 show-overflow-tooltip 不生效
<el-table-column prop="company_cost_price" label="公司成本价" width="" show-overflow-tooltip> <template slot-scope="scope"> <span>{{ scope.row.cost_frame }}</span...原创 2019-06-11 22:42:33 · 12691 阅读 · 4 评论 -
vue中watch的详细用法
在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<input type="text" v-model="cityName"/>new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName,...转载 2019-07-08 19:04:30 · 240 阅读 · 0 评论 -
个人笔记-----Vue中 slot 插槽【如有不对，欢迎指正】
根组件数据在子组件中展示，在根组件中引入子组件，然后再子组件中用<slot></slot>直接就可以展示根组件的数据，单个插槽 根组件 <about> <div>00000000</div> </about> <script> import About from './views...原创 2019-04-29 18:42:34 · 134 阅读 · 0 评论 -
个人笔记-----Vue实例方法set【如有不对，欢迎指正】
set 有三个参数 target，key，valuetarget ：要么是对象，要么是数组，包含对象的数组都可以，key ：如果是对象的情况下，这个key就是键名，他是一个字符，要加 ‘ ’ ，如果是数组的话，就是他的索引，value ：是我们想改变的值。如果用索引直接赋值 vue 是检测不到的，数组的情况<script> export default { da...原创 2019-04-29 17:42:44 · 132 阅读 · 0 评论 -
个人笔记-----vue组件基础（ 二 ）父组件传值给子组件【如有不对，欢迎指正】
为什么会引出这样的问题呢？1，子组件的数据是动态的。2，子组件是不可以直接引用父组件的数据的。父组件向子组件传值，（ 父组件向子组件传递数据时候，字符串，数字，方法都可以。）1，在父组件页面的子组件标签里 设置一个动态属性（:tit=""），将父组件的数据存储到这个属性（:tit=""）中,2，在子组件里面接受这个属性的数据，然后展示在子组件,用 porps 来接收，porps是一个数...原创 2019-04-12 16:16:56 · 143 阅读 · 0 评论 -
个人笔记-----vue组件基础（ 二 ）子组件传值向父组件【如有不对，欢迎指正】
下图为父组件下图为子组件原创 2019-04-26 16:39:01 · 274 阅读 · 0 评论 -
个人笔记-----父子组件主动获取数据和方法（ ref ）【如有不对，欢迎指正】
ref属性 用来给元素引用信息的。一，父组件主动获取子组件数据和方法<div> <counter ref="counter"></counter></div>这是父组件中引用子组件用# $refs 获取数据和方法并使用this.$refs.counter.msgthis.$refs.counter.todo()data(...原创 2019-04-26 18:29:42 · 263 阅读 · 0 评论 -
个人笔记-----非父子组件的通信【如有不对，欢迎指正】
1，创建一个公共的实例文件（VueEvent.js），作为中间仓库来传递数值，2，想从 A 组件获取 B 组件数据，在A 组件先引入空文件，在 B 组件先引入空文件，然后在触发事件中将数据发送出去，然后在 A 组件中用 $on 方法来获取数据，3，在公共文件中先引入 Vue import Vue from 'vue'对 Vue 进行实例化叫 VueEvent var ...原创 2019-04-27 21:13:16 · 133 阅读 · 0 评论 -
个人笔记-----Vue中url传参【如有不对，欢迎指正】
url传参url传参主要分三个步骤，1，在router.js中进行配置2，<router-link>标签里面的 to 属性里面进行参数传递，3，在页面里面接收这个参数，例：给about页面传参在router.js文件里about 下面的path里面进行，比如像传递id和title，要用:id 和 :titlerouter.js文件-------------routes...原创 2019-05-01 17:16:48 · 359 阅读 · 0 评论 -
个人笔记-----Vue中多个router-view应用【如有不对，欢迎指正】
单个 <router-view/> 和多个 <router-view/> 的区别，单个 <router-view/> 只是一个区域的变化，不需要设置name属性，在设置路由的时候单个<router-view/>使用的是component，多个<router-view/>里面需要设置一个name属性，设置路由的时候单个<route...原创 2019-05-02 20:37:27 · 4982 阅读 · 0 评论 -
个人笔记-----Vue中transition的过渡作用和transition-group【如有不对，欢迎指正】
<transition>标签有两个属性，name 属性和 mode 属性。transition里的 name 值fade 就是 .fade-enter-active,类名开头的 fade<transition name="fade" mode="out-in"> <router-view/> <router-view class="left...原创 2019-05-02 21:15:07 · 4595 阅读 · 0 评论 -
个人笔记-----Vue中与后台通信axios【如有不对，欢迎指正】
安装 axiosnpm install axios --save-devmain.js中的Vue.config.productionTip = false 设置 false 以阻止 vue 在启动时产生提示。然后再 main.js 中引入，import axios from 'axios'，然后再Vue实例对象中进行注册，//实例化vue对象new Vue({ router,...原创 2019-05-02 22:23:21 · 343 阅读 · 0 评论 -
个人笔记-----Vuex创建store.js和使用【如有不对，欢迎指正】
store.js相当于一个共享库，把很多共享的数据存放在这个store.js中，其他页面想取用，需要到store.js这个页面中取用，如果想改变数据也需要到store.js中修改数据。创建store.js需要以下几步:1，在src下面新建一个vuex文件夹，2，在vuex创建store.js，3，在store.js中引用vue和vuex，并且使用vuex，4，定义数据，在State里面进...原创 2019-04-28 18:11:31 · 2558 阅读 · 0 评论 -
个人笔记-----Vuex创建store.js和使用（ 2 ）【如有不对，欢迎指正】
1，在store.js中引用vue和vuex，并且使用vuex，import vue from 'vue'import vuex from 'vuex'2，使用vuex Vue.use(Vuex)3，创建store实例 const store = new Vue.Store({ })const store = new Vue.Store({ state:{ c...原创 2019-04-29 16:09:17 · 476 阅读 · 0 评论 -
个人笔记-----Vue中watch和computed的区别【如有不对，欢迎指正】
watch和computed的用法有点相近，watchcomputed第一个区别computed 里的fullName他是一个自定义属性，他不能个 data 里面的属性有重复的情况，如果有重复的情况会报错。而 watch 里面的fullName的属性必须是已经存在的，这个属性要么的 data 里面的，要么的 computed 里面的。第二个区别computed定义的这个属性函数里面需...原创 2019-04-29 16:58:18 · 195 阅读 · 0 评论 -
Vue 表单验证报错 -- Cannot read property 'validate' of undefined
把下面的$refs和表单ref名字保持一致就行了。ref="loginForm"this.$refs.loginForm.validate(valid => { })原创 2019-06-29 10:32:09 · 8824 阅读 · 0 评论