web新手指引vue

‘壹’ vue怎么学

如果你是 Vue 开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染，等等。你可能还听说过与 Vue 有关的一些工具和库，比如 Vuex、Webpack、Vue CLI 和 Nuxt。

浸没在术语和工具的浩瀚海洋中难免会令人感到沮丧，但其实并不是只有你一个人有这种感受，所有经验水平的开发人员都会持续感觉到这种莫名的压力。分享一张图给你看看

基础知识：

• vue的生命周期： beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、 beforeDestory/destoryed

• vue常用指令： v-for、 v-bind（缩写形式 :prop）、 v-on(缩写形式 @click=’sss')、 v-if/v-else/v-else-if、 v-model、 v-once、 v-html、 v-show...

• vue自定义组件： Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'})

• vue常用实例方法和属性： data/$data、 methods/$methods、 $el、 computed(计算属性)、 $watch、 $set、 $event、 $emit...

• 如果需要更新的属性需要缓存，则使用计算属性的方式，否则可以使用 methods里的方法来更新属性（ methods里的方法每次重新渲染都会执行）

• 计算属性默认提供了 getter，你还可以给它设置 setter

• 当你数据变化是异步或者开销较大时，可以使用 watch侦听器来响应数据的变化

• v-bind:class的值可以是一个对象，可实现类似 react中 classnames模块的功能

• 自定义组件上的 class会被渲染拼接到 template的根节点的 class属性上（自定义组件上可使用 v-bind:class来做class的判断显示逻辑）

• v-bind:style可以用来绑定内联样式，这个内联样式的值可以由一个对象来定义（类似css in js的模式）,且可以被定义为数组(多个样式对象)

• v-bind:style可以使用多重值的形式： <div:style=“display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>

• v-if/v-else/v-else-if的时候，可以用key来管理可复用的元素

• v-if是’真正’的渲染，它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建

• v-if是惰性的，初始为假，什么也不做，直到为真的时候才渲染元素

• v-show总是渲染元素，只是简单的进行切换

• v-if的切换开销大， v-show则是初始渲染开销大，频繁切换使用 v-show，运行时经常改变则使用 v-if

• v-if和 v-for一起使用时， v-for的优先级更高

• v-for可遍历数组，第二个参数是索引

• v-for可遍历对象，第二个参数是 key，第三个参数是索引

• v-for和 <template>搭配可减少渲染次数

• v-for和自定义组件使用时，需要使用 props来传递值

• 尽可能的为遍历子元素加上 key，获得渲染优化

• 数组变异方法： push/pop/unshift/shift/splice/sort/reverse改变原始数组

• 数组非变异方法： filter/concat/slice 不改变原始数组，总是返回新数组

• Vue不能检测到数组索引赋值（使用 vm.$set解决）和修改 length长度赋值(使用 splice解决)的情况

• Vue不能检测对象属性的添加和删除(使用 vm.$set或 Object.assign)

• is=“todo-item”这种属性的写法比较适合DOM模板

• 事件修饰符，它们可串联使用： .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤其适合移动端)

• .passive不用同时和 .prevent使用，后者会被忽略

• 按键修饰符: .enter、 .tab、 .delete、 .esc、 .space、 .up、 .down、 .left、 .right

• 系统按键修饰符: .ctrl、 .alt、 .shift、 .meta(⌘|⊞|◆)、 .exact(允许精确控制系统修饰符组合键触发)

• 鼠标修饰符： .left、 .right、 .middle

• v-model会忽略表单元素的 value、 checked、 selected，仅仅使用实例中的数据作为数据源

• 表单事件修饰符： .lazy、 .number、 .trim

• 组件是可复用的vue实例，具有vue实例大多数属性和方法

• 组件可复用，每个组件有独立的空间

• 组件上的data必须是一个函数，这样做避免影响了其他组件

• 通过 Vue.component()全局注册的组件可在其被注册后的任何通过 newVue()创建的实例所使用，包含其组件树中的所有组件

• 通过插槽 <slot>分发内容(其实就是类似于react的children)

• 动态组件 <component>配合属性 is来实现

• 解析DOM模板时需要注意下可能会有不生效的情况，需要使用is来传递组件

‘贰’ web前端开之网站搭建框架之vue详解

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。

引入vue.js的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入

，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤

而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中

通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。

（组件书写格式）

（组件整合）

（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。

通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

‘叁’ Vue基本用法

Vue:渐进式javascript框架
声明式渲染-->组件系统-->客户端路由-->集中状态管理-->项目构建

Vue的基本使用

Vue的两种挂载方式:

模板语法:
1.插值表达式
存在闪动问题:快速刷新浏览器时,有时会氏橡显示{{xxx}}内容,然后替换为要显示的值.解决的办法-->指令(先隐藏,替换好值之后再显示)
2.指令(指令的本身就是自定义属性)
以v-开头 例如v-cloak
html:

js

效果:

使用v-cloak
html:

css:

效果:

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。

双向数据绑定:v-model

2.MVVM私享
M(model)
V(view)
VM(view-model)

mvc,mvp和mvvm的区别:
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

3.事件绑定
事件冒泡和事件捕获
3.1v-on指令
示例:

效果:

3.2事件函数的调用方式
html:

js

3.3事件函数参数传递
普通参数和事件对象

