Vue--数据传输

王伟廷发布于2019-08-19 18:11 / 1350人阅读

摘要：本文需要对有一定的基础，可以通过查看文档初步了解，以下是自己对数据绑定的总结模板都是可解析的有效的，从根本上不同于基于字符串的模板插值绑定表达式指令带有前缀的特性参数，用冒号隔开修饰符，用分割值为绑定表达式职责一给特性绑

本文需要对Vue有一定的基础，可以通过查看文档初步了解，以下是自己对数据绑定的总结：

Vue.js 模板都是可解析的有效的 HTML，从根本上不同于基于字符串的模板；

插值：

{{绑定表达式}}

指令：

带有前缀v-的特性；------参数，用冒号":"隔开；---修饰符，用"."分割；

值为 绑定表达式；

//职责一：给DOM特性绑定表达式；
        --------v-bind
        --------参数为DOM特性；
        ---使用指令绑定样式会自动添加前缀；
        
//职责一：当其表达式的值改变时，把某些特殊的行为应用到DOM上；
    ---无参数
    ---条件指令
    
//职责二：监听事件
    ---参数为事件类型；
    ---值为方法名；
    ---v-on 提供两个 事件修饰符：.prevent 与 .stop

过滤器：

添加到表达式的后面，用管道符"|"隔开；

//职责：将表达式的值管输到过滤器中进行处理并发挥处理结果；
始终以表达式的值为第一个参数；

计算属性：

当一个数据依赖于其他数据时；

 computed: {
  数据键名: {
    get: function () {
      return 表达式
    },
    set: function (newValue) {
        
    }
  }
}

通过组件绑定数据-------父与子之间的通信

子组件用props来定义如何接收外部（父组件）数据；--------父传子

//子组件需要显示地用props选项声明props；------格式类似于data
//prop默认是单向绑定的；
//通过修饰符.sync显示强制双向绑定或修饰符.once强制单次绑定；

子组件用自定义事件来向外（父组件）传递消息；----------子传父

//不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true

使用 $dispatch("eventName",this.msg) 派发事件，事件沿着父链冒泡；
父组件通过handleIt方法处理数据；

子组件用来将外部（父组件）动态传入的内容（其它组件或是HTML）和自身模板进行组合；------------父传子

//命令slot
父组件中显示地声明slot特性赋予值-----作为子组件slot标签的name特性的值；
子组件中命名slot匹配对应的slot特性的内容片段，未命名的slot作为父组件找不到匹配的内容挂载点；
---如果没有未命名slot，不匹配内容将被抛弃；

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79298.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vue总结系列--数据驱动和响应式

摘要：由于是需要兼容的后台系统，该项目并不能使用到等技术，因此我在上的经验大都是使用原生的编写的，可以看见一个组件分为两部分视图部分，和数据部分。在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动，组件化的框架和react很像，从一开始的快速上手基本的开发，到后来开始自定义组件，对element UI的组件二次封装以满足项目需求，期间也是踩了不少坑。由于将来很长一...

AbnerMing 2019-08-22 18:26 评论0 收藏0
Vue组件基础与通信

摘要：组件基础与通信一脚手架简介与安装之前安装的是模块，之后安装的是模块。如果是三级组件通信，该如何处理比如父组件与孙子组件通信。和，提供和注入实现祖先组件和后代组件之间通信。 Vue组件基础与通信一、vue cli脚手架 ① vue cli 简介与安装 vue cli 3.0之前安装的是vue-cli模块，vue cli 3.0之后安装的是@vue/cli模块。如果已经全局安装了旧版本的...

I_Am 2019-08-26 10:48 评论0 收藏0
前端开发之走进Vue.js

摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...

zxhaaa 2019-08-20 15:20 评论0 收藏0