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), ...
随机推荐
- 一行代码搞定 R 语言模型输出！（使用 stargazer 包）
引言 使用stargazer包可以将 R 构建的模型结果以LATEX.HTML和ASCII格式输出,方便我们生成标准格式的表格.再结合rmarkdown,你就可以轻轻松松输出一篇优雅的文章啦~本文“使 ...
- 单片机成长之路（51基础篇） - 006 在Linux下搭建51单片机的开发烧写环境
在Linux下没有像keli那样好用的IDE来开发51单片机,开发环境只能自己搭建了. 第一步:安装交叉编译工具 a) 安装SDCC sudo apt-get install sdcc b)测试SDC ...
- MySQL技术内幕读书笔记（三）——文件
目录 文件 参数文件 日志文件 套接字文件 pid文件 表结构定义文件 INNODB存储引擎文件 文件 有以下类型文件 参数文件:告诉MYSQL实例启动时在哪里找到数据库文件,并且制定某些初始化参 ...
- apache中如何调用CGI脚本
参考: http://www.jdon.com/idea/cgi.htm http://www.jb51.net/article/49069.htm 在Apache在配置对CGI的支持 LoadMod ...
- 同一个tomcat下面放多个项目 每个项目用不同的域名访问
vim ./conf/server.conf <Host name=" appBase="/www/test1/webapps" ##这是war包存放的位置 unp ...
- ExtJS6 根据Value设置单元格颜色
renderer : function(value, meta) { if(parseInt(value) > 0) { meta.style = ""; } else { ...
- 字节输入流：io包中的InputStream为所有字节输入流的父类。
字节输入流:io包中的InputStream为所有字节输入流的父类. Int read();读入一个字节(每次一个): 可先使用new byte[]=数组,调用read(byte[] b) read ...
- Houdini技术体系 基础管线（三） ：UE4以选择区域的方式对地形做生成和更新 上篇
背景 前一节里,解决了Houdini地形无缝导入到UE4的流程问题.但这种方法也有它的局限性,在实际游戏项目里,LA和LD还是偏向在游戏引擎编辑器里工作,他们的一些设计也会影响到地形的信息,那 ...
- 养成良好的C++编程习惯（持续更新）
c++语言的灵活是建立在对编程者个人的编程素质的严格要求基础上的,好的C++编程习惯能避免很多问题. 没有好的编程习惯,极有可能编写一行代码,编译器能报十几个错误,而且 ...
- python使用requests发送application/x-www-form-urlencoded请求数据
def client_post_formurlencodeddata_requests(request_url,requestJSONdata): #功能说明:发送以form表单数据格式(它要求数据名 ...