3.4事件修饰符
.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部羡模的冒泡事件传递信号触发,会忽略兄核缓掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

html:

js:

e.prevent等同于
event.preventDefault()

3.5按键修饰符
在Vue中可以通过 config.keyCodes 自定义按键修饰符别名
示例:Vue.config.keyCodes.aaa = 65;

自定义按键:

4.属性绑定
v-bind指令:被用来响应地更新 HTML 属性

html:

js:

效果:

5.v-model的实现原理分析
①

等价于
②

第一种实现只是后面两种写法的语法糖.
当在input元素中使用v-model实现双数据绑定，其实就是在输入的时候触发元素的input事件，通过这个语法糖，也能够实现父子组件数据的双向绑定.
父组件:

子组件:

6.样式绑定v-bind:class
1️⃣class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
①动态切换多个class
html

css

js

效果:

②样式绑定到对象

③数组语法:

默认class会被保留合并

2️⃣style

三元表达式:

7.分支循环结构
7.1

v-show与v-if的区别:

v-show:

v-if:

1.原理

2.应用场景

7.2 循环结构

为什么需要独一无二的key的简单示例:

效果:

点击查看更多:
v-for:需要key的原因:
v-for遍历对象

‘肆’ Vue中使用新手引导功能：intro.js

1.webpack相关配置

2.如拿者哪果是vue-cli3的消码嫌举项目，则在vue.config.js

1.引入

2.初始化

3.html部分

https://github.com/alex-oleshkevich/vue-introjs
https://introjs.com/

‘伍’ 从零开始Gin Web+Vue商城的搭建（一）-- 前后端框架搭建和简单沟通

同步更新的github地址： https://github.com/nds15763/ginMall

看了一位老哥写的《 前后分离Vue+Gin(go)总结 》以后有种自己搭一份的想法，结合最近找工作比较闲，就准备自己写一份商城源码。

一、先来实现前端部分第一步搭建Vue框架。Vue我也是第一次接触，看了半者饥天多的文档才有了大概的了解。先不过多考虑前端的实现，首先考虑一下前后台沟通的问题。

用vue-cli搭建一个新框架，在Helloworld.vue 或者新建一个模板页。

老哥的文档中写到，他推荐使用axios插件代替jquery来和后台做交互。那么我也按照他的思路安装一个axios插件，写一个跟后台通讯的Get请求。

二、然后指激来搭建后台框架，老哥说的是用Gin框架来搭建，并且用cors中间件来解决跨域访问问题，咱们也先来搭建一个简单的框架。

main.go

router.go

FPList.go

在浏览器里输入localhost:8081/FPList，可以看到刚才自己定义的Json串，知道后台唯嫌袜算是成功了。

此时再打开前端页面，可以看到后台返回的结果已经显示在页面了。

‘陆’ vue是什么 怎么用

Vue.js是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手，同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

1、MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。

(6)web新手指引vue扩展阅读：

vue在web开发、网站制作中的优势

1、据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。

2、组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。

3、简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

‘柒’ webpack-从零搭建vue过程

执行了npm init之后,会让我们填写一些配置信息，如果还不知道怎么填写的话可以一路回车，会生成一个pakeage.json文件,文件内容如下：

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模卖吵绝板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即碰改可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使中姿用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：

在webpack.config.js配置一下vue-loader

Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,所以在webpack.config.js中加入

先安装html-webpack-plugin插件 npm install --save-dev html-webpack-plugin,然后配置webpack.config.js

先安装webpack-dev-server；npm install webpack-dev-server --save-dev
然后在webpack.config.js文件配置：

最后在package.json文件配置一下运行webpack-dev-server的脚本

‘捌’ 零基础新手学习Web前端应该掌握哪些知识

一、零基础学web前端开发要怎么去学?
首先要学习的就是基础知识：HTML、CSS和JavaScript。HTML是内容，CSS是表现，JavaScript是行为。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发的领域有很多自学成“才”的同行。HTML是最基础的，现在流行的是HTML5设计，能更好的为移动端服务，要先学会网页布局。CSS是用来美化HTML页面的为页面提供布局和格式。最后再学JavaScript。
二、web前端基础知识要怎么合理安排学习?
1熟练掌握HTML基本知识，包括每个标签的用法等。这个是前端开发的信息结构。
2、熟练掌握DIV+CSS基本知识，这个东西基本就是前端的基础了，它可以将你写的东西直观的展示出效果给你看，这个就是前端开发的显示效果。
3、学习JavaScript编程，深入学习，包括jquery等框架。js东西会比较多。Js就是前端的行为和数据交换。
4、学习一门简单的后台编程语言，比如asp或者php，对自身会有一定的帮助。
三、如何学习最新的HTML5+CSS3技术
上述简单阐述了前端开发要怎么学，主要是从学习的基本点来描述的，另外说下最新的HTML5+CSS3了，这些与时俱进的东西一定要看。在学习HTML/CSS的时候，一定要边学边练习，通过这些练习来巩固、理解自己的知识。其次学习JavaScript首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!

‘玖’ web前端怎样入门

先说一下自学前端如何入门吧。

方法：

第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。

第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。

路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：Node.js全栈开发(1周)

内容包括：(WebApp后端系统开发、一、Node.js基础与Node.js核心模块；二、Express；三、noSQL数据库)

至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！