组件：就是自定义标签, 也是Vue的实例对象;

组件好处：就像工作分工，函数封装等

组件分为全局组件和局部组件；

全局组件，在Vue身上的组件，所有的vue挂载的元素内都可以使用；正是因为这一点，component的data必须是一个函数，绑定的变量 都会去执行data函数，然后找data里的返回的对象的k，如果没有，就继续找computed里的看，

 <body>

     <div id="app">

       <my-component></my-component>

     </div>

     <div id='app1'>

       <my-component></my-component>

     </div>

     <script>

     Vue.component('my-component',{

         template:`<div>

                  {{val1}}             //每次都会先找data函数里的值，如果没有找computed里的值

             </div>`,

             data:function(){

                 console.log(111)               //先输出111，证明每个绑定的变量都会导致data执行，return出来一个新的值

                 return {

                     val:'hello world'

                 }

             },

             computed:{

                 val1:function(){

                     console.log(222)            //再执行输出222，

                     return '你是我的'

                 }

             },

     })

     var vm = new Vue({

         el:'#app',

     })

     var vm1 = new Vue({

         el:"#app1"

     })

     </script>

vue的数据绑定和组件化的更多相关文章

  1. vue（9）—— 组件化开发 - webpack（3）

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  2. vue（8）—— 组件化开发 - webpack（2）

    webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...

  3. vue项目中使用组件化开发

    最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...

  4. Vue全家桶之组件化开发

    Vue全家桶之组件化开发   一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码   二. 组件注册 2.1 全局注册 Vue. ...

  5. 大话大前端时代(一) —— Vue 与 iOS 的组件化

    序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...

  6. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  7. Vue的指令以及组件化开发

    一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...

  8. Vue源码之组件化/生命周期(个人向)

    大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...

  9. vue render函数 函数组件化

    之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...

随机推荐

  1. Spring Boot 之httpClient使用

    版权声明:本文为博主原创文章,转载时请在文章最前方附上本文地址. https://blog.csdn.net/qq_35033270/article/details/80112085 超文本传输协议( ...

  2. 命令行：增强版 | Linux 中国

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/F8qG7f9YD02Pe/article/details/83542677 以下就是我如今使用的用于 ...

  3. Avizo/Amira应用 - 如何计算面孔率

    对于在Avizo或Amira中如何计算孔隙率,这个太简单,完成孔隙和整体材料的识别,再利用Volume Fraction计算即可获得,这里说的是每一层的面孔率如何计算? 数据导入,选取一个简单的过滤处 ...

  4. SpringBoot2.0微信小程序支付多次回调问题

    SpringBoot2.0微信小程序支付多次回调问题 WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等微信功能的后端开发. ...

  5. 朗科32G TF卡的读写测试

    卡是这样的, 下面是实际测试的结果. 容量测试 SKS的USB2外置读卡器, X240内置读卡器加上SD卡套    UNITEK的USB3.0读卡器, 经过UNITEK的USB3.0 HUB 看来读4 ...

  6. C# 对轻量级(IoC Container)依赖注入Unity的使用

    概述 Unity是一个轻量级的可扩展的依赖注入容器,支持构造函数,属性和方法调用注入.Unity可以处理那些从事基于组件的软件工程的开发人员所面对的问题.构建一个成功应用程序的关键是实现非常松散的耦合 ...

  7. 【Tensorflow】Tensorflow r1.0, Ubuntu, gpu, conda安装说明

    Install Anaconda and python 1. cuda-8.0 download cuda_8.0.61_375.26_linux.run ./cuda_8.0.61_375.26_l ...

  8. Jexus 5.4.6 on CentOS 6.6

    Mono 通过脚本安装 https://github.com/cjy37/linux-asp.net-installScript 版本 3.10 MongoDB 也可通过以上脚本安装 默认端口 270 ...

  9. centos 环境搭建jenkins服务

    1.下载jenkins war包 https://jenkins.io/download/ 选择Generic Java package (.war)下载2.下载apache tomcat 8 htt ...

  10. Openwrt 刷机后配置WAN口，安装luci和设置中文、安装挂载USB存储。

    官方版本的ROM编译时时没有把luci和uhttpd打包进去的,所以,要ssh登录到路由器后手动安装,默认用户名root,密码是空. 如果你的路由器是挂载在其他路由下面的,DHCP可以获取到IP,能正 ...