Vue.js 组件重要选项
(一)
new一个Vue对象的时候,可以设置它的属性,其中最重要是三个,分别是
data,,methods,watch.
new Vue({
data:{
a:,
b:[]
},
methods:{
doSomething:function(){
this.a++;
}
},
watch:{
'a':function(val,oldVale){
}
}
})
(二)模板指令
1、数据渲染 :v-text,v-html, {{}}
2、控制模块隐藏: v-if,v-show
3、渲染循环列表: v-for
data:{
items:[
{ lable:'apple' }
]
}
<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
4、事件绑定
v-on
<button v-on:click="doThis"></button>
<button @clcik="doThis"></button>
5、属性绑定
v-bind
<img v-bind:src="data:imageSrc">
<div :class="{ red:isRed } "></div>
<div :class="[classA,classB]"></div>
Vue.js 组件重要选项的更多相关文章
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件的三个 API:prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
随机推荐
- 缩略信息是: sending message to a Handler on a dead thread 我是用IntentService时报的
稍微纤细一点儿的信息是: Handler (android.os.Handler) {215ddea8} sending message to a Handler on a dead thread. ...
- xcode 8 去除无用打印信息
更新Xcode8之后,控制台会默认打印一坨东西,屏蔽的方法如下:Xcode8里边 Edit Scheme-> Run -> Arguments, 在Environment Variable ...
- 机器学习笔记——autoEncoder使用
前向传播与反向传播 十.参考文献 [1]http://blog.csdn.net/changyuanchn/article/details/15681853
- android微信分享要注意的地方
最近在做android端分享的功能,在微信开放平台查看了下官网上的开发文档,一步一步的按文档上的步骤来: 1.申请你的AppID 2.下载开发工具包 3.搭建开发环境,引入libammsdk.jar文 ...
- java文件名更改一直是false,看看是否是文件打开没有关
// 更改文件名称 public static void chenckFileName(String oldFile, String newFileName) { File file = new Fi ...
- Thinkphp源码分析系列(三)– App应用程序类
// +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO ...
- matlab clear
clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...
- 一些bug总结
1:IE浏览器低版本的parseInt问题; 开发中遇到把月份转为小数时出现bug 例子:parseInt('08')-1; 本来应该得7,但是最后的结果却是-1,月份得-1,根据得到的月份获取的日历 ...
- NSSortDescriptor对象进行数组排序
//创建一个数组 NSArray *array = @[@"zhangsan", @"lisi", @"zhonger", @"z ...
- Linux第三周——跟踪分析内核的启动过程
跟踪分析内核的启动过程实验 张潇月<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 这周主要学习的是对内核 ...