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

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

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

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

  1.  <body>
  2.      <div id="app">
  3.        <my-component></my-component>
  4.      </div>
  5.      <div id='app1'>
  6.        <my-component></my-component>
  7.      </div>
  8.  
  9.      <script>
  10.      Vue.component('my-component',{
  11.          template:`<div>
  12.                   {{val1}}             //每次都会先找data函数里的值，如果没有找computed里的值
  13.              </div>`,
  14.              data:function(){
  15.                  console.log(111)               //先输出111，证明每个绑定的变量都会导致data执行，return出来一个新的值
  16.                  return {
  17.                      val:'hello world'
  18.                  }
  19.              },
  20.              computed:{
  21.                  val1:function(){
  22.                      console.log(222)            //再执行输出222，
  23.                      return '你是我的'
  24.                  }
  25.              },
  26.      })
  27.      var vm = new Vue({
  28.          el:'#app',
  29.      })
  30.      var vm1 = new Vue({
  31.          el:"#app1"
  32.      })
  33.      </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. 条件式变分自编码机（Conditional Variational Autoencoders）

    Conditional Variational Autoencoders 条件式变换自编码机 摘要: Conditional Variational Autoencoders --- 条件式变换自编码 ...

  2. java/javac命令行如何同时引用多个包；错误 TypeError: 'JavaPackage' object is not callable 的含义

    出现这类错误提示:'JavaPackage' object is not callable,可以看下所引用的jar包或者class文件是否在java的路径搜索范围内 命令行模式下:javac可以编译* ...

  3. 使用python实现深度神经网络 3（转）

    使用python实现深度神经网络 3 快速计算梯度的魔法--反向传播算法 快速计算梯度的魔法--反向传播算法 一.实验介绍 1.1 实验内容 第一次实验最后我们说了,我们已经学习了深度学习中的模型mo ...

  4. 一句话Javascript实现价格格式化

    //小数点后面如果超过3位则转换错误,如1.1234 正确的是1.1234但却错误的转换成了1.1,234 var test1 = '1234567890.123' var format = test ...

  5. IntelliJ IDEA web项目 工程构建运行部署

  6. C# System.IO.FileMode

    字段 Append 6 若存在文件,则打开该文件并查找到文件尾,或者创建一个新文件. 这需要 Append 权限. FileMode.Append 只能与 FileAccess.Write 一起使用. ...

  7. 图 总结 AI

    这个哥们 总结的太好了, 我忍不住就“偷”过来了 人工智能是一门极富挑战性的科学,从事这项工作的人必须懂得计算机知识,心理学和哲学. 人工智能是包括十分广泛的科学,它由不同的领域组成,如机器学习,计算 ...

  8. 使用 Nginx 为 Linux 实例绑定多个域名

    KB: 41467 · 更新时间:2018-11-16 20:26:51     Nginx 是一款广泛应用的 Web 服务器,常用于反向代理.负载均衡器以及 HTTP 缓存等.本文以 CentOS ...

  9. fiddler的编程文章

    https://www.cnblogs.com/trevan/p/9487223.html https://www.cnblogs.com/rufus-hua/p/5275980.html https ...

  10. gitlab 建立本地仓库

    1.首先在gitlib上进行注册 注册与登录 为了用户的隐私,我们的私人 GitLab 平台关闭了自主注册.申请 GitLab 账号请联系工作站管理员:liuhaoyang@pku.edu.cn 初次 ...