vue的数据绑定和组件化
组件：就是自定义标签, 也是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的数据绑定和组件化的更多相关文章
- vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- vue（8）—— 组件化开发 - webpack（2）
webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...
- vue项目中使用组件化开发
最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
- 大话大前端时代(一) —— Vue 与 iOS 的组件化
序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- Vue的指令以及组件化开发
一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...
- Vue源码之组件化/生命周期(个人向)
大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
随机推荐
- 如何将Powerdesign物理模型中的name复制成comment
Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl ' the current model ' get t ...
- tmux终端工具的简单使用
Linux上管理和运行进程除了程序级别的守护进程之外,经常用到的有比如nohup &的方式,以及screen会话的方式,而Tmux正是一个非常优秀的终端进程管理的软件,和GNU screen类 ...
- htop使用详解
一．Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...
- 在netty3.x中存在两种线程：boss线程和worker线程。
在netty 3.x 中存在两种线程:boss线程和worker线程.
- Nginx——location匹配与在配置中的优先级
1. location表达式类型 location ^~ /api/v7/ { proxy_next_upstream http_404 http_500 http_502 http_503 http ...
- PDO::__construct(): Server sent charset (255) unknown to the client. Please, report to the developers
微擎出错信息: Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[HY000] [2054] Server s ...
- 20.2.翻译系列：EF 6中基于代码的数据库迁移技术【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/code-based-migration-in-code-first.aspx EF 6 ...
- Spring Boot系列——7步集成RabbitMQ
RabbitMQ是一种我们经常使用的消息中间件,通过RabbitMQ可以帮助我们实现异步.削峰的目的. 今天这篇,我们来看看Spring Boot是如何集成RabbitMQ,发送消息和消费消息的.同时 ...
- Python3将ipa包中的文件按大小排序
[本文出自天外归云的博客园] 给你个ipa包,解压前输出包大小,解压后把里面的文件按大小排序.代码如下: import os import shutil import zipfile _ipa_zip ...
- linux 查找并kill进程
以php以关键字查找进程 $ ps aux | grep php root 32957 0.0 0.1 2470904 8908 s002 S+ 4:53下 ...