qq_42238554的博客

1.兄弟组件传值使用 $on(event,callback) 监听事件使用 $emit(event, […args]) 触发事件现有子组件a.vue,b.vue，它两是平级，现在要让a组件给b组件传值，a组件中的按钮点击，改变b组件中的值。第一步：新建一个bus.js,并把该js分别引入到a,b组件中//bus.js代码如下import Vue from 'vue'const bus=new Vue();export default bus使用如下方法分别引入到a,b组件中：<s

子组件可以使用 $emit,让父组件监听到自定义事件 。vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数vm.$on( event, fn );//监听event事件后运行 fn；一、$emit语法1、this $emit（‘自定义事件名’,要传送的数据）；2、触发当前实例上的事件，要传递的数据会传给监听器；实例1：父子组件中各有一个按钮，可以同时操作city在子组件中定义一个city变量，点击按钮可以修改city的值<templa

1.注册全局组件全局组件可以在任何地方使用，而且不需要进行在单独页面注册。使用方法：第一步：在components文件夹下面建了两个vue组件页面。第二步：在plugin中建一个common.js文件，这个相当于是一个公用js专门用来存储导入的公用组件。代码如下：//把dialog和message组件都导入，install安装并注册组件import dialog from '@/components/dialog.vue'import message from '@/component

beforeCreate执行beforeCreate事件钩子；注意：在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。created事件钩子开始执行实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常

filters过滤器filters是一个对象，在vue中的表达式如下：filters:{ fun1(v) { ...处理逻辑 return 返回处理后的值; }, fun2(v) { ...处理逻辑 return 返回处理后的值; },}Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

webpack打包编译我们可以使用npm run build进行编译项目，生成文件，生成后的文件才可以上传到服务器上被服务器识别。如下操作，我们输入npm run build进行编译。编译成功后，我们在文件夹目录中会发现多了一个dist文件夹，里面就是我们编译后的文件，可以直接把这个文件放到服务器中。...

1.注册公用组件第一种方法（推荐）在main.js中导入，然后注册，代码如下：//导入tableimport table from './components/table'//Vue全局注册tableVue.component('table',table);注册全局组件后，可以再任何页面调用。第二种方法注册公用组件，注册后可以在任何页面使用，而不需要在每个页面重新import导...

Vuex 是什么一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如下一个简单的单一vue页面，我们可以分别把它看作state,view,actions。state部分就相当于数据源，它要显示到view模块，actions部分相当于用户的一些操作使state数据源发生改变，改变后再映射到view中![在这里插入图片描述](https://img-blog.csdnimg.cn/2021012618075484

v-for列表循环v-if，v-show（条件渲染，显示或隐藏）v-on事件处理（监听事件，事件修饰符）v-model表单绑定，在组件上使用v-modelvue函数(computed，methods，watch，created)组件：（1）组件注册（2）组件传值路由class和style用法vue3.0vue transition过渡效果计算属性：computed侦听属性：watch动态样式：Class与Style绑定条件渲染：v-if,v-else,v-show.

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:（下列条件如果有变化就会产生transition过渡效果）条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点vue官方动画网址：https://animate.style/调用地址：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/

1.如果之前装过vue，可以查看当前vue的版本：（1）第一步：vue -V 命令可以查看我当前vue的版本（2）第二步：升级vue，使用命令：npm install -g @vue/cli 注意：如果报错没权限，可以在npm前面加sudo.如下：我用如下命令开始升级：此时页面报错，说我没有权限。（注：我用的是MAC电脑）然后我输入下命令就好了：安装成功后显示这样：此时我们再看一下vue版本：成功升级！！！(3)第三步：初始化项目,创建一个vue-test的项目:出现如下界

目的：1、父子组件之间可以相互修改数据。自定义组件v-model一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框，复选框等类型的输入控件可能会将value特性用于不同的目的。v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后做了两个操作：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件例如,在原生表单元素中：相当于：v-model用于自定义组件中，应该使用以下操作：1.接收一个value

aaa

class和style是元素的属性，我们可以使用v-bind来处理他们，使用v-bind表达式的结果类型可以是字符串，对象，数组。1.传递一个动态对象例如，我们可以给v-bind:class一个对象，动态的切换class:&lt;template&gt; &lt;div&gt; &lt;p :class="{fontColor:isStyle}"&gt;显示文字，你好，世界！&l...

1.计算属性计算属性例子：&lt;template&gt; &lt;div&gt; &lt;p&gt;消息内容：{{message}}&lt;br&gt;转换后的内容{{reMessage}}&lt;/p&gt; &lt;/div&gt;&lt;/template&gt;&lt;script&gt;export default { data() {

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

(1) v-if完整语法如下：&amp;lt;h1 v-if=&quot;ok&quot;&amp;gt;是&amp;lt;/h1&amp;gt;&amp;lt;h1 v-else&amp;gt;否&amp;lt;/h1&amp;gt;上述例子中，当ok时true时，显示第一个h1的内容，当ok为false时，显示第二个h1的内容。可以再元素上使用v-if条件渲染分组：因为 v-if 是一个指令，所以必须将它添加到

（1）v-for用 v-for 把一个数组对应为一组元素，我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。v-for迭代一个数组如下，我们要做一个列表渲染：&amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;div class