qq_43137725的博客

最近在写路由的时候会忘记，在这里记个笔记吧。一、路由传参路由可在跳转的时候传参。有两种传参的方式：query：它的参数，是拼接在url后面的http://localhost:8080/#/test?name=zm&age=18 this.$router.push({ path: '/test', ...

什么是beforeEach？ beforeEach 是一个vue-router的路由导航钩子，一般我用它做路由守卫。什么是路由守卫？ 举个例子，当我们没有登录的时候，跳转到登录页面。如果登录了，则正常跳转。下面我们来看下死循环代码。export const router = new Router(RouterConfig);router.beforeEach((to, from, nex...

在commonCss文件夹中新建base.less@primary-color: red;.box { h1 { color: @primary-color; }}在App.vue中引入<style lang="less"> @import "./commonCss/base.less";</style>...

html<script src="js/vue.js"></script><script src="js/vuex.js"></script>nodenpm init -ynpm i vue vuex --savenode demo.jsconst Vue = require('vue');const Vuex = require...

配置路由需要引入 vue-router<div id="app"> // a标签使 hash跳转 必须前面加一个#标记 <a href="#/login">登录</a> <a href="#/register">注册</a> //a标签的简写形式 <router-link to="/logi...

父向子传值:通过props传值 <my-component :msg="msg"></my-component> //子组件 Vue.component('my-component', { template: '#broTem', props: { 'msg':String }, created() { ...

watch: { msg: { //初始化的时候执行一次 immediate: true, handler: function (oldValue, newValue) { console.log(oldValue, newValue); ...

is属性有组件 myCom1 和 myCom<div id="app"> <input type="button" @click="changeIt"> <component :is="name"></component></div> changeIt() { this.name= this.name =...

三个数字会同时增长<div id="app"> <my-com></my-com> <my-com></my-com> <my-com></my-com></div>var msg = { count: 0};Vue.component('myCom', {...

<div id="app"> {{msg}} <input type="text" v-model="msg"></div>new Vue({ el: '#app', data: { msg: 'msg' }, methods: { ...

第一个参数是定义指令的名字，第二个参数是一个对象。这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作 Vue.directive('focus', { // 只调用一次，指令第一次绑定到元素时调用。 bind: function (el) { // 和JS样式有关的操作，最好在 bind中去执行 /...

在循环绑定的数组上做过滤 <tr v-for="(item,index) in filterData()" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item....

var demo = new Vue({ el: '#app', data: { objects:{ name:'zm', age:'18' } }, methods: {}});<p v-for="(item,index) in objects">{{item}}==={{index...

修改input的值，页面上{{msg}}不会改变，v-bind只能从 M -> V，不能从V -> M<div id="app"> {{msg}} <input type="text" :value="msg" width="100%"></div>如果使用v-model，则可以实现数据的双向绑定<div id="ap...

运用事件修饰符 .prevent 阻止默认行为 <a href="https://www.baidu.com/" @click.prevent="aClick">点我</a>以此类推运用事件修饰符 .stop 阻止冒泡只执行 start 不执行 end<div id="app" @click="end"> <input type="bu...

属性的数据绑定用到v-bind指令 <input type="text" title="我是title">将title属性抽离为变量，标签无法识别为title属性绑定的是字符串还是变量，所以用v-bind来做区分。v-bind 将冒号里的东西当作js代码来解析，这样msg则成为一个变量： <input type="text" :title="msg">如果想在...

v-html它与其它二者最不同的地方，是它可以识别字符串的标签，自动将其解析为标签。注：msg会覆盖div之间的值<div v-html="msg"></div>let vm = new Vue({ el: '#app', data: { msg: '<h1>你好</h1>' },});v-te...

添加 transfer 属性即可。

三个下拉框实现互斥的功能，选中一个值清空其他组件的值。为三个下拉框绑定同一个on-change事件，发现选中的时候总是出bug。代码如下 clearTjlx(state, val) { if (state == 'gcjy') { this.$set(this.searchData, 'zbbaTjlx', '');...

页面初始化时，html会出现短暂的 {{}}，再加载页面。原因：html页面加载时先构建dom，再加载vue。在vue初始化完成前，dom将{{}}代码解析为文本，在vue初始化后 才会把{{}}解析成vue的语法。此时列表渲染会有短暂的一闪的情况。解决：使用template标签将需要渲染的 html 包起来。...

columns1: [ { type: 'selection', width: 60, align: 'center' }, { ...

<template> <h1>{{nowTime|transTime}}</h1> <date-picker type="date" placeholder="Select date" v-model="nowTime"></date-picker> </template>...