vue 基础重要组件 模板指令 事件绑定
组件: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 基础重要组件 模板指令 事件绑定的更多相关文章
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
- 四、vue基础--自定义组件
1.语法:Vue.component("组件名字",{data,template}),代码如下: a. data: 必须是一个函数,有一个返回值.和vue里面的使用方法一样 b. ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生
第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- vue.js的一些模板指令简述
1.模板指令都是写在<template></template>html里面 v-text : value是什么就显示什么,如果value里面有html的标签,也会直接显示出 ...
- vue基础:组件的创建方式和组件的data值
vue组件是什么: 组件是可复用的 Vue 实例,组件可以进行任意次数的复用 vue组件创建方式有3种: //第一种创建组件的方式// Vue.extend创建全局组件var com1 = Vue.e ...
随机推荐
- linux服务器开机启动tomcat
程序自启动脚本实质上就是一个shell脚本.以简单的Tomcat自启动脚本为例,Tomcat使用安装目录下的startup.sh启动.shutdown.sh停止,我们可以把它们写到一个启动脚本里. 1 ...
- windows搭建redis集群最佳实践
一.redis的下载安装: (1)下载Redis-x64-3.2.100地址:https://github.com/MicrosoftArchive/redis/releases (2)安装后文件如下 ...
- 关于Ubuntu使用笔记
Ubuntu vm tools 安装 sudo apt install open-vm-tools-desktop 在安装程序时Ubuntu会将安装目录锁定,安装结束后会解除锁定,中断安装后无法再安装 ...
- MFC的PNG贴图按钮类(详细注释)
MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...
- [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 金 ...
- mpeg2文件分析(纯c解析代码)
参考链接: 1. MPEG-2码流结构分析 https://www.cnblogs.com/CoderTian/p/9246225.html(本文语法采用这里的截图,代码原创) 1. mpeg2的码流 ...
- ORACLE数据库管理员的职责
ORACLE数据库管理员的职责 一.概述 ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据库的空间使用情 ...
- Python机器学习(基础篇---监督学习(k近邻))
K近邻 假设我们有一些携带分类标记的训练样本,分布于特征空间中,对于一个待分类的测试样本点,未知其类别,按照‘近朱者赤近墨者黑’,我们需要寻找与这个待分类的样本在特征空间中距离最近的k个已标记样本作为 ...
- Jsoup获取全国地区数据(省市县镇村)
最近手头在做一些东西,需要一个全国各地的地域数据,从省市区到县镇乡街道的.各种度娘,各种谷歌,都没找到一个完整的数据.最后功夫不负有心人,总算找到一份相对来说比较完整的数据,但是这里的数据也只是精确到 ...
- 18-09-09 Linux 系统如何获取外部的数据例如 软件的2中方式
方式一 利用U盘 手动挂载/卸载 U盘==========================================1, cat /proc/partitions查看U盘插入前后, 多出的 s ...