qq_42835776的博客

this.$router.push({path:"/",query:{id:111,name: xiaoming}})前进：this.$router.go(1)后退：this.$router.go(-1)

初始化赋了空值

绑定v-model,设置true-label="1"false-label="0"后台传数据绑定值为“1”，即可选中

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">ref="multipleTable"定义好this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK

插槽内可以包含任何模板代码，包括 HTML：<navigation-link url="/profile"> <!-- 添加一个 Font Awesome 图标 --> <span class="fa fa-user"></span> Your Profile</navigation-link>甚至其它的组件：<navigation-link url="/profile"> <!-- 添加一个图标

通过 Prop 向子组件传递数据监听子组件事件

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期vue的生命周期里边有八个生命周期钩子函数分别是beforeCreat() 创建前created（）创建beforeMount()挂载前mounted（）挂载beforeupdate（）更改前updated（）更改beforeDestroy()销毁前destroyed（）销毁created数据data已经初始化完成，方法也已经可以调用，但是DOM...

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.jsVue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用v-if) 条件展示 (使用v-sh...

条件渲染: v-if<div v-if="testShow">非常好</div>testShow=true;显示非常好testShow=false:不显示v-else;作为与v-if相反的判断<div v-if="testShow">非常好</div><div v-else>好</div>testShow=true;显示非常好testShow=false;显示好v-else-if:多条件判断<div v-if=

<div v-show="testShow">火星<div>testShow=true:火星testShow=false:不显示

true；falsev-if:开始false时，直接不进行渲染，即开发者工具无法查看，v-if开始true时，将内容改为不显示，将其在DOM中去掉v-show:若设置为false，则将其隐藏，从开发者工具可以看出设置属性display:none,仍然渲染在DOM上应用场景；v-if:常用于只渲染一次v-show:需要反复频繁切换用v-show...

列表渲染:v-for<li v-for="item in dataBase">{{item}}</li>data:{dataBase:[一，二，三，四，五]}<li v-for="item in dataBase">{{item.message}}</li>data: {dataBase: [{message:语文}，{message:数学}]}循环索引<li v-for="item,index in da

<span>message:{{msg}}</span><span v-once>message:{{msg}}</span>当msg数据改变时，内容不会改变。一次性插值双括号解析为普通文本，而非html<span v-html="msg"></span>使用v-html指令，输出真的html<button v-bind:disabled="isButtonDisabled">Button</butto

常用取逆，多次获取时效率低<div id="example"> {{ message.split('').reverse().join('') }} </div>计算属性<div id="example"> <p>Original message: "{{ { message.split('').reverse().join('') }} }}"</p><p>Computed reversed message: "{{

watch侦听器<div id="demo">{{ fullName }}</div>var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + t.

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：// ...computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ')

我们可以传给v-bind:class一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div>上面的语法表示active这个 class 存在与否将取决于数据 propertyisActive的truthiness。你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class指令也可以与普通的 class attribute 共存。当有如下模板：<...

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}直接绑定到一个样式对象通常更好，这会让模板更清晰：<div v-bind:style="styleObject"></div>data: { styleObject: { color:.

App.vue写入<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div></template><script> export default { name: 'App', provide () { //父组件中通过provide来提供...

@click;触发事件，调用方法事件修饰符；.stop .prevent .capture .self .once .passive<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --&gt.

v-model;v-model会忽略所有表单元素的value、checked、selectedattribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。单个复选框，绑定到布尔值：<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label&g...