整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者 | 红颜祸水nvn
责编 | 唐小引
出品 | CSDN 原力计划
1. 什么是 MVVM？
MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。
2. 父组件向子组件传值的方法？
父组件传递的数据子组件用 props 方法接收。
子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）
props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}
详细介绍看这篇：Vue 父组件向子组件传值
https://blog.csdn.net/qq_34928693/article/details/80539350
3. 子组件向父组件传值的方法？
子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。
详细介绍看这篇：Vue子组件向父组件传值
https://blog.csdn.net/sisi_chen/article/details/81635216
4. Vuex 是什么？哪种功能场景使用它？
Vuex 是专门为 Vue.js 设计的状态管理模式，它采用集中式储存管理 Vue 应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
当项目庞大的时候使用它：
需要动态的注册响应式数据；
需要命名空间 namespace 来管理组织我们的数据；
希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。
5. Vuex 有哪几种属性？
state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。
6. 如何让 CSS 旨在当前组件中起作用？
当前组件的 < style>标签修改为< style scoped>
7. 请列举出3个 Vue 中常见的生命周期钩子函数。
beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。
created：vue 实例的数据对象 data 有值了，$el 没有。
beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。
mounted：vue 实例挂载完成，data.filter 成功渲染
beforeUpdate：data 更新时触发。
updated：data 更新时触发。
beforeDestroy：组件销毁时触发。
destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。
8. Vue 生命周期总共有几个阶段？
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
9. 说出至少 4 种 Vue 当中的指令和它的用法？
v-html：渲染文本（能解析 HTML 标签）
v-text：渲染文本（统统解析成文本）
v-bing：绑定数据
v-once：只绑定一次
v-model：绑定模型
v-on：绑定事件
v-if v-shou：条件渲染
10. vue-cli 工程中常用的 npm 命令有哪些？
npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令
11. 请说出 vue-cli 工程中每个文件夹和文件的用处。
build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。
node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。
src文件夹 ：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。
其他文件：定义的一些项目信息，说明等等。
12. vue-router 路由的两种模式。
hash 模式：
# 后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。
history 模式：
利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
13. 如何解决 Vue 中的 ajax 跨域问题？
找到 config 文件夹中的 index.js 文件：
修改 proxyTable: {
'/api':{ //使用 /api 来代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改变源
pathRewrite:{
'^/api':'http://localhost:8082' //路径重写
}
}
},修改完之后的跨越请求就可以直接写成 /api/login 等等了。
14. Vue 打包命令是什么？Vue 打包后会生成哪些文件？
npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。
15. Vue 如何优化首屏加载速度？
异步路由加载
不打包库文件
关闭 sourcemap
开启 gzip 压缩
16. scss 是什么？
SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。
17. axios 是什么？怎么使用？
axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现
特定：
可以在浏览器中发送 XMLHttpRequest 请求
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应
转换请求数据和响应数据
能够取消请求
自动转化 JSON 格式
客户端支持保护安全免受 XSRF 攻击
如何使用：
npm install --save axios 安装axios
在入口 main.js 中导入 axios
import Axios from 'axios'
Vue.propertype.$axios = Axios;使用 axios 发送 get 请求
this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。
var params = new URLSearchParams;
params.append('name','孙悟空');
params.append('age',22);
let that = this;
this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
console.log(resp.data.users);
that.ausers = data.data.users;
}).catch(function(err) {
console.log(err);
});18. vue-router 是什么？它有哪些组件？
vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由、是图标
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的连接
HTML 5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
vue-router 组件：
< router-link to=""> 路由的路径
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的显示
19. 怎么定义 vue-router 的动态路由？怎么获取传递过来的动态参数？
在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。
20. MVVM 和其他框架 （jQuery）的区别是什么？哪些场景适合？
Vue 是数据驱动，通过数据来显示视图层而不是节点操作。
处理数据交互的时候挺适合 MVVM 设计模式的。
本文为CSDN博主「红颜祸水nvn」的原创文章，CSDN 官方经授权发布。
原文链接：https://blog.csdn.net/qq_43647359/article/details/104774302
欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。
☞比尔·盖茨退出微软公司董事会；苹果 WWDC、微软 Build 大会均改为线上举办；Rust 1.42.0 发布| 极客头条
☞11 国股市熔断，“祸及”程序员？！
☞2.2版本发布！TensorFlow推出开发者技能证书
☞Soul App 高管被捕，恶意举报导致竞品被下架
☞2020 年最新版 68 道Redis面试题，20000 字干货，赶紧收藏起来备用！
☞最近一个名为 BTCU 的比特币分叉，准备用新分叉解决比特币网络的旧问题
为一名Vue.js的忠实用户，我想有必要写点文章来歌颂这一门美好的语言了，下面将给大家介绍Vue.js，希望能够激发你对Vue.js的兴趣。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
我喜欢 Vue 的一点是它吸取了其它框架的优秀之处，并有条不紊的将它们组合在一起。 比如:
Vue 相比其它框架的优势有: 简洁，提供更多语义化的 API ， 比 React 的表现稍好，不像 Polymer 那样使用 polyfill，相比 Angular 有独立的视图。
在对Vue.js 有初步的认识的情况下，我们来说说今天的重点吧：Vue.js教程：渲染，指令，事件。
首先，当然是从 "Hello, world!" 的例子开始啦。运行如下示例：
如果你熟悉 React，你会发现两者有很多相同之处。通过 mustache 模板以及使用一个变量，可以避免在内容中使用 JavaScript，但是不同的一点是我们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用，但是我无需再花时间把 class 改成 className，等等。这样启动及运行会更轻量。
现在尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。
假如有一组元素，类似导航条，我打算重复利用。合理的做法是放在数组中动态的更新。使用普通的 JS (需要 Babel) ，我们会这样做: 创建一个数组，然后创建一个空字符串，用来存放使用 <li>包裹的元素，再用 <ul>包裹所有内容，使用 innerHTML 方法添加到 DOM 中：
这种方法是可行的，但是有点麻烦。现在试一试 Vue 的 v-for循环：
非常简洁。如果你熟悉 Angular，你对此应该不陌生。我发现这种条件渲染的方式简单明了。如果你需要更新内容，修改起来也很简单。
另外一种好的方式是使用 v-model 进行动态绑定。试试下面的例子：
在这个 demo 中你会注意到两点。首先，可以直接向书中打字并且动态更新文本。Vue 通过 v-model非常方便的实现了 <textarea>和 <p>的数据绑定。
其次，你可能注意到我们将数据放在了函数中。在这个例子中，不这样做也可以。我们可以和之前的例子一样放在一个对象中。但是这种方式只能在 Vue 实例中使用，在程序中也是如此 (所以，在组件中不要使用这种方法)。在一个 Vue 实例中这样使用是可以的，但是我们需要在子组件中分享数据。最好一开始就把数据放在函数中，因为使用组件时我们希望每个组件都有自己的状态。
并不是只有简单的输入绑定，甚至 v-if可以用 v-show替换，有 v-show的元素不是销毁或重建组件，而是始终保持在 DOM 中，切换可见性。
Vue 提供了很多指令, 下面是我经常使用的一些指令。很多指令都有缩写，所以我会一起列出来。在之后的教程中，我们主要使用指令缩写，所以最好先熟悉一下下面的表格。
也有非常好的事件修饰符和其他 API：
加快开发的方法：
你也可以 自定义指令。
我们会在稍后的例子中使用这些方法!
数据绑定虽然很好，但是没有事件处理也无法发挥更大的用途，因此接下来就试一试! 这是我喜欢的一部分。我们将使用上面的绑定和监听器来监听 DOM 事件。
在应用程序中有几种不同的方法来创建可用的方法。比如在普通的 JS 中，你可以选择函数名，但是实例方法直观地称为 methods！
我们创建了一个名为 increment的方法并且你会注意到函数自动绑定了 this，会指向实例及组件中的 data 。我喜欢这种自动绑定，不需要通过 console.log查看 this的指向。 我们使用缩写 @click绑定 click 事件。
Methods 并不是创建自定义函数的唯一方式。你也可以使用 watch。两者的区别是 methods 适合小的、同步的计算，而 watch对于多任务、异步或者响应数据变化时的开销大的操作是有利的。我经常在动画中使用 watch 。
让我们看看如何传递事件并且进行动态地样式绑定。如果你记得上面的表格，你可以使用 :来代替 v-bind，因此我们可以很简单地通过 :style以及 传递状态，或者 :class绑定样式 (以及其他属性)。这种绑定确实有很多用途。
在以下的例子中，我们使用 hsl()，因为 hue calculated as a circle of degrees of color，所以每一个位置都有色值。这种方法很有用，因为任何数值都有效。因此，当我们在屏幕上移动鼠标，背景颜色将相应更新。我们使用 ES6 模板字面量。
你应该看到我们甚至不需要传递 @click事件，Vue 将它作为方法的参数(这里显示为 e)自动传递。
此外，原生方法也可以使用，比如 event.clientX，并且很容易关联 this实例。在元素的样式绑定中，CSS 属性需要使用驼峰命名。在这个例子中，你可以看到 Vue 的简单明了。
实际上我们甚至不需要创建一个方法，如果事件足够简单，我们也可以在组件中直接增加计数器的值：
我们没有使用任何方法而是直接在 @click事件中修改状态。而且我们也可以在其中添加一点逻辑判断(因为在购物网站中不会有小于零的东西)。 一旦这种逻辑过于复杂，即使可读性下降，最好还是写到一个方法中。这是个很好的选择。
对编程感兴趣，想了解更多的编程知识，关注头条号一起玩转编程
更多编程资讯、干货持续更新中~
之前一段时间由于工作很忙，没有时间继续学习Vue，今天算是继续对之前的学习进行补充了，今天要学习的便是Vue的条件渲染和列表渲染，我们将讨论if、if-else、if-else-if，show等。在列表渲染中，我们将讨论如何使用for循环。
对于条件渲染，其概念就是满足条件的渲染界面输出，在Vue中借助if，if-else，if-else-if，show等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节
浏览器效果
在上面的例子中，我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量，并将其初始化为值true。它显示在按钮附近。在单击按钮时，我们调用方法showdata，它切换变量show的值。这意味着在单击按钮时，变量show的值将从true变为false，false变为true。我们已将if分配给h1标记，如以下代码段所示。
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <h1 v-if = "show">这是H1标签</h1>
现在它将做的是，它将检查变量show的值，如果它是真的，将显示h1标签。单击按钮并在浏览器中查看，因为show变量的值更改为false，h1标记不会显示在浏览器中。仅在show变量为true时显示。
以下是浏览器中的显示。
我们看下浏览器中dom的变化情况
变为false时，h1已经不见了
下面是使用了if-else的示例
主要就是这段代码：
<h1 v-if="show">这是H1标签</h1> <h2 v-else>这是H2标签</h2>
现在，如果show为true，将显示“这是H1标签”，如果为false，则显示“这是H2标签”。这是我们将在浏览器中获得的内容。
点击按钮后变化
接下来是v-show的示例
v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素，如果条件为真则将其添加回来。而v-show隐藏了元素，如果条件为false，则display：none。如果条件为真，它会显示元素返回。因此，元素始终存在于dom中。
现在让我们使用v-for指令进行列表渲染
名为items的变量声明为数组。在方法中，有一个名为showinputvalue的方法，它被分配给带有水果名称的输入框。在该方法中，使用以下代码将输入文本框内的水果添加到数组中
showinputvalue : function(event) {
this.items.push(event.target.value);
}
我们使用v-for来显示输入的水果，如下面的代码片段所示。V-for迭代数组中存在的值。
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
要使用for循环迭代数组，我们必须使用v-for = "a in items"，其中a保存数组中的值并显示直到所有项都完成。我们看下浏览器输出：
尝试输入一些水果名称：
Dom代码对比
如果我们希望显示数组的索引，则使用以下代码完成：
主要代码如下
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
浏览器效果如下
以上就是对Vue中的条件渲染和列表渲染的介绍，非常的简单，但是越是简单的东西越是要打捞基础，就像是学习编程语言的语法一样，希望对和我一样初学Vue的小伙伴有一些帮助，共同进步！
*请认真填写需求信息，我们会在24小时内与您取得联系。
