精华内容
参与话题
问答
  • Vue.js 2.0 快速上手精华梳理

    万次阅读 多人点赞 2017-09-03 19:48:27
    自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。http://www.tuicool.com/articles/raaeeiU Vue基础 对于没有接触过es6和webpack...

    自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。http://www.tuicool.com/articles/raaeeiU

    Vue基础

    对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

    先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

    vue的生命周期很重要,了解这点以后可以免去很多问题。

    学完这些可以做一些练手的小项目,比如万年不变的todolist。。。

    现在可以开始学习使用vue-cli构件项目了,学习组件化之前,推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module

    光会这些还是不够的,还得会一些npm基础,知道如何用git-bush来安装模块依赖,会一些常用的命令。这方面的知识可以参阅npm入门文档

    看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search

    多看看组件那里,看看如何在vue-cli中怎么实现组件化。

    到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇,如果时间有限,就直接进入vue-router

    Vue-router

    和之前一样,推荐直接用html+js过一遍文档

    对路由导航钩子得好好看一看。

    看完文档就可以上手vue-cli,一般新手在这几天都会死活跑不出来。偷笑

    最直接的方法就是去github上搜一些关于vue-router2.0的demo,看如何构件路由,如何构件项目目录。

    我这里有一个传送门

    如果能跑出来,就可以做一些小项目了,比如写一个知乎日报啊偷笑,这些demo在github上很多。

    可以结合一些组件库写demo,这样可以更加了解组件化。比如饿了么团队的Element、mint-ui

    Vuex

    什么是vuex?

    Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了,对应的视图也会改变。

    在学习Vuex时,会有一些ES6特性,当遇到这些时,最好不要一带而过,去好好看一看这些es6特性。

    比如在学习Action时可以看看ES6新增的Promise和参数解构。

    实践的方法一样是先看别人别人写的代码,比如官方的购物车实例的应用结构

    把之前写的demo优化一下,有些地方可以用用vuex

    vuex主要是用来对不同组件间进行通信,它构建了一个Vue实例的全局数据与方法,这些数据与方法可以在该Vue实例的所有组件中get与set

    入门到放弃整理

    一、vue基础

    Vue2.0最全文档 Vue2.0

    探索之路——vue-router入门教程和总结

    Vue.js 2.0 快速上手

    Vuejs2.0 文档攻略

    “Vue2.0”跟俺一起全面入坑 01

    “Vue2.0”跟俺一起全面入坑 02

    “Vue2.0”跟俺一起全面入坑 03

    “Vue2.0”跟俺一起全面入坑 —— 自定义便签

    超好用的VueJs调试工具——vue-devtools

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    Vue2.0史上最全入坑教程(中)—— 脚手架代码详解

    Vue2.0史上最全入坑教程(下)—— 实战案例

    Vue2.0史上最全入坑教程(完)—— 实战案例

    vue-cli中配置sass和利用SASS函数功能实现px转rem

    二、vue提高

    Vue路由跳转问题记录详解 vuejs心法和技法

    全面解析vue-cli生成的项目中使用其他库(js库、css库)

    Vuex从入门到熟练使用 vue与服务端通信—vue-resource

    vue开发过程中跨域最简单解决方案 富文本编辑器Ueditor如何在Vue中使用?

    三、vue 1.x和vue 2.x的区别

    到了Vue2.x有哪些变化?—— 知识点 到了Vue2.x有哪些变化?—— 组件通信

    四、其他必备知识点

    ES6入门(一) ES6快速入门(二) ES6快速入门(三)

    需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

    Vue.js2.0核心思想

    Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。

    数据驱动:

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。

    <div id="app">
      {{ message }}
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

    基于依赖收集的观测机制原理:

    1 将原生的数据改造成 “可观察对象”,通常为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter。

    2 在解析模板,也就是在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

    3 当一个被依赖的可观察对象被赋值时,它会通知notify所有订阅自己的watcher重新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。

    依赖收集的优点在于可以精确、主动地追踪数据的变化,不需要手动触发或对作用域中所有watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

    组件系统:

    应用类UI可以看作全部是由组件树构成的。

    注册一个组件:

    Vue.component('my-component', {
        // 模板
        template: '<div>{{msg}} {{privateMsg}}</div>',
        // 接受参数
        props: {
            msg: String    
        },
        // 私有数据,需要在函数中返回以避免多个实例共享一个对象
        data: function () {
            return {
                privateMsg: 'component!'
            }
        }
    })
    <my-component msg="hello"></my-component>

    组件的核心选项

    1 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

    2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

    3 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

    4 方法(methods):对数据的改动操作一般都在组件的方法内进行。

    5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

    6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

    Webpack是一个开源的前端模块构建工具,它提供了强大的loader API来定义对不同文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。所以在此基础上,尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。

    其他特性:

    1 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。

    2 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS Transition或Animation效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。

    3 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户可以在多个组件中复用共同的特性。

    Node与Angular与Vue.js视频教程需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

    最后建议Vue 2.0 的学习顺序

    起步

    1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
    2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 script,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。
    3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。
    4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。
    5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。
    6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

    前端生态/工程化

    1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案。
    2. 学习命令行的使用。建议用 Mac。
    3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。
    4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
    5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处。

    Vue 进阶

    1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
    2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
    3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。
    4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
    5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。
    展开全文
  • Vue很难学吗」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就一直用了。 我最早用...

     

    「 Vue很难学吗 」

     

    对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就一直用了。

     

    我最早用的是AngularJs,那时候15年也是刚传到国内,踩了很多坑这方面的坑,各种文档、API 和解决方案都不完善,所以知道从新学一个新的概念框架的难处和雷点,最近Vue发展的很好,也是华人所写,所以普及度很高,文档好,语法简介收获了一大批忠实深度用户,我之前web入坑系列文章也分析过很多特性。

     

    总有人群里或者后台问我 Vue2.0到底如何学(转行和新手居多),看官网还是一脸懵逼,因为2.0变的很重了,不单单是是一个库了,而是一个解决方案框架的方向发展,结合nodejs、webpack自动化es6新语法等,这些都是新手很难理解的知识点,所以今天再发个干货,希望帮助到有心的读者和粉丝,也算好事一件。

     

    下面建议学习顺序,从 新手起步,到实战开发,到进阶核心都有介绍,结合了自己查的资料和经验和vue作者尤大的一些建议汇总而成,觉得好请转发、收藏。

     

    「 Vue 起步 」起步阶段

     

    1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件,这个不多做介绍,这个都不会的,建议回路一步步重造,参考我第一篇入坑系列,如何学前端。

    2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。

    3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解,一定要跟着手动敲,比如写一个编辑器什么的啦。

    4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。

    5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。

    6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

     

    「 前端生态工程化 」

     

    1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案,ES6以后是各个框架的标配,必须要学,后面北妈也会放出ES6轻松学系列。

    2. 学习命令行的使用。建议用 Mac,win 也无妨,这个不重要。

    3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源。

    至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意 Node (6+) 版本开始已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。

    4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。这个简单,看着Babel官网文档即可轻松配置,希望大家动手起来。

    5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。

    学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处。

    之前也写过webpack、gulp的基础介绍,可以翻我博客。

     

    「 Vue 进阶阶段 」

     

    1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。

    2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex

    3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。

    4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。介绍一下服务端渲染的概念。

    nuxt集合了 vue-router 和 vuex、webpack的搭建套餐,有SEO需要的可以着重了解下, 并不是必须要学,这只是一种场景方案,懵不?

     

    服务端渲染SSR 完全指南

     

    在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读

     

    Nuxt.js

     

    从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。

    5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。

    6. vue各种属性和概念如何结合react 组件混合用,也有必要了解一下,它们有些方案是可以通用的,比如jsx语法、vue用redux等。

    觉得好,欢迎转发!小北最帅



    热门阅读:

     

    1.各个阶级的前端 必须掌握的基本技能汇总
    2. 找工作如何避免培训机构骗局
    3. 我为何一直强调外包公司别去

     

    web入坑系列回顾
     

    第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗
    第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!
    第三篇: web前端入坑第三篇 | 一条“不归路” - 学习路线!
    第四篇: web前端入坑第四篇 | web前端 | 你还在用jQuery?

    第五篇: 秒懂Vuejs、Angular、React原理和前端发展历史

    第六篇: Vue、React、Angular之三国杀,web前端入坑第六篇(上)

    展开全文
  • Vue2.0入门详解

    2020-09-24 09:41:42
    一、Vue基础 1.1、概述 作者:尤雨溪 官网:https://cn.vuejs.org Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目...

    一、Vue基础

    1.1、概述

    作者:尤雨溪

    官网:https://cn.vuejs.org

    Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。(SPA单页面应用,所有的显示都在一个页面当中)

    渐进式:一步一步,不是说你必须一次把所有的东西都用上

    自底向上设计:是一种设计程序的过程和方法,就是先编写出基础程序段,然后再逐步扩大规模、补充和升级某些功能,实际上是一种自底向上构造程序的过程。

    Vue从设计角度来讲,虽然能够涵盖这张图上所有的东西,但是你并不需要一上手就把所有东西全用上,都是可选的。声明式渲染和组件系统是Vue的核心库所包含内容,而路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立,我们可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。

    Vue特点

    Vue与react在github上

    1.2、声明式渲染和组件化

    • 声明式渲染

    Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统,例如:

    <div id="app">
      <!-- 渲染 -->
      {{ message }}
    </div>
    
    <script type='text/javascript'>
    var app = new Vue({
      el: '#app',
      data: {
    	// 声明一下变量
        message: 'Hello Vue!'
      }
    })
    </script>
    
    • 组件化应用构建

    组件系统是Vue的另一个重要概念(后续学习),因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

    组件

    1.3、开发模式

    注意:开发模式≠设计模式

    开发模式,就是一个开发项目的方式或者标准。

    比较常见的三种开发模式:MVC、MVP、MVVM

    • MVC

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑(C)、数据(M)、界面显示(V)分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。

    mvc

    1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
    2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
    3. Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。

    优点

    耦合性低,重用性高,部署快,可维护性高,有利于软件工程化管理

    缺点

    由于模型model和视图view要严格的分离,给前端程序带来了很大的困难,每次操作需要彻底的测试

    • MVP

    MVP是Model-View-Presenter简称,MVP是从经典的模式MVC演变而来,它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理,Model提供数据,View负责显示:

    mvp

    1. 各部分之间的通信,都是双向的。
    2. View 与 Model 不发生联系,都通过 Presenter 传递。可以将一个Presenter用于多个视图,而不需要改变Presenter的逻辑。这个特性非常的有用,因为视图的变化总是比模型的变化频繁。
    3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

    缺点

    由于对视图的渲染放在了Presenter中,所以视图和Presenter的交互会过于频繁。一旦视图需要变更,那么Presenter也需要变更了。

    • MVVM
      • M:(model)普通的javascript数据对象
      • V:(view)前端展示页面
      • VM:(ViewModel)用于双向绑定数据与页面,对于我们的课程来说,就是vue的实例

    MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。这种模式下,页面输入改变数据,数据改变影响页面数据展示与渲染

    vue使用MVVM响应式编程模型,避免直接操作DOM , 降低DOM操作的复杂性。

    MVVM

    优点

    • 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
    • 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
    • 可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

    二、Vue入门

    1、传统DOM与Vue实现对比

    以输出“Hello World”为例,传统开发模式的原生JavaScript、jQuery代码如下:

    传统开发模式对比

    使用Vue.js实现输出“Hello World”案例:

    步骤

    1. 定义用于填充数据的标签
    2. 引入vue.js库文件(学习测试使用开发版本,项目上线换成生产版本
    3. 使用vue语法实现需求
    4. 将vue提供的数据填充到“第1步”中的标签里

    代码片段如下:

    <body>
        <!-- 1. 定义用于填充数据的标签 -->
        <div id="app">{{msg}}</div>
    </body>
    <!-- 2. 引入vue.js库文件 -->
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        // 3. 使用vue语法实现需求
        var vue = new Vue({
            // 4. 将vue提供的数据填充到“第1步”中的标签里
            el: "#app",
            data: {
                msg: "Hello World",
            },
        });
    </script>
    

    Vue实例细节分析:

    • Vue参数对象属性

      • el:元素挂载的位置,值可以是CSS选择器或DOM元素
      • data:模型数据,值是一个对象
    • 插值表达式{{msg}}

      • 将数据填充到HTML标签中

    了解:前端渲染方式

    前端渲染

    前端渲染方式有:

    • 原生JavaScript拼接字符串(维护困难)
    • 使用前端模板引擎(维护较容易,但缺乏事件支持)
    • 使用Vue特有的模板语法
      • 插值表达式
      • 指令
      • 事件绑定
      • 属性绑定
      • 样式绑定
      • 分支循环结构

    2、vue devtools工具安装

    通过chrome中的谷歌插件商店安装Vue Devtools工具,此工具帮助我们进行vue数据调试所用,一定要安装。Vue工具在谷歌商店的地址是:https://chrome.google.com/webstore?utm_source=chrome-ntp-icon

    请注意:打开chrome应用商店,需要科学上网才能访问到,至于怎么科学上网请各位自行解决。

    Vue工具谷歌商店

    安装好后打开Chrome的开发者工具(F12或Ctrl+Shift+I)即可使用:

    谷歌浏览器使用Vue工具

    补充:如果自己解决不了科学上网问题,但是又需要用Vue开发工具那该怎么办?

    如果实在解决不了科学上网难题,Vue官方也提供了插件源码允许我们自己编译/构建Google Chrom插件,步骤如下(构建插件流程稍微麻烦一些<不要求掌握如何构建>,此处已为同学们构建好,可以直接使用)。

    Vue调试工具

    • 克隆仓库
      • Git仓库地址:https://github.com/vuejs/vue-devtools
    • 安装依赖包
    • 构建
    • 打开Chrome扩展页面
    • 开启开发者模式
    • 加载已解压扩展,选择shells-chrome目录
    • 将产生的.crx文件拖入谷歌浏览器扩展程序界面
    • 在Windows策略管理器中添加Google策略模板文件,将插件对应的ID添加到配置扩展程序白名单
      • .crx.adm文件已打包上传至公有云,可以点击访问2url.cc/l3M5x1进行下载
    • 在谷歌浏览器扩展程序管理界面中给Vue.js devtools插件授权
      • 允许访问文件网址
      • 收集各项错误

    3、Vue双向数据绑定的原理

    核心:数据代理 + 发布与订阅

    当把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,使用Object.defineProperty把这些属性全部转为getter/setter(数据劫持/数据映射)。在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

    双向数据绑定原理

    Object.defineProperty(obj, prop, descriptor)
    

    obj

    要定义属性的对象。

    prop

    要定义或修改的属性的名称 。

    descriptor

    要定义选项。

    示例代码:

    <body>
        <div id="app">
            <div id="msg"></div>
            <input type="text" name="" id="" oninput="changeVal(this)" />
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        // 1. 定义对象
        var userInfo = {
            name: "这个信息虽然用户看不到,但是Vue可以追踪到",
        };
        
        // 2. 数据劫持
        var obj = {};
        Object.defineProperty(obj, "name", {
            get() {
                return userInfo.name;
            },
            set(data) {
                userInfo.name = data;
                document.getElementById("msg").innerHTML = data;
                return true;
            },
        });
    
        // 3. 实时渲染
        document.getElementById("msg").innerHTML = obj.name;
    
        // 4. 发布订阅
        function changeVal(eleObj) {
            let value = eleObj.value;
            obj.name = value;
            return true;
        }
    </script>
    

    4、Vue模板语法

    4.1、插值表达式

    **插值表达式:**是vue框架提供的一种在HTML模板中绑定数据的方式,使用{{变量名}}方式绑定Vue实例中data中的数据变量,会将绑定的数据实时的在视图中显示出来。

    插值表达式的写法支持使用:

    • 变量名
    • 部分JavaScript表达式
      • 注:{{ }}括起来的区域,就是一个就是js语法区域,在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句
    • 三元运算符
    • 方法调用(方法必须需要先声明)
    <body>
        <div id="app">
            <!-- 直接使用变量名 -->
            <h5>{{name}}</h5>
            <!-- 运算 -->
            <h5>{{name + '--好的'}}</h5>
            <h5>{{ 1 + 1 }}</h5>
            <!-- 使用函数 -->
            <h5>{{title.substr(0,6)}}</h5>
            <!-- 三目运算 -->
            <h5>{{ age > 18 ? '成年' : '未成年'}}</h5>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                title: "我是一个标题,你们看到没有",
                name: "tianqin",
                age: 21,
            },
        });
    </script>
    

    4.2、指令

    问1:什么是指令?

    • 指令的本质就是标签中的vue自定义属性
    • 指令格式以“v-”开始,例如:v- cloak,v-text、v-html等

    详见官网对指令的说明:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

    问2:指令有什么作用?

    当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。(简化操作)

    小试牛刀:v-text指令与v-html指令【相当于innertHTML和innerText】

    官网

    v-text:https://cn.vuejs.org/v2/api/#v-text

    v-html:https://cn.vuejs.org/v2/api/#v-html

    友情提醒:v-html尽量少用甚至不用,因为可能引发XSS攻击。

    <body>
        <div id="app">
            <!-- 插值表达式形式 -->
            <div>{{str1}}</div>
            <!-- 插值表达式此时与v-text是等效的 -->
            <div v-text='str2'></div>
            <div v-html='str1'></div>
        </div>
    </body>
    
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str1: 'hello tianqin',
                str2: '<a href="http://www.baidu.com">百度</a>'
            }
        })
    </script>
    
    展开全文
  • 本教程是某课网已经下架的Vue2.0课程,但是确实讲的不错,希望给一些想学但是学不了的同学提供方便,加油哦
  • vue1.0到vue2.0的变化

    2018-12-06 14:02:57
    1. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: version1.0: &amp;lt;template&amp;gt;  &amp;lt;h3&amp;gt;h3标签&amp;lt;...version2.0: &amp;lt;tem
    1. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:

    version1.0:

    <template>
      <h3>h3标签</h3>
      <p>p标签</p>
    </template>
    

    version2.0:

    <template>
        <div>
           <h3>h3标签</h3>
            <p>p标签</p>
        </div>
    </template>
    
    2. 关于组件的定义。

    version1.0:

    Vue.component(组件名称,{//vue2.0能用,但不在那么用了。
    	//组件内容
    }

    version2.0:

    var home={
    	template:' '  //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
    }
    
    3. 生命周期。

    version1.0:
    (1)init
    (2)created
    (3)beforeCompile
    (4)compiled
    (5)ready
    (6)beforeDestroy
    (7)destroyed

    version2.0:
    (1)beforeCreate  组件实例刚刚被创建,属性都没有
    (2)created  组件实例创建完毕,属性已经绑定
    (3)beforeMount  模板编译之前
    (4)mounted   模板编译之后,代替了之前的ready*
    (5)beforeUpdate  组件更新之前
    (6)updated    组件更新完毕
    (7)beforeDestroy  组件销毁之前
    (8)destroyed 组件销毁后

    4. 循环。

    version1.0:v-for="(index,val) in array"
    需要track-by="$index"属性解决添加重复数据问题。

    version2.0:v-for="(val,index) in array"
    默认可以添加重复数据,:key="index"属性提高循环性能,对功能没有影响,一般情况下用再大型项目中。

    5. 自定义键盘事件。(以ctrl键为例)

    version1.0:

    Vue.directive("on").keyCodes.ctrl = 17;
    

    version2.0:

    Vue.config.keyCodes.ctrl = 17;
    
    6. 过滤器。

    version1.0:有很多系统自带过滤器,如:{{msg|json}}{{msg|currency}}
    version2.0:内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决。

    7. 组件通信。

    version1.0:子组件利用sync(eg: :msg.sync="change")可以更改父组件信息。
    version2.0:子级想拿到父级的数据:通过props,且不允许更改父组件信息。
    如何改:
    a)父组件每次传一个对象给子组件,对象引用。
    b)只是追求不报错,可以用mounted的钩子函数,改变自身数据。

    8. 可以单一事件管理组件通信
    var Event = new Vue();
    Event.$emit('事件名','数据');
    Event.$on('事件名'function(){ ... }.bind(this));
    
    9. 动画。

    transition不再是属性:transition=“fade”
    而是像模板一样的标签

    <transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>
    
    10. 路由.

    布局的改变:
    version1.0:

    <a v-link="{path:'/home'}">我是主页</a>
    

    version2.0:

    <router-link to="/home">我是主页</router-link>
    

    路由写法的改变:

    var Home ={      //准备组件
      template:'<h3>我是主页</h3>'
    }
    const routes = [   //配置路由
      {path:'/home',component:Home},
      {path:'*',redirect:'/home'}   //重定向
      ...
    ];
    const router = new VueRouter({routes:routes});  //生成路由实例
    //简写成对象的形式 :const router = new VueRouter({routes});
    new Vue({   //最后挂到vue上
    	router,
       el:'#box'
    });
    
    1. 路由嵌套
    const routes = [   //配置路由
      {path:'/home',component:Home},
      {path:'/news',component:News,
        children:[
          {path:'/newsname',component:newsNameDetail},
          ...
        ]
     },
     {path:'*',redirect:'/home'}   //重定向
       ...
    ];
    
    展开全文
  • vue2.0 下环境搭建

    2019-04-26 01:18:24
    node的安装 ...vue -cli手脚架安装,输入npm install -g vue -cli(加-g是安装到全局)即可进入安装页面,npm安装比较慢,你也可以使用cnpm进行安装: 使用淘宝镜像: 1>.官方网址:http://npm.tao...
  • vue2.0组件

    2019-05-16 22:51:00
    vue2.0的组件需要配合webpack的使用 webpack的配置如下 //webpack.config.js module.exports=function(env,args){ env=env||{}; return { entry:'./src/main.js', module:{ rules:[ {test:/\.css$/i,...
  • vue1.0和vue2.0的区别

    千次阅读 2018-05-23 15:57:00
    一、生命周期钩子的差别 vue1.0的生命周期如下: vue2.0的生命周期如下: 用一张表格来做对比: 二、代码片段 在vue1.0中可以在template编写时出现:&lt;template&gt; &lt;div&gt;第一行&...
  • 对于一个新手来说,学习一个框架最重要的事情...vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html element-ui官方网站:https://element.eleme.cn/#/zh-CN vue项目中引入饿了么elementUI组件 ht
  • Vue3.0和Vue2.0的区别

    万次阅读 2019-11-01 20:33:00
    Vue3.0和Vue2.0的区别 默认进行懒观察(lazy observation)。 在 2.x 版本里,不过数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染...
  • vue2.0和1.0版本的区别

    千次阅读 2018-10-25 14:55:59
    来源是:http://www.zhimengzhe.com/Javascriptjiaocheng/322993.html 1、绑定一次 code 1 2 &lt;code&gt;{{*msg}} &lt;div v-once="... vue2.0已废弃 请使用v-...
  • Vue2.0和3.0区别(总结版,不断更新)

    千次阅读 2020-05-22 16:53:39
    一 安装及版本切换 查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli4 vue --version 如果无法识别vue命令说明没有安装vue-...从2.0升级到3.0: npm uninstall -g vue-cli npm install
  • Vue2.0和Vue3.0区别

    千次阅读 2019-07-22 14:05:50
    Vue2.0 vue3.0 安装 npm install -g vue-cli npm install -g @vue/cli //原型开发(直接将.vue文件运行起来) npm install -g @vue/cli-service-global // 运行 vue serve ...
  • 解析Vue2.0和3.0的双向数据绑定原理异同(带源码) Vue2.0和Vue3.0实现原理 Vue 2.0 Vue2.0实现MVVM(双向数据绑定)的原理是通过 Object.defineProperty 来劫持各个属性的setter、getter,在数据变动时发布消息给订阅...
  • vue2.0和3.0的一些区别

    2019-12-03 10:25:55
    Vue-cli3.0于8.11日正式发布,看了下评论,不是特别的乐观,说说我个人的...大概三个月前超哥就已经得知3.0的消息,试着用了下,相比之下现在的3.0和测试时的区别: modern mode。启用该模式会自动构建两个版本的 j...
  • https://blog.csdn.net/Lemontree_fu/article/details/106282633?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_...
  • vue3.0在数据的响应式上无疑做了很大的优化,性能得到大大提升。虽然vue3.0还没有正式发布,但是各大公众号已经闹得不亦说乎。 我们都知道vue2的响应式原理的实现依赖的是Object.defineProperty这个API,用它来为要...
  • vue 2.0 以及3.0的双向绑定原理的实现

    千次阅读 2019-05-27 12:05:01
    1 在vue3.0发布之前 vue2.0利用 object.defineProperty来实现双向数据绑定原理,vue3.0是利用 proxy这个对象实现的(不了解的可以先去查查这个对象)。这里应该不用介绍什么是双向吧。 2 先介绍object.defineProperty...
  • vue3.0相对于vue2.0在项目结构上去除了buildconfig目录; 在vue2.0上配置proxy的方式,需要在config/index.js文件中直接修改就可以: proxyTable: { '/api':{ target:'http://localhost:8081/', changeOrigin:...
  • 引言 大家都知道Vue双向数据绑定就是指v-model指令,而v-model的本质就是input、value的语法糖,语法糖就是方便我们代码...vue2.0-Object.definedProperty() <input type="text" id='inp'> <div id='vi...

空空如也

1 2 3 4 5 ... 20
收藏数 35,226
精华内容 14,090
关键字:

vue2.0

vue 订阅