(一)

  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 组件重要选项的更多相关文章

  1. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  4. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  5. Vue.js 组件的三个 API:prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  6. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  7. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  8. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  9. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

随机推荐

  1. 在亚马逊amazon的AWS上安装Node和MongoDB服务器

    在亚马逊amazon的AWS上安装Node和MongoDB服务器 在建立AWS上账号.创建EC2 ,用putty链接上之后,就可以用下面的方法开始安装. !!! 如果不是是自己建立的EC2, 而是由B ...

  2. 自动化测试 using System.Windows.Automation;

    frameworke3.0 及以上 using System.Windows.Automation; UIAutomationClient.dll UIAutomationClientsideProv ...

  3. mac下有道词典用不了

    有道词典           对于Chrome取词,通过安装插件就可以解决 Chrome 下取词的问题,这个插件就放在有道词典程序目录中.最简便的安装方法如下: 首先确保你已经安装好了有道词典.然后复 ...

  4. ARToolKit for Unity环境搭建(初步搭建成功)

    最近一段时间才开始学习使用Unity3d,AR的学习使用中,先后使用了metaio SDK.vuforia SDK,但由于这两个都属于收费的,今天开始尝试使用ARToolKit.先将ARToolKit ...

  5. JS数组转成json字符串的注意事项

    在js中常常会将一个数组转成json字符串发送给后端. 这时候在定义数组数据结构的时候需要格外注意,意味json中是有集合和对象的区别的. 集合的定义是[];对象的的定义是{}. 这时候,在创建数组时 ...

  6. Docker网络详解

         当 Docker 启动时,会自动在主机上创建一个 docker0 虚拟网桥,实际上是 Linux 的一个 bridge,可以理解为一个软件交换机.它会在挂载到它的网口之间进行转发.      ...

  7. PostgreSQL 在centos 7下的安装配置

    安装postgresql: sudo yum install postgresql-server 初始化数据库: sudo postgresql-setup initdb 启动数据库: sudo sy ...

  8. S2SH CRUD 整合

    采用的框架 Struts2+Spring4+Hbiernate4. 目录结构 :    EmployeeAction: package com.xx.ssh.actions; import java. ...

  9. android 非activity如何得到布局文件 (java文件中获取布局文件)

    Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...

  10. 头像上传,拖拽,裁切 (非HTML5)版本

    演示地址: http://codeman35.itongyin.com:19002/v2/web_demo.html 功能: 支持滚轴放大缩小,鼠标拖动,裁切可视区域,裁切和图片处理都是后端操作.