- 浏览: 599167 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (669)
- oracle (36)
- java (98)
- spring (48)
- UML (2)
- hibernate (10)
- tomcat (7)
- 高性能 (11)
- mysql (25)
- sql (19)
- web (42)
- 数据库设计 (4)
- Nio (6)
- Netty (8)
- Excel (3)
- File (4)
- AOP (1)
- Jetty (1)
- Log4J (4)
- 链表 (1)
- Spring Junit4 (3)
- Autowired Resource (0)
- Jackson (1)
- Javascript (58)
- Spring Cache (2)
- Spring - CXF (2)
- Spring Inject (2)
- 汉字拼音 (3)
- 代理模式 (3)
- Spring事务 (4)
- ActiveMQ (6)
- XML (3)
- Cglib (2)
- Activiti (15)
- 附件问题 (1)
- javaMail (1)
- Thread (19)
- 算法 (6)
- 正则表达式 (3)
- 国际化 (2)
- Json (3)
- EJB (3)
- Struts2 (1)
- Maven (7)
- Mybatis (7)
- Redis (8)
- DWR (1)
- Lucene (2)
- Linux (73)
- 杂谈 (2)
- CSS (13)
- Linux服务篇 (3)
- Kettle (9)
- android (81)
- protocol (2)
- EasyUI (6)
- nginx (2)
- zookeeper (6)
- Hadoop (41)
- cache (7)
- shiro (3)
- HBase (12)
- Hive (8)
- Spark (15)
- Scala (16)
- YARN (3)
- Kafka (5)
- Sqoop (2)
- Pig (3)
- Vue (6)
- sprint boot (19)
- dubbo (2)
- mongodb (2)
最新评论
先说一下指令里面的值都是表达式
v-model 表单控件双向绑定数据
v-for循环
v-show 显示与隐藏
v-if显示与隐藏 (dom元素的删除添加 个人理解)
v-bind 用于绑定 html 属性 缩写 :value=""
v-on 事件
v-text 读取文本不能读取html标签
v-html 能读取html标签
v-bind:class 类名
new Vue({ el: "#box", // element(元素) 当前作用域 id="box" data(){ return { //用return返回对象 msg: "122" } } })
v-model 表单控件双向绑定数据
<input type="text" v-model="msg"/>{{msg}} <!--取数据-->
v-for循环
<div id="box"> <ul> <!--ng-repeat--> <li v-for="item in arr"> <span>{{item.name}}</span> <span>{{item.age}}</span> </li> </ul> </div> <script type="text/javascript"> new Vue({ el:'#box', data(){ return{ // arr:['module','views','controlle','aaaaa'] arr:[ {"name":"xiaohong1","age":12}, {"name":"xiaohong2","age":12}, {"name":"xiaohong3","age":12}, {"name":"xiaohong4","age":12} ] } } }) </script>
v-show 显示与隐藏
<div id="box"> <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div> </div> </body> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-if显示与隐藏 (dom元素的删除添加 个人理解)
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-bind 用于绑定 html 属性 缩写 :value=""
<div id="box"> <input type="text" v-bind:value="msg"> <a :href="link">点击</a> </div> <script> new Vue({ el: "#box", data(){ return { msg: "12222", link:"1、v-model.html" } } }) </script>
v-on 事件
<div id="box"> <!-- v-on --> <button v-on:click="say">按钮</button> <!--<button @click="say">按钮</button>--> </div> <script> new Vue({ el: "#box", data(){ return {} }, methods: { say() { alert(111); } } }) </script>
v-text 读取文本不能读取html标签
<div id="box"> <div v-text="msg"> </div> <script> new Vue({ el: "#box", data(){ return {msg:"11111"} }, methods: { say() { alert(111); } } }) </script>
v-html 能读取html标签
<div id="box"> <div v-html="msg"></div> </div> <script> new Vue({ el: "#box", data(){ return { msg:"<h1>121212</h1>" } }, methods: { say() { } } }) </script>
v-bind:class 类名
<div id="box"> <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div> </div> 当isred = true时class的值是red new Vue({ el: "#box", data(){ return { isred:false } } })
发表评论
文章已被作者锁定,不允许评论。
-
Vue 组件相关知识学习
2018-04-13 15:27 390Vue.js 组件 // 组件(Component)是 ... -
Vue 实例属性($option $el等)
2018-04-12 09:14 3242属性: vm.$el:获取Vue实例关联的DOM元素 vm ... -
Vue methods中方法之间的调用
2018-04-12 09:04 1736delAllOrderList:function(good ... -
Vue 计算属性(computed)学习
2018-04-11 15:55 9631.基础例子: <div id = "exam ... -
Vue 过滤器(|)学习
2018-04-11 14:30 740一、Vue提供的过滤器 vue本身提供了很多便利的过滤器,这里 ... -
js 动态Post请求防止在输入栏中显示参数
2018-01-08 10:21 631动态进行Post请求 var f=document.cre ... -
js autocomplete实现下拉模糊查询
2018-01-04 10:48 11121.js编写 // 获得焦点是重新进行查询 $(&quo ... -
js 遍历并且赋值
2017-12-19 13:46 641$("#productInfo").f ... -
js 鼠标移过去渐变的效果(页面固定 定位栏)
2017-10-31 11:29 6281.html代码 <div id="loc ... -
js 判断图片是否存在
2017-10-27 08:56 876当图片不存在时,将触发onerror,onerror 中img ... -
js 在页面中跳转到指定位置
2017-10-24 15:29 13441.页面中代码 <div style="lef ... -
Javascript 总结汇总
2016-11-04 15:06 349var timeoutid = window.setTimeo ... -
js easyui tree判断是否父节点
2016-09-08 10:17 812function isIncludeParentNode( ... -
CSS 点击div的同时显示或隐藏的div
2016-08-16 17:18 621<div id="up"> ... -
js 通过调用方法终止js代码继续执行的问题(采用throw解决)
2016-07-12 14:15 490一个方法如何终止另一个方法执行的问题 function ... -
js lightbox展示图片的案例
2016-06-13 09:35 688如何使用 1、Lightbox v2.0 使用 Protot ... -
js 静态方法与实例方法
2016-05-31 14:26 1548静态方法是指不需要声明类的实例就可以使用的方法 实例方法是 ... -
js 动态显示时间(setTimeout)
2016-05-23 15:20 667// 全局变量 var timeoutId ; //开 ... -
jQuery toggle trigger方法使用
2016-05-17 14:44 1104toggle 定义 toggle() 方法用于绑定两个或多个 ... -
js 全局函数一览
2016-05-17 09:46 3901、decodeURI() 参数:string 功能描述: ...
相关推荐
在Vue.js框架中,v-on:click是用于监听DOM事件并运行一些JavaScript代码的功能。使用v-on:click可以为元素绑定事件处理器,从而在用户与页面交互时执行相应的函数。在Vue中处理点击事件时,我们常常需要获取被点击的...
本文将介绍如何在Vue中使用v-on:click事件绑定器传递动态参数,这个过程不仅涉及到Vue框架的事件处理机制,还包括了与jQuery结合使用的技巧。 首先,我们来了解Vue中的事件绑定方法。在Vue中,我们使用v-on指令(或...
本文将深入探讨Vue.js的事件处理器`v-on:click`,它是如何工作的,以及如何在实际项目中有效利用。 ### 1. `v-on`指令 `v-on`是Vue中的一个指令,用于监听DOM事件。它允许你将Vue实例的方法绑定到特定的DOM元素上...
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成,此时就不可以用 v-model绑定,而是用传统的方法 value 动态绑定,并且用子组件绑定向父组件传递值和事件。 代码如下: //子组件 <input ...
npm install vue-class-component vue-property-decorator --save-dev 一梭子直接干; 其次,咱来说说它们的区别与联系: vue-property-decorator社区出品;vue-class-component官方出品 vue-class-component提供了...
在Vue中,事件绑定是通过`v-on`指令或其简写`@`来实现的。这篇文章将深入探讨这两种方法,以及如何在Vue组件中触发和响应事件。 1. **Vue.js事件绑定的一般格式** 在Vue中,事件绑定通常使用`v-on`指令,后面跟上...
本文将深入探讨如何使用Vue锚点指令v-anchor实现页面内元素的快速定位。 锚点指令v-anchor的基本使用方法如下: 1. 封装一个anchor.js文件,在这个文件中定义锚点指令的处理函数。这个函数将会在元素被插入DOM时...
在Vue中,开发者可以使用`v-on`指令来监听DOM事件并执行相应的JavaScript代码。本文将深入讲解Vue事件处理的各个方面。 首先,`v-on`指令用于绑定事件监听器。例如,下面的代码演示了一个简单的按钮点击事件: ```...
`v-on`指令就是Vue.js中用于事件绑定的关键机制,它允许我们将DOM事件与Vue实例的方法关联起来。本篇文章将深入探讨`v-on`事件绑定及其相关知识点。 首先,让我们了解`v-on`的基本用法。在Vue模板中,我们可以使用`...
Vue 动态属性数据绑定(v-bind 指令) Vue 的动态属性数据绑定是通过 v-bind 指令来实现的,该指令可以将数据模型中的数据绑定到 HTML 元素的属性上。下面将详细介绍 v-bind 指令的使用方法和应用场景。 一、基本...
vue-日历组件基于vue 2.0开发的轻量,高性能日历组件占用内存小,性能好,款式多,... components: { Calendar } <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" // v-on:isToday="clickToday
现场演示在这里安装npm install vue-js-toggle-button --save进口导入插件import ToggleButton from 'vue-js-toggle-button'Vue.use(ToggleButton)或者导入组件import { ToggleButton } from 'vue-js-toggle-button'...
之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id=counter-event-example> <p>{{ total }} <button-counter v-on:ee=incrementTotal></button-counter> ...
Vue-拖动-调整大小 用于可拖动和调整大小元素的 Vue 组件。目录特征安装和基本使用道具活动贡献执照演示演示特征轻量级、无依赖所有道具都是反应性的支持触摸事件将元素对齐到自定义网格使用可拖动、可调整大小或...
`v-on`指令可以与`v-bind`一起使用,结合事件修饰符,如`.stop`, `.prevent`, `.capture`, `.self`, `.once`等,实现更复杂的事件处理。 总结,`v-bind`是Vue.js中的关键指令,它实现了数据与DOM元素属性之间的动态...
接下来,将SVG图标文件夹中的每个SVG文件转换为Vue组件,可以使用`@vue/cli-service`提供的`vue-cli-service`命令: ```bash vue-cli-service build --target lib --name icons src/icons/*.svg ``` 这将在`dist`...
1.v-on用于绑定dom事件 简写 @ ,v-on:click="handleClick"/@click="handleClick" v-bind用于绑定html属性, 简写 : ,v-bind:content="item"/:content="item" 2.组件 component 全局组件 Vue.component(...
vue-analysis vue学习。vue源码分析。 Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令: 指令。Directives。v-seen。 v-show。 修饰符。v-on:submit.prevent="onSubmit" 缩写:v-bind:a=...