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 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
随机推荐
- reverse iterator
Problem 1: vector<int> coll = { 1, 2, 3, 4, 5, 6, 7, 8, 9 }; vector<int>::const_iterator ...
- ios 设置声音和震动,单独控制
一.今天项目中涉及了设置这快的声音震动和响铃,搞的头大,以前搞过,只是简单的调用系统的方法就可以实现,但是现在的公司要求,震动是震动,响铃是响铃,我看了微信,微信也是的分开的,做的很好,但是我就纳闷了 ...
- ios中,在SearchBar里面搜索内容,可根据内容来查找所需的信息资源,可获得SearchBar中的内容
贴一段我很久以前写的小demo,你们就明白了,是把textField套在alertView里的@interface ViewController : UIViewController <UIAl ...
- AX7: HOW TO USE TABLE METHOD EXTENSION CLASS
To create new methods on a table without customize you should use the Table method extension class. ...
- ACM知识点
基础算法 高精 模拟 分治 贪心 排序 DFS 迭代加深搜索 BFS 双向BFS 动态规划 DAG上DP 树上DP 线性DP 图算法 最短路 FLYD DJATL BF 最大流 Dinic ISAP ...
- jquery append 方法应用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...
- 1、基于MFC的OpenGL程序
首先,使用的库是GLUT以及GLAUX,先下载两者,添加查找路径以及链接 一.单文本文件 工程openGLMFC 1.创建单文本文件 2.添加路径.链接 方法如之前篇章所示, 链接库为op ...
- JS判断input按了回车键
参考代码如下: <input type="textbox" id="textbox1" onkeypress="CheckInfo" ...
- cs11_c++_lab4b
SparseVector.hh class SparseVector { private: //结构体不一定会用到,不用初始化 struct node { int index; int value; ...
- js实现继承的两种方式
这是面试时面试官会经常问到问题: js的继承方式大致可分为两种:对象冒充和原型方式: 一.先说对象冒充,又可分为3种:临时属性方式.call().apply(): 1.临时属性方式: 当构造对象son ...