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 ...
随机推荐
- 微信浏览器无法跳转到apk下载链接 微信屏蔽了我的APP下载链接如何处理
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时,界面显示一片空白,容易误导以为在下载呢 <!DOCTYPE html><html>&l ...
- 总结AWS使用要点
最近做毕业设计,要用AWS跑代码,以前只用过一次,这次踩了很多坑,记录一下.. AWS命令行管理S3 bucket AWS官方文档: http://docs.amazonaws.cn/cli/late ...
- 关于xml的相关知识
1 xml定义和用途 定义:XML (eXtensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup ...
- egret 添加帧动画
private showEffect(): void { //加载本地的帧动画资源 RES.getResByUrlNoCache("resource/assets/shenqi_eff.js ...
- .net公众号开发自动回复消息
using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web. ...
- 关于HTMl CSS
HTML 结构 CSS 表现 JS 行为 首先说一个SEO,搜索引擎优化 标准文档流:(1)前提:在没有css的干预下 (2)块级元素:独占一行,可定义宽和 ...
- JPA + SpringData 操作数据库--Helloworld实例
前言:谈起操作数据库,大致可以分为几个阶段:首先是 JDBC 阶段,初学 JDBC 可能会使用原生的 JDBC 的 API,再然后可能会使用数据库连接池,比如:c3p0.dbcp,还有一些第三方工具, ...
- PAT甲级 1001 A+B Format
题目链接:https://pintia.cn/problem-sets/994805342720868352/problems/994805528788582400 1001 A+B Format ( ...
- java static关键字的使用
static关键字 通常来说,创建类的时候,是用new创建此类的对象才可以获得,执行new创建对象时数据存储空间才被分配,其方法才被外界调用 有两种情况用new无法解决: 1 ...
- webservice接口,用Soapui
webservice接口怎么测试呢,他不需要你在拼报文了,会给一个webservice的地址,或者wsdl文件,直接在soapui导入,就可以看到这个webservice里面的所有接口,也有报文,直接 ...