组件:data methods watch

new vue({

data:{

a:1,

b:[]

},

methods:{

dosomething:function(){

this.a++;

}

},

watch:{

a:function(val,oldval){

console.log(val,oldval);

}

}

})

模板指令:html和vue对象的粘合剂

数据渲染:

  • v-text:有html标签元素之间展现出来
  • v-html:会处理标签元素
  • {{     }}

控制模块隐藏:

new vue({

data:{

isShow:true

}

})

  • v-if:不渲染 <p v-if='isShow'></p>
  • v-show 渲染,通过display=none方式隐藏 <p v-show='isShow'></p>

渲染循环列表:

new vue({

data:{

itme:[{label:'apple'},{label:'banana'}]

}

})

<ul>

<li v-for='item in items'>

<p v-text='item.label'></p>

</li>

</ul>

事件绑定:

v-on

<button v-on:click="dothis"></button>

或者<button @click="dothis"></button>

methods:{dothis:functon(){}}

v-bind:属性和类的绑定

因为比较常用,所以可以省略“v-bind",直接写”:src“

<img v-bind:src="imgSrc"/>

<div  :class='{red:isRed}'></div>

vue 基础重要组件 模板指令 事件绑定的更多相关文章

  1. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  2. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  4. 四、vue基础--自定义组件

    1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...

  5. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  6. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  7. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. vue.js的一些模板指令简述

    1.模板指令都是写在<template></template>html里面   v-text : value是什么就显示什么,如果value里面有html的标签,也会直接显示出 ...

  9. vue基础:组件的创建方式和组件的data值

    vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...

随机推荐

  1. linux服务器开机启动tomcat

    程序自启动脚本实质上就是一个shell脚本.以简单的Tomcat自启动脚本为例,Tomcat使用安装目录下的startup.sh启动.shutdown.sh停止,我们可以把它们写到一个启动脚本里. 1 ...

  2. windows搭建redis集群最佳实践

    一.redis的下载安装: (1)下载Redis-x64-3.2.100地址:https://github.com/MicrosoftArchive/redis/releases (2)安装后文件如下 ...

  3. 关于Ubuntu使用笔记

    Ubuntu vm tools 安装 sudo apt install open-vm-tools-desktop 在安装程序时Ubuntu会将安装目录锁定,安装结束后会解除锁定,中断安装后无法再安装 ...

  4. MFC的PNG贴图按钮类(详细注释)

    MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...

  5. [Oracle][DATAGUARD] PHYSICAL STANDBY环境里,11.2.0.4 , 也可以使用Pfile来运行Primary和Standby(虽然很少有人用)

    ####Primary#### [oracle@primary ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on 金 ...

  6. mpeg2文件分析(纯c解析代码)

    参考链接: 1. MPEG-2码流结构分析 https://www.cnblogs.com/CoderTian/p/9246225.html(本文语法采用这里的截图,代码原创) 1. mpeg2的码流 ...

  7. ORACLE数据库管理员的职责

    ORACLE数据库管理员的职责 一.概述 ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据库的空间使用情 ...

  8. Python机器学习(基础篇---监督学习(k近邻))

    K近邻 假设我们有一些携带分类标记的训练样本,分布于特征空间中,对于一个待分类的测试样本点,未知其类别,按照‘近朱者赤近墨者黑’,我们需要寻找与这个待分类的样本在特征空间中距离最近的k个已标记样本作为 ...

  9. Jsoup获取全国地区数据(省市县镇村)

    最近手头在做一些东西,需要一个全国各地的地域数据,从省市区到县镇乡街道的.各种度娘,各种谷歌,都没找到一个完整的数据.最后功夫不负有心人,总算找到一份相对来说比较完整的数据,但是这里的数据也只是精确到 ...

  10. 18-09-09 Linux 系统如何获取外部的数据例如 软件的2中方式

    方式一 利用U盘  手动挂载/卸载 U盘==========================================1, cat /proc/partitions查看U盘插入前后, 多出的 s ...