vue设置textarea最大字数_【Vue 学习】 Vue常用系统指令
1 v-on 指令
1.1 v-on:click
1.2 v-on:keydown
1.3 v-on:mouseover
1.4 事件修饰符
1.5 按键修饰符
2 v-text 、v-html、v-blind
2.1 v-text 与 v-html
2.2 v-blind
3 v-model
4 v-for
4.1 遍历数组
4.2 遍历对象
4.3 遍历对象数组
5 v-if 与 v-show
1 v-on 指令
v-on 指令用来监听 DOM 事件，并在触发时运行一些 JavaScript 代码
1.1 v-on:click
v-on:click 是用来点击事件的指令，可以和 button 标签一起使用，看一下案例：
使用v-on:click绑定fun函数
通过 methods 方法编写方法体
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:clicktitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('twoStar')">点击button>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"oneStar"
},
methods:{ //methods(方法)表示一个具体的操作, 主要写 业务逻辑
fun1:function (msg) { //方法体
this.message=msg;
}
}
});
script>
html>
点击后message的值改变
1.2 v-on:keydown
v-on:keydown 指令表示键盘按下事件，这里做一个案例：让键盘只有按下 0~9 才有效，其他按键均无效
创建text，用来键盘输入显示，绑定函数并传入 event 参数
创建方法体
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:keydowntitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<input type="text" v-on:keydown="fun2($event)">
div>
body>
<script>
//view model
new Vue({
el:"#app",
methods:{
//方法体
fun2:function (event) {
var keyCode = event.keyCode; //定义按键事件
if(keyCode < 48 || keyCode > 57){ //判断按键值
event.preventDefault(); //按键不生效
}
}
}
});
script>
html>
只有在text中输入 0~9 数字才生效
1.3 v-on:mouseover
v-on:mouseover 指令表示鼠标移动到某个文件域事件，案例：在一个文件域上模拟鼠标移动和阻止事件传播
在div上创建一个textarea区域
设置鼠标悬停事件
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:mouseovertitle>
<style>
#div {
background-color: red;
width: 200px;
height: 200px;
}
style>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover="fun2($event)">文件域textarea>
div>
div>
body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("鼠标悬停在div上");
},
fun2:function (event) {
alert("鼠标悬停在textarea上");
event.stopPropagation();
}
}
});
script>
html>
1.4 事件修饰符
在 Vue.js 中，提供了事件修饰符来处理 DOM 事件细节，通过由点(.)表示的指令后缀来调用修饰符，常用的事件如下：
.stop：触发停止事件
.prevent：触发阻止事件
.capture：捕获事件
.self：触发自己的事件
.once：只执行一次事件
这里演示 prevent 阻止事件，先创建提交到百度的表单，然后阻止其跳转
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:事件修饰符title>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<form v-on:submit.prevent action="http://www.baidu.com" method="get">
<input type="submit" value="提交">
form>
div>
body>
<script>
//view model
new Vue({
el:"#app"
});
script>
html>
1.5 按键修饰符
按键修饰符是获取按下键盘的事件，Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，全部的按键别名如下：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
以 .enter 为例
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符title>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<input type="text" v-on:keydown.enter="fun($event)">
div>
body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun:function () {
alert("按下了enter键")
}
}
});
script>
html>
2 v-text 、v-html、v-blind
2.1 v-text 与 v-html
v-text：显示原文本
v-html：以标签内容显示
span style="box-sizing: border-box;">html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-htmltitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<div v-text="message">div>
<div v-html="message">div>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"
oneStar
"
}
});
script>
html>
2.2 v-blind
在前面使用插值表达式的时候，都是在标签内部写插值表达式，如果要给标签的属性赋值，绑定插值表达式，那就要用到 v-blind 指令
来看案例：在设置HTML文本字体颜色的时候，可以使用 v-blind 来绑定颜色
span style="box-sizing: border-box;">html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-blindtitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">派大星font>
<font size="5" :color="ys2">海绵宝宝font>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green",
}
});
script>
html>
3 v-model
可以使用 v-model 指令给 value 属性赋值，比如给 form 表单中的 value 赋值：
span style="box-sizing: border-box;">html>
<html xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-modeltitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<form action="" method="post">
用户：<input type="text" name="username" v-model="user.username"><br>
密码：<input type="text" name="password" v-model="user.password"><br>
form>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"oneStar",
password:"123"
}
}
});
script>
html>
4 v-for
v-for 指令是用来循环遍历的，相当于 for 循环，这里演示遍历数组、遍历对象、遍历对象数组
4.1 遍历数组
span style="box-sizing: border-box;">html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历数组title>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(arr,index) in arrs">{{arr +" : "+ index}}li>
ul>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
arrs:[1,2,3,4]
}
});
script>
html>
4.2 遍历对象
span style="box-sizing: border-box;">html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象title>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in person">{{key + " : " + value}}li>
ul>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
person:{
name:"oneStar",
age:18
}
}
});
script>
html>
4.3 遍历对象数组
span style="box-sizing: border-box;">html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象title>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号td>
<td>姓名td>
<td>年龄td>
tr>
<tr v-for="(person,index) in persons">
<td>{{index}}td>
<td>{{person.name}}td>
<td>{{person.age}}td>
tr>
table>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
persons:[
{name:"oneStar",age:18},
{name:"twoStar",age:19},
{name:"threeStar",age:20}
]
}
});
script>
html>
5 v-if 与 v-show
v-if 是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
span style="box-sizing: border-box;">html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-if与v-showtitle>
<script src="js/vuejs-2.5.16.js">script>
head>
<body>
<div id="app">
<div v-if="flag">派大星div>
<div v-show="flag">海绵宝宝div>
<button v-on:click="change">转换button>
div>
body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false,
},
methods:{
change:function () {
this.flag = !this.flag;
}
}
});
script>
html>
点击转换能将上面的文字影藏和显示
vue设置textarea最大字数_【Vue 学习】 Vue常用系统指令相关推荐
- vue 回车查询 按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
- vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
- 能看懂vue源码什么水平_送你 Vue 学习路线的最佳实践
最近面试发现很多人上面写了熟练使用 Vue 开发框架并了解其设计思路.可是我问了些 Vue设计思路上的的问题,他们就回答的吞吞吐吐. 有些人以为知道 Object.defineProperty 这个 ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- 一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说 ...
- vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
- vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点 轻 ...
- 发那科pmc编程手册_如何学习FANUC PMC功能指令
在之前的学习课程中我们学习了FANUC内置编程器以及LADDER III软件的操作,知道如何根据报警信息查找报警位置等相关的小技巧,但是呢,对于FANUC PMC的学习还有一部分是对程序的理解.这样才 ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
最新文章
- 32位jdk_MyEclipse 10(（32/64位）、（MAC）、（Linux）)软件安装教程
- iOS开发中的 地区转经纬 经纬度转地区
- 使用tomcat搭建Jenkins环境（centos7.3）
- 你们公司内部有WiKi么
- luogu4407 [JSOI2009]电子字典 字符串hash + hash表
- Activity service 通信
- ES6 Map对象的使用
- 【Leetcode | 02】二叉树、线性表目录
- phpMyAdmin批量修改Mysql数据表前缀的方法
- Spring MVC-页面重定向示例（转载实践）
- Vue列表渲染---vue工作笔记0009
- 自定义标签处理器类的生命周期
- 解决sublime text 3使用Install Package时出现There are no packages available for installation问题
- Ztree 改 节点
- 条码打印软件如何批量导入图片和图片名称
- MIPS中addi指令被分成三条指令的问题
- ARTS打卡10-抓住海森堡Bug
- win10计算机三级密码设置,Win10系统下共享文件夹如何设置密码访问？
- 黑暗城堡 LibreOJ - 10064(SPFA)
- 带宽、延时、吞吐率、PPS 这些都是啥？