美文网首页
vue学习笔记

vue学习笔记

作者: c盖世 | 来源:发表于2017-10-12 11:16 被阅读0次

    vue.js

    提醒:Vuejs 如今正处在快速发展中,很多资源随时都有可能过时(outdated),记得查看最新文档,使用最新资源。

    Vue 的官方说明

    数据驱动的组件,为现代化的 Web 界面而生。

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

    关于 Vue 的作者

    尤雨溪 / 昵称:尤小右 / 英文名:Evan You

    是个介于设计师和程序员之间的大牛,设计能力比程序员好,编程能力比设计师(和普通程序员)好太多!

    如今辞了工作,专心投入到了 Vuejs 的发展和推广中。

    工作信息:

    Meteor (2014 - 2016)

    地区:海外 ,美国

    职位:Core dev

    Google (2012 - 2014)

    地区:海外 ,美国

    职位:Creative Lab

    相关信息:

    JavaScript Air Episode 016: JavaScript Frameworks: Vue.js

    和 Vue.js 框架的作者聊聊前端框架开发背后的故事 | Teahour.fm

    Vue 的基本用法

    Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜鸟才看视频教程,真正的牛人文档瞄几眼就会了(-_-#))。

    下载使用(两种方式)

    直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

    平时对于 Dom 操作比较频繁的小项目可以直接这样使用。

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

    针对单页应用的构建推荐使用这种方式,可以更好的体验到 vue 所提供的组件化功能 (单文件组件),顺带着享受到 webpack 带来的流畅的自动化开发体验。

    # 全局安装 vue-cli

    $ npm install -g vue-cli

    # 创建一个基于 "webpack" 模板的新项目

    $ vue init webpack my-project

    # 安装依赖,走你

    $ cd my-project

    $ npm install

    $ npm run dev

    Vue 的使用教程

    废话不多说,大家直接看官方文档,已经写得非常棒了。

    页面上的搜索功能可以快速帮助你定位到相关文档说明,非常方便。

    针对相关问题的解决方法:

    问题:Vue 还未实例化前, HTML 模板中的 "{{ }}"( Mustache 标签) 会暴露在用户界面上,也就是说页面有那么一瞬间会将所有的 "{{ }}" 都显示出来,如何解决?

    解决:

    方法一:使用 v-cloak 指令,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    v-cloak 文档说明

    [v-cloak] {

      display: none;

    }<div v-cloak>

      {{ message }}

    </div>方法二:使用 v-text

    v-text 文档说明

    <span v-text="msg"></span>

    <!-- same as -->

    <span>{{msg}}</span>问题:新增的 data 数据没法同步响应到页面?

    解决:认真阅读官方文档里的深入响应式原理。

    在实例创建之后添加属性并且让它是响应的:

    对于 Vue 实例,可以使用 $set(key, value) 实例方法:

    vm.$set('b', 2)

    // `vm.b` 和 `data.b` 现在是响应的对于普通数据对象,可以使用全局方法 Vue.set(object, key, value):

    Vue.set(data, 'c', 3)

    // `vm.c` 和 `data.c` 现在是响应的注意事项:

    注意如果 prop 是一个对象或数组,是按引用传递。在子组件内修改它会影响父组件的状态,不管是使用哪种绑定类型

    针对同一个元素的后一个 watch 会覆盖前一个 watch,无论是不是 deep

    自定义指令内部可以通过 this.vm.someKey 来访问到组件的数据

    自定义指令名不要有大写,props 命名也不要有大写

    Vue 的组件化实践

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

    使用上文提到的官方命令行工具:

    目前可供使用的模板包括(模板名-说明):

    webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.(全功能的 Webpack + vue-loader 设置,包括热加载,静态检测,测试,css 提取)

    webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.(一个简易的 Webpack + vue-loader 设置,以便于快速开始)

    browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.(全功能的 Browserify + vueify 设置,包括热加载,静态检测,单元测试)

    browserify-simple - A simple Browserify + vueify setup for quick prototyping.(一个简易的 Browserify + vueify 设置,以便于快速开始)

    simple - The simplest possible Vue setup in a single HTML file

    相关阅读:

    Announcing vue-cli

    (译)Vuejs 自己的构建工具 vue-cli

    相关文章

      网友评论

          本文标题:vue学习笔记

          本文链接:https://www.haomeiwen.com/subject/tmpnyxtx.html