第二节: Vuejs常用特性1
一. 常用特性
1. 表单元素
通过 v-model指令绑定 输入框、单选/多选框、下拉框、文本框
2. 表单域修饰符
(1) .number:转换成数值，如果输入的是非数字字符串时，无法进行转换
(2) .trim:自动过滤输入的收尾字符串，不能去除中间的空格
(3) .lazy:将输入input（即输入）事件切换成change事件，在失去焦点或按下回车键才更新内容值，输入的过程中不响应式更新。
3. 自定义指令
(1).全局自定义：Vue.directive 注册全局指令，里面除了第一个参数el默认传入外，还可以传递别的参数
(2).实例内自定义：在实例的directives定义局部指令
注意：这里自定义指令的时候，不要驼峰命名，如myFocus！，要这样命名：myfoucs。 如果myFocus来命名，只能这样 v-my-focus，不推荐。
PS 钩子函数
自定义指令的时候要用到钩子函数，这里仅介绍两个最常用的。
A. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
B. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
钩子函数中的固定参数：
A. el：指令所绑定的元素，可以用来直接操作 DOM 。
B. binding：一个对象，包含以下属性：
a. name：指令名，不包括 v- 前缀。
b. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
c. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
d. expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
C. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
D. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
4. 计算属性 Computed
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁，computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。
PS: 计算属性和方法的区别？
计算属性是有缓存的，同种情况下仅调用一次，方法则调用多次。如下案例:计算属性中的console.log仅打印一次，方法则打印了多次哦。
详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03-常用特性</title>
<style type="text/css">
p {
color: #0000FF;
font-size: 18px;
} div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="myApp">
<p>1.表单元素</p>
<div>
<div><input type="text" v-model="myName"></div>
<div>
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</div>
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
<div>
<span>职业：</span>
<select v-model='occupation1'>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>职业：</span>
<select v-model='occupation2' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
</div>
<p>2.表单修饰符</p>
<div>
<input type="text" v-model.number="msg" placeholder=".number用法">
<input type="text" v-model.trim="msg" placeholder=".trim用法">
<input type="text" v-model.lazy="msg" placeholder=".lazy用法">
<div v-text="msg"></div>
<button type="button" @click="handle">测试</button>
</div>
<p>3.自定义指令</p>
<div>
<input type="text" v-myfocus>
<div v-mycolor="colornName">带参数的自定义指令</div>
</div>
<p>4.计算属性</p>
<div>
<span>下面是计算属性调用</span>
<div>{{myCalculate}}</div>
<div>{{myCalculate}}</div>
<span>下面是方法调用</span>
<div>{{myHandle()}}</div>
<div>{{myHandle()}}</div>
</div>
</div>
<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全局自定义指令
Vue.directive('myfocus', {
//inserted钩子函数：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
//el表示指令所绑定的元素，可进行dom操作，el名称是固定的
inserted: function(el) {
el.focus(); //聚焦
}
});
Vue.directive('mycolor', {
//bind钩子函数：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
//binding，固定名，bingding.value 表示绑定的值
bind: function(el, binding) {
el.style.color = binding.value;
}
});
var vm = new Vue({
el: '#myApp',
data: {
myName: 'ypf01',
gender: '2',
hobby: ['1', '3'],
occupation1: '2',
occupation2: ['0', '2', '3'],
msg: '',
colornName: 'green',
num: 100
},
methods: {
handle: function() {
alert("长度为：" + this.msg.length);
},
myHandle: function() {
console.log('我是方法调用哦');
var total = 0;
for (var i = 0; i < this.num; i++) {
total = total + i;
}
return total;
}
},
//局部指令
directives: {
// myfocus: {
// inserted: function(el) {
// el.focus(); //聚焦
// }
// },
// mycolor: {
// bind: function(el, binding) {
// el.style.color = binding.value;
// }
// }
},
//计算属性
computed: {
myCalculate: function() {
console.log('我是计算属性哦');
var total = 0;
for (var i = 0; i < this.num; i++) {
total = total + i;
}
return total;
},
}
});
</script>
</body>
</html>
运行结果：
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
第二节: Vuejs常用特性1的更多相关文章
- 第三节：Vuejs常用特性2和图书案例
一. 常用特性2 1. 监听器 用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时,普通的wa ...
- android内部培训视频_第二节 布局基础
第二节:布局入门 一.线性布局 需要掌握的属性: 1.orientation:排列方式 vertical:垂直 Horizontal:水平 2.weight:水平布局的权重 3.gravity:子控件 ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- MVC常用特性
MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...
- 第二节 安装CentOS
Linux 第二节一.安装VNware workstation 10二.安装CentOS 1.root/123456 用户登录[root@localhost ~]# 2.关机 init 0 3.ifc ...
- 《ASP.NET MVC 5 破境之道》：第一境 ASP.Net MVC5项目初探 — 第二节：MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
- ES6和常用特性归纳
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ECMAS ...
- Vue的常用特性
Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...
- 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
随机推荐
- noobSTL-1-配置器-1
noobSTL-1-配置器-1 1.要点分析 1.1 可能让你困惑的C++语法 组态 即配置. 临时对象 一种无名对象.有时候会刻意地制造临时对象. 静态常量整数成员在class内部直接初始化 con ...
- （matlab)自定义图像（matlab)
clc;clear all;A=[0 230 255 60 30 100];A=uint8(A);imshow(A,'InitialMagnification','fit') 如图: clc;clea ...
- Windows server 2012文件服务器配置
文件服务器的管理 Windows server 2012提供了易于使用的管理工具,让系统管理员更有效的管理服务器的资源. 安装文件服务器管理工具 添加角色-安装管理器 安装完成后直接可以在工具中打 ...
- PHP导出身份证号科学计数法
最近在做PHP的数据导入和导出,到处身份证号的时候,直接变成了科学计算法,找了一个很简单的方法就是这样 $obj= " ".$v['idcard']; 但是这样有空格啊,网上搜了一 ...
- vue 对象数组中，相邻的且相同类型和内容的数据合并，重组新的数组对象
在项目中,有时候会遇到一些需求,比如行程安排,或者考勤状态.后台返回的获取是这一周的每一天的状态,但是我们前端需求显示就是要把相邻的且状态相同的数据进行合并,所以我们就要重新组合返回的数据.如下所示: ...
- Android学习15
Date&Time DatePicker(日期选择器),TimePicker(时间选择器),CalendarView(日期视图): 1.TextClock TextClock可以以字符串格式显 ...
- RPA_播放语音
验证码识别 from rpa.captcha.captcha import Captcha c = Captcha() log.info(tmp_file_path) captcha_result = ...
- 寒假安卓app开发学习记录（2）
今天属实是头疼的一天.开始的时候是简单了解了一下安卓的系统架构,了解到大概分为四个部分. 然后看了两节创建安卓项目的课程,准备去实践一下的时候突然发现我的eclipse里竟然没有Android选项.查 ...
- js加密（七）steam登录
1. url: https://store.steampowered.com/login/?redir=&redir_ssl=1 2. target: 登录 3. 分析 3.1 老样子,抓包, ...
- 喵星之旅-狂奔的兔子-centos7一键安装redmine
一.安装环境 CentOS-7-x86_64-DVD-1908.iso 二.获取安装文件 从官网获取,在下载页面提供了多种安装,最下方是一键安装版本,里面有两种选择,一个是安装包,一个是虚拟机硬盘文件 ...