学习vue2.0

学习vue2.0总结:

一、基础

1、局部组件与全局组件:

  全局组件:Vue.compotent(组件名,options),参考网址:http://www.cnblogs.com/yesyes/p/6658611.html

  局部组件:export default {compotents: {组件名[:组件实例]}}

2、一个组件被某一组件引用多次???

3、props:

  props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

  props 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 datacomputed 或 methods 等实例属性还无法使用。

  非prop属性的概念与‘替换/覆盖的概念’

4、自定义事件:$emit(事件,参数)与$on(事件,回调)

  不能用 $on 侦听子组件抛出的事件,而必须在模板里直接用 v-on 绑定

5、事件修饰符:

  (1)、绑定原生事件:.native

  (2)、双向数据绑定:.sync。在vue1.0中是双向数据绑定,而在vue2.0中他是一个语法糖,如下:

    <comp :foo.sync="bar"></comp>     ==渲染为==>     <comp :foo="bar" @update:foo="val => bar = val"></comp>

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:this.$emit(‘update:foo‘, newValue)

6、自定义表单组件是v-model的用法:理解v-model语法糖

7、非父子组件之间的通信:有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线

8、编译作用域:  

  父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

  一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法:

    <!-- 无效 -->

    <child-component v-show="someChildProperty"></child-component>

9、slot内容分发  

    除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。

    当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

    最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

    <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

    仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。

  (1)作用域插槽?????

10、动态组件与keep-alive

11、在v-for中使用ref?????

12、内联模板:

  如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。

二、响应更新

  1、Object.assign() 或 _.extend

  2、虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

  this.nextTick(function () {}),这类似于一个生命周期钩子,当更新dom后才调用

三、自定义指令:

  1、全局指令:    

    // 注册一个全局自定义指令 v-focus

      Vue.directive(‘focus‘, {

        // 当绑定元素插入到 DOM 中。

        inserted: function (el) {

          // 聚焦元素

          el.focus()

        }

      })

  2、局部指令:  

    也可以注册局部指令,组件中接受一个 directives 的选项:

    directives: {

      focus: {

        // 指令的定义---

      }

     }

四、混合对象:

  混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

五、插件:

  插件的定义与使用:

  1、定义:定义时核心是插件的对象的install方法,第一个参数是Vue,可以定义一些

  2、使用:Vue.use(插件)

六、api

  1、name: 当在有 vue-devtools, 未命名组件将显示成 <AnonymousComponent>, 这很没有语义。通过提供 name 选项,可以获得更有语义信息的组件树。

时间: 2024-10-24 03:50:18

学习vue2.0的相关文章

学习 vue2.0/3.0 中的proxy和Object.defineProperty 小记

vue3.0将双向数据绑定的主要方法从Object.defineProperty舍弃,使用了proxy的方式通过观察者模式实现相关的数据变化监听,总的来说是一个很好地前进.今天简单的实验了一下相关的实现和不同情况下的使用输出.简单记录一下吧.同时说明代码中是使用数组的例子进行区分的. 个人认为proxy的实现方式要比Object.defineProperty优雅很多,Object.defineProperty首先是指数据劫持,实际上proxy的运行是后置于Object.definePropert

[js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下

vue2.0 配置环境总结(都是泪啊)

最近有点空闲时间,终于把一直想学的vue提上了日程,以下是收集的一些帮助入门的链接 1:https://vuefe.cn/v2/guide/ vue2.0中文官网 2:https://router.vuejs.org/zh-cn/index.html vue2.0路由中文官网 3:https://github.com/jsfront/src/blob/master/vuejs.md 有一些不错的vue插件,教程,视频和学习资料分享 一些不错的vue2.0博客分享: 1:https://segme

Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统

最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlserver2008R2 + WebAPI + Dapper + Vue2.0 + Element-UI 2.项目解决方案概览 简单介绍下,Account是WebAPI项目,承载前端请求:Account.BLL.Account.DAL.Account.Entity不废话:Account.Common是对D

vue2.0学习(一)-的内部指令

vue2.0学习(一)-内部指令 GitHub源码 v-if v-else v-show v-if dq 原文地址:https://www.cnblogs.com/guyanv/p/8734904.html

vue2.0学习(一)-内部指令

vue2.0学习(一)-内部指令 GitHub源码 https://github.com/sunnyguyan/VueDemo 1.v-if v-else v-show v-if:是vue的一个内部指令,指令用在我们的html中 v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称 <div v-if='isLogin'>你好,guyan</div> 完整的html代码 <!DOCTYPE html> <html lan

vue2.0学习(二)-全局API

vue2.0学习(二)-全局API GitHub源码 https://github.com/sunnyguyan/VueDemo 1.Vue.directive自定义指令 一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,

vue2.0学习(四)-实例和内置组件

vue2.0学习(四)-实例和内置组件 1.实例入门-实例属性 一.Vue和Jquery.js一起使用 下载可以去官网进行下载,我这里使用的版本是3.1.1,下载好后在需要的页面引入就可以了.当然你还有很多其它的方法引入jquery,只要可以顺利引入就可以了. <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <!DOCTYPE

vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou