Ⅰ Vue基础知识
数据双向绑定，组件化，单文件组件
全局api： vue.extend 、 vue.set 实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项 实例属性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法 指令： directive 内置组件： <components></compontents> 、 <keep-alive></keep-alive> 、 <router-view></router-view>
数组中不可用的方法：slice，concat； 直接修改数组list[i] = 值，不可以这样直接修改； Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值
标签属性和条件渲染 标签属性： v-bind：href='link”; 等效于 :href=”link” 动态绑定； 条件渲染： v-if 、 v-else 、 v-show ； 数据绑定： {{…}} 、 v-html (原始-HTML)、 v-text ；
事件绑定-内置事件绑定，自定义事件绑定 v-on:click=”run” 等效于 @:click=”run” 事件绑定； 自定义事件绑定： 父组件自定义事件 <my-compented @my-event='toggle'></my-compented> 子组件触发 my-event 自定义事件； this.$emit('my-event', opation)； 父组件执行toggle 函数；
计算属性和数据监听 computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；
页面内容响应数据v-once 如果你需要页面内容响应数据的变化，就不加v-once。 如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。 对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。
应用
组件的通信 <p:is = “动态的组件名”></p> 等同于 <动态的组件名></动态的组件名> 动态绑定组件 注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。
子组件 props 接受的两种形式： 数组： ['first-name','two-name'] ，从父组件传递两个属性值； 动态展现： {{firstName}} 对象：
slot：插槽 父组件插件里面定义的内容放到子组件 slot 中：
子组件
vue高级功能–过渡和动画
自定义指令：
使用 vue-cli的优势： 成熟的vue项目架构设计； 本地测试服务器； 集成打包上线方案 webpack
npm install vue-cli -g ：全局安装vue-cli vue init webpack my-project ：初始化项目 npm install 安装项目依赖
npm run dev ：在localhost启动测试服务器； npm run bulid ：生成上线目录（部署）
a、安装 vue-router
b、配置路由
6、关闭eslint dev模式下，默认会做eslint检测，若要关闭，打开 config/index.js ，设置 useEslint: false ，${}占位符，多行字符串
7、生命周期
8、支持es6 es6中很多新特性很好用class、promise、then、catch、…（数组转换符号）、函数设置参数默认值等 a、安装babel-polyfill
b、在入口main.js文件当中引入:
c、找到build文件夹下的webpack.base.conf.js
文章参考： 慕课网-欧米雪儿lyy
Ⅱ 单文件组件和Vue中的路由（页面跳转的实现）
路由就是根据网址的不同，返回不同的内容给用户。 入口文件main.js挂载了app这个挂载点，同时引入App组件和路由。 App.vue组件中使用<router-view>写入了路由，<router-view>使得每个页面显示的是根据路由设置当前地址所对应的内容。 以下为router目录下的index.js文件，文件写明了访问某个路径时显示哪个组件以及组件名是什么。这些组件都需要在文件头的部分进行引入。 在写每个组件的.vue文件的过程中，要在逻辑部分注明它的name，这与router/index.js中申明的组件name保持一致。 在需要实现点击跳转的元素区域使用<router-link :to=" "> to表示跳转到哪个页面，""内的内容按路由文件index.js配置的内容来确定格式。 下图绑定的是动态路由，:to=的内容由两部分组成。用+连接。 注：把<router-link>加到我们需要实现页面跳转的标签外时，会把标签内一些字体颜色改变。这是因为<router-link>默认是个<a>标签。我们可以直接用<router-link>包裹标签，再重新设定字体的颜色，但是其实有更好的方法。如图：把<li>标签直接改为<router-link>，然后在<router-link>内加入tag="li"，这样就可以解决字体颜色变化的问题了。 除了使用上述两种方法，还可以使用router的实例方法实现页面跳转。“ ”中写法与router/index.js中定义的形式保持一致。 用在函数中方式如下：
Ⅲ 解决VScode编写vue 单文件组件各种跳转问题
vue-css-peek Vue Peek vue-helper vue-jumptotag 简单快捷键绑定后可以快速定位到style、template、script标签 F12类名跳转到定义 F12属性跳转到定义 F12方法跳转到定义 视频地址
Ⅳ vue2.0项目上线后，进去后变成如图所视，刷新没用，必须关掉移动端在进去才有用，怎么回事
一、前言之前我们通过nodejs并利用vuecli来创建vue项目，非常方便的就实现了前后端一体化的操作。不过在项目开发的时候为了提高开发效率我们需要依赖于一些插件帮助我们提高开发效率，那么今天我们就来介绍一些优秀的vue插件并且学会如何制作属于自己的插件。二、单文件组件在我们之前讲到的 nodejs轻松创建第一个vue应用中篇，这篇文章的时候，我们创建了一个vue的原生应用，效果如图所示：那么现在我们需要把默认的页面换成其它的vue组件来显示，首先我们创建一个几个js文件，如图：然后创建一个vue组件并设置组件的属性，如图：然后我们将组件添加到入口组件中，如图：此时的test组件就能被应用到该项目的页面中了，我们来启动一下这个应用，如图：此时就实现了页面内容的更新。其实这里是相当于把我们的vue做成了一个单文件组件，之前我们在学习vue的时候，一直都是依赖于html文件存在的，不过如果你是想要在nodejs上运行的话，还可以使用单文件组件，当然，单文件组件是我们极力提倡的写法。三、UI组件我们都知道，前端发展到现在，对于用户的体验和视觉感受都非常重视，因此就出现了很多的UI组件库，比如Elementui、vant、iview、Vuetify、 Mint UI、ant-design-vue等，下面我们将以pc端和移动端为主，分别介绍两款不同的UI组件库给大家认识并且简单的使用一下，来领略下UI组件的魅力吧。1.PC端UI组件 1).ElementUi由饿了么前端团队开源的UI框架，可以说是目前为止最好的桌面端UI组件库了，不仅界面美观，而且极易上手，下面我们来安装一下，首先在项目目录下打开cmd，然后输入命令：npm i element-ui -S静静的等着下载好这个组件库就好了。然后我们将组件引入vue组件中，并对组件的结构进行重构，如图：这样就可以将一些花哨的元素添加进去了。2).Ant Design Vue旨在于开发后台管理系统界面，如下：npm install iview –save安装好了之后还是引入它，然后使用，如图：可以看到，我们可以同时使用多个组件库。3).iview主要用于后端界面的开发，如下：npm install iview –save除此之外，iview weapp也是一款不错的ui框架，不过它主要用于微信小程序开发。2.移动端组件 1).vuetify最先将它是因为他不仅支持移动端而且还支持pc端，做到了多端兼容，而且无需写css就能实现非常美观的界面。首先下载，如下：npm install –save vuetify2).vant下载安装，如下：npm i vant -S3).Mint UI也是饿了么前端团队开发的基于移动端的组件库，首先来下载安装，如图：npm i mint-ui –save四、插件可以看到，我们所使用的每个组件库要想使用，都必须下载，然后在主入口js文件main.js中导入并使用Vue.use这个方法来将该组件库加入到项目中去，已达到全局通用的效果。下面开始我们的插件编写之旅，首先创建一个放置插件的文件夹，然后建立如下文件，如图：以上创建的便是一个插件目录和文件，然后我们来写单文件vue页面，如下：然后我们以模块化的形式导出单页面文件，如图：紧接着我们注册刚才写好的插件，如图：最后我们将其应用在app.vue文件中，如图：此时咱们写的插件就能应用到页面中了，如图：五、总结
Ⅳ vue单文件组件在同一个页面调用，单文件中的点击其他区域隐藏事件
需求：点击.right-box 显示彩虹币浮层，点击其他区域隐藏彩虹币浮层 遇到的问题： 1、点击第一个.right-box，第一个彩虹币浮层显示； 2、点击第二个.right-box，第二个彩虹币浮层显示，第一个彩虹币浮层未隐藏 期望结果： 1、点击.right-box，只显示当前彩虹币浮层，其他彩虹币浮层都隐藏； 2、点击非.right-box区域，所有前彩虹币浮层都隐藏 产生问题的原因： .right-box的点击事件添加了阻止冒泡，点击任何一个right-box，都不会触发全文的点击事件 添加阻止冒泡是因为整个页面添加了点击隐藏彩虹币浮层的事件，如果不阻止冒泡为了让点击彩虹币浮层显示出来， 解决方案： 给全文绑定点击事件时，允许捕获，这样即使点击.right-box也会触发全文的点击事件 父组件： 子组件：
Ⅵ .vue文件结构解析
关于单文件组件 vue 的单文件相当于一个页面中的 组件 ，包含了关于该组件的 html-css-js 文件集合， 这么做的目的有利于项目的管理和整合，官方说法是有 构建步骤 。 在 <template/> 标签下只能有一个子节点元素，如果写多个如 <div/> 这样的标签则会报错， 如下所示: .vue文 件可包含 html-css-js ，webpack自动打包成三个文件？ 在.vue文件中，dom结构可以写在<template/>标签下， 而针对该 dom 结构的样式文件则作为 <template/> 标签的 兄弟 元素 <style/> 存在， 同样的控制该 dom 结构的脚本程序写在另一个兄弟元素 <script/> 之中， 这样一来，每个组件自己对应的结构样式都在同一个文件之中， 便不会与其它的组件搞混了。
Ⅶ Vue 单文件组件 (SFC) 规范
模板
脚本
样式
简介 .vue 文件是一个 自定义的文件类型 ，用类 HTML 语法描述一个 Vue 组件。 每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的 自定义块 。
Ⅷ 为什么我推荐使用JSX开发Vue3
以防万一有的同学实在不看官方文档，我先提一嘴，SFC 就是写 Vue 组件的时候写的.vue文件，这一个文件就是一个 SFC，全称 Single File Component，也即单文件组件。
在开始说我个人的观点之前，我们先来看几个事实：
一是： Vue3 的定义原生支持 JSX，并且 Vue3 源码中有jsx.d.ts来便于使用 JSX。 不知道同学们看到这里会想到什么， 我的第一反应是： 社区对于 JSX 的需求声音是不小的，所以会反向推动 Vue3 官方对于 JSX 的支持。
二是：AntDesign 的 vue3 版本，基本全部都是用 JSX 开发的，而且 Vue3 现在官方的 babel-jsx 插件就是阿里的人一开始维护的， 虽然我向来不喜欢阿里系的 KPI 推动技术方式，而且现在的 JSX 语法支持也不是很符合我的期望，但至少在使用 JSX 开发是更优秀的选择这点上，我还是很认可 AntDesign 团队的。
OK，说这些呢，主要是先摆出一些事实作为依据，让有些同学可以不需要拿什么：
这些观点来批斗我，首先我都会从客观的角度来分析为什么，至少是我是能讲出优劣势的理由的。
OK，前言差不多到这里，接下来咱给您分析分析，为什么你应该选择 JSX 来开发 Vue。
其实第一点就已经是杀手了，对于想要使用 TypeScript 来开发 Vue3 应用的同学来说，这简直就是 SFC 无法克服的世界难题。
一句话概括： TypeScript 原生支持 JSX 语法，而基本无望 TS 官方能支持 SFC 的 template 语法 。
TS 毫无疑问在前端社区的重要性越来越大，但凡未来对于代码质量有一定要求的前端团队，都应该会选择使用 TS 来进行开发。 而且现在基本上在 NPM 上都能看到包你都能找到对应的 TS 定义，现在使用 TS 开发成本已经只剩下 你是不是会 TS 语法了 ，在这种情况下是否支持 TS 则是开发模式在未来走不走的远的重要原因。
目前 SFC 只能通过shim让 TS 可以引入.vue文件，但是对于所有 SFC 的组件的定义都是一样的：
也就是说你引入的 SFC 组件，TS 是不知道这个组件的 Props 应该接收什么的。所以你无法享受到这些 TS 的优势：
当然你会说既然 Vue 官方能开发处 SFC 的语法，自然会支持这些特性。我表示这当然有可能，但是这个难度是非常大的，需要很多方面的支持，甚至可能需要 TS 官方团队愿意协助， 但是我想不到 TS 官方有什么理由来支持 SFC，因为这只是 Vue 自己创建的方言，在其他场景下是没有使用的，TS 是面向全社区的，我觉得他们不会考虑主动来支持 SFC。
那么有同学要问了，JSX 不也是非原生的 JS 语法么，他怎么就能让 TS 官方支持了呢，是不是 FB 和微硬之间有什么 PY 交易？
这就涉及第二点了，JSX 和静态模板的灵活性区别。
很多人弄错了一个问题，就是觉得 SFC 的模板语法和 JSX 是一样的，都是一种别人发明的语法，并不是 JS 原生的。这是事实，但又有一些区别，这个区别主要是体现在对于 JSX 的认知上。
一句话概括： JSX 并没有扩展 JS 的语法，他只是缩略了 JS 的写法！其本质就是 JS 的语法糖
就像 es6 给增加的语法糖，比如
这种写法并没有扩展 JS 的能力，只是简便了写法，JSX 也是一样的。
JSX 其实就是方法调用，他和 JS 是有一对一对应关系的，我们来看一个例子：
这里的 JSX 语法编译之后其实就是：
而 JSX 就是这些了，没有什么更多的内容，所以说 JSX 只是 方便我们写嵌套的函数调用的语法糖 ，而其本身没有扩展任何其他的内容。
但是 SFC 就不一样了。
SFC 定义的不仅是语法，更是文件。
SFC 的具体定义是 单文件组件 ，它本身就是把一个文件看作一个单位，所以他的约束性是要大很多的，你必须具有固定的文件结构才能使用 SFC，这做了很多的限制：
我们一点点来讲
这个说实话非常非常不方便，很多时候我们写一个页面的时候其实经常会需要把一些小的节点片段拆分到小组件里面进行复用（如果你现在没有这个习惯可能就是因为 SFC 的限制让你习惯了全部写在一个文件内）。
React 生态中丰富的 css-in-js 方案就是很好的例子，我们可以通过：
如果我们这个页面需要使用特定样式的按钮，通过这种方式在页面文件里面封装一下是非常常见的。因为没必要把这个组件拆分出去，他也不是一个可复用的组件，拆分出去了还要多一次import。
Vue 生态基本没有 css-in-js 的成熟方案其实跟这个限制也很有关系。
再来一个例子，比如我们封装了一个 Input 组件，我们希望同时导出 Password 组件和 Textarea 组件来方便用户根据实际需求使用，而这两个组件本身内部就是用的 Input 组件，只是定制了一些 props：
在 JSX 中可以非常简单地实现，但是如果通过 SFC，你可能就要强行拆成三个文件，另外为了方便，你可能还要增加一个index.js来导出这三个组件，你能想象这多了多少工作量么。
我不知道有多少同学看过 Vue 的 template 编译出来之后的代码，以我的经验来说看过的可能不会超过 50%（乐观估计），建议同学们如果还不了解的，可以去尝试看一下。
为什么要看这个呢？因为你看了之后你会发现，你在 template 里面写的类似 HTMl 的内容，其实跟 HTML 根本没啥关系，他们也会被编译成类似 JSX 编译出来的结果。
类似这样的结果，而这里面h函数调用的结果就是一个 VNode，是 Vue 中的节点的基础单元。那么既然这些单元就是一个对象，其实理所当然的，他们是可以作为参数传递的。 也就是说，理论上他们是可以通过props把节点当作参数传递给其他组件的。
这个做法在 React 中非常常见，叫做renderProps，并且其非常灵活：
但是因为 SFC 模板的限制，我们很难在 SFC 里面的 props 上写节点：
这样写是不行的，因为 SFC 定义了:header绑定接受的只能是 js 表达式，而 显然不是。
因为通过 props 传递不行，所以 Vue 才发明了 slot 插槽的概念
虽然我们一直再说 Vue 简单，但是事实上ScopedSlots一度成为新手理解 Vue 的噩梦，很多同学都被这个绕来绕去的作用域整的死去活来。
我们看一个ScopedSlots的例子：
这里ctx是Comp里面的属性，通过这种方式传递出来，让我们在当前组件可以调用父组件里面的属性。这简直就是理解的噩梦，但是如果用 JSX 实现类似功能就非常简单：
我们只是给一个叫做scope的 props 传递来一个函数，这个函数接受一个name属性，在Comp里面会调用这个函数并传入name。 简单来说我们传入的就是一个构建节点片段的函数，就是这么简单。
这就是因为 SFC 的模板的限制，导致灵活性不足，Vue 需要去创造概念，创造关键字来抹平这些能力的不足，而创造的概念自然就引入了学习成本。
所以其实我一直不认可 Vue 比 React 好学的说法的，如果你真的认真研究所有用法，并且总是尝试用最合理的方式实现功能，那么 Vue 绝对不会比 React 简单。
这个体现在两个方面，一个是我们定义在全局的一些固定数据如果要在组件内使用的话，就要通过this挂载到组件上。
比如我们缓存了一份城市数据，这种数据基本上是不会改的，所以也没必要挂载到组件上让其能够响应式。但是在 SFC 里面这是做不到的， 因为模板的执行上下文是在编译时绑定。你在模板里面访问的变量，都会在编译时自动绑定到this上，因为模板需要编译，其本身也是字符串不具有作用域的概念。
而这在 JSX 中则不复存在：
另外一个方面则是在组件使用上，在 SFC 中，组件必须事先注册，因为我们在模板里面写的只能是字符串而不能是具体某个组件变量。 那么模板中的组件和真实的组件对象只能通过字符串匹配来实现绑定。这带来了以下问题：
在 JSX 中则没有这些问题，因为 JSX 里面直接使用组件引用作为参数：
其实上面能看出来，除了 SFC 本身的问题之外，Vue 使用字符串模板也会带来很多的灵活性问题。 最直接的证据，就是 Vue 使用了directive来扩展功能（当然这不是 Vue 发明的，老早的模板引擎就有类似问题）。
为什么说directive是不得已的选择呢？因为静态模板缺失逻辑处理的能力。我们拿列表循环举例，在 JS 中我们可以非常方便地通过map函数来创建列表：
而因为 JSX 本身就是函数调用，所以上面的代码和 JSX 结合起来也非常自然：
上面的例子对应到 JS 如下：
这仍然是因为 JSX 只是 JS 的语法糖的原因，所有能在 JS 中实现的在 JSX 里面都能实现。
而 SFC 的模板是基于字符串编译的，其本身就是一段字符串，我们不能直接在模板里面写map来循环节点，（当然我们可以在可以接收表达式的地方写，比如v-on里面）。
那么我们不能循环节点，有需要这样的功能来渲染列表，怎么办呢？就是发明一个标志来告诉编译器这里需要循环，在 Vue 中的体现就是v-for指令。
同学们可能要问了，既然 Vue 能实现v-for，为什么不直接实现表达式循环列表呢？他当然也可以实现，但是他肯定不会这么选，因为成本太高了。 他要这么做就相当于他要实现一个 JS 引擎，而其实里面很多内容又是不必须的，一个v-for其实就能够适用大部分情况了。
但有了v-for就需要v-if，那么后面还会需要其他各种能力，这就是一种方言的产生和发展的过程。
当然指令也不仅仅是 JS 表达式的代替品，其本身也是增加了一些其他能力的，比如它能够让我们更方便地访问 DOM 节点， 但是嘛，我们用框架的理由不就是为了能够尽可能的屏蔽 DOM 操作嘛
以上就是我对应该选择使用 JSX 还是 SFC 进行开发的分析，其实归根到底 SFC 的问题在于其没有拥抱 JS， 他的语法是自己发明的，他需要有一个 JS 实现的 compiler 来让其最终能在 JS 环境中运行，这本质上就是一种发明， 我们不能否认发明确实有优点，但我们也不能只看有点不看问题，没能拥抱 JS 自然就很难完全复用 JS 社区的优势 而 JS 社区一直在蓬勃发展，好用的工具一直在涌现， 而 SFC 想要使用 JS 社区的这些工具还要自己再实现一份 ，我们可以细数以下 SFC 做了哪些兼容
基本上常用的工具我们都需要等待 Vue 社区或者官方开发了插件之后才能运行。而 JSX 因为有 babel 和 typescript 的官方支持， 基本上所有新的 JS 生态工具原生都是支持的。
在这 Vue3 开始预备发力的阶段，我们还是希望 Vue 社区能够使用更优秀更规范的方式来进行开发， 其实如果我们直接使用 JSX 开发 Vue3，我们会发现很多时候我们都不需要用到emit、attrs这些概念， 甚至如果 Vue3 的 JSX 插件支持，我们甚至能够抛弃slots。
但是因为 Vue3 一定要考虑兼容 Vue2，导致本身潜力很好的 Vue3 总是显得缩手缩脚，这不得不说是一种遗憾。
Ⅸ vue为什么要求组件模板只能有一个根元素
1.new Vue({el:'#app'}) 2.单文件组件中，template下的元素div 一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口： 同时我们也会在body里面新增一个id为app的div 这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样 Vue其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个‘Vue类'，Vue需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到dom中。 如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类'。 二、当我们在webpack搭建的vue开发环境下，使用单文件组件时，你可能会这样： 那这里为什么template下也必须有且只能有一个div呢？ 这里我们要先看一看template这个标签，这个标签是HTML5出来的新标签，它有三个特性： 1.隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态； 2.任意性：该标签可以写在页面的任何地方，甚至是head、body、sciprt标签内； 3.无效性：该标签里的任何HTML内容都是无效的，不会起任何作用； 但是呢，你可以通过innerHTML来获取到里面的内容。 知道了这个，我们再来看.vue的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容，导致结果又回到了开始 ：既然一个.vue单文件组件是一个vue实例，那么这个实例的入口在哪里？ 如果在template下有多个div，那么该如何指定这个vue实例的根入口？ 为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。 通过这个‘根节点'，来递归遍历整个vue‘树'下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置 那么这个入口，就是这个树的‘根'，各个子元素，子组件，就是这个树的‘枝叶'，而自然而然地，这棵‘树'，就是指一个vue实例了。
Ⅹ vue单文件组件通常是如何调用实例方法的
Vue父组件向子组件传递事件/调用事件 不是传递数据（props）哦，适用于 Vue 2.0 方法一：子组件监听父组件发送的方法 方法二：父组件调用子组件方法 子组件： export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }， methods { callMethod () { console.log('调用成功') } } }父组件： <child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }以上这篇Vue父组件调用子组件事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。 您可能感兴趣的文章:VUEJS 2.0 子组件访问/调用父组件的实例vue.js中父组件调用子组件的内部方法示例ES6下子组件调用父组件的方法(推荐)
