Vue常用特征
Vue常用特性
表单操作
- input 单行文本
- textarea 多行文本
- select 下拉多项
- radio 单选框
- checkbox 多选框
表单域修饰符
- number:转化为数值（输入框输入为字符串，该修饰符自动将输入字符串转为数值）
- trim:去掉开始和结尾的空格
- lazy:将默认input（触发）事件切换为change(失去焦点）事件
自定义指令
- 为什么需要自定义指令：内置指令不满足要求
语法规则：(例子：自动获取元素焦点)
Vue.directive('focus',{
inserted:function(el){
//el 表示所绑定的元素
el.focus();
}
})
- 用法
<input type="text" v-focus>
带参数的自定义指令（例子：改变元素背景色）
<div id="app">
<input type="text" v-color='msg'>
div>
<script src="js/vue.js">script>
<script>
//自定义带参数指令
Vue.directive('color',{
bind:function(el,binding){
//el:表示所绑定的元素
//binding:一个对象
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el:"#app",
data:{
msg:{
color:"red"
}
}
});
script>
局部指令(应用范围有限制)
var vm = new Vue({
el: "#app",
data: {
msg: {
color: "red"
}
},
// 局部指令
directives: {
color: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function (el) {
el.focus();
}
}
}
});
计算属性
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
<div id="app">
<div>{
{msg}}div>
<div>{
{msg.split('').reverse().join('')}}div>
<div>{
{reverseString}}div>
div>
<script src="js/vue.js">script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello'
},
// 计算属性
computed:{
reverseString:function(){
return this.msg.split('').reverse().join('');
}
}
});
script>
计算属性与方法的区别
- 计算属性是基于它们的依赖进行缓存的：计算结果缓存起来，只要计算值不变，再次调用不会再次执行函数，会直接返回计算结果
- 方法不存在缓存：每调用一次执行一次函数
侦听器
数据一旦发生变化就通知侦听器所绑定的方法
侦听器的应用场景
- 数据变化时执行异步或开销较大（比较耗时）的操作
侦听器的用法
//分别输入姓、名
//实时显示拼接出的全名
var vm = new Vue({
el: '#app',
data: {
firstName:'Jim',
lastName: 'Green',
fullName: 'Jim Green'
},
// 监听属性
watch:{
firstName:function(val){
this.fullName = val + ' '+ this.lastName;
},
lastName:function(val){
this.fullName = this.firstName + ' '+ val;
}
}
});
过滤器
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式等
自定义过滤器
例子：首字母大写
Vue.filter('upper',function(val){
// upper:自定义过滤器名称
// val:拿到的数据
return val.charAt(0).toUpperCase()+val.slice(1);
});
过滤器用法
<div>{
{msg|upper}}div>
<div>{
{msg|upper|lower}}div>
<div v-bind:id='msg|upper'>div>
局部过滤器(应用范围有限制)
var vm = new Vue({
el: "#app",
data: {
msg: {
color: "red"
}
},
// 局部过滤器
filters:{
upper:function(val){
return val.charAt(0).toUpperCase()+val.slice(1);
}
}
});
带参数的过滤器
- 语法(例子：规定日期格式)
// {
{date|format('yyyy-MM-dd')}}
Vue.filter('format', function (value, arg) {
//value就是过滤器传递过来的参数
if(arg=='yyyy-MM-dd'){
var res = '';
res += value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate();
return res;
}
});
- 使用
<div>{
{date|format('yyyy-MM-dd')}}div>
生命周期
主要阶段
- 挂载（初始化相关属性）
- beforeCreate
- created
- beforeMount
- mounted
- 更新（元素或组件的变更操作）
- beforUpdate
- update
- 销毁（销毁相关属性）
- beforeDestory
- destoryed
生命周期图示
Vue实例的产生过程
- beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
- created：在实例创建完成后被立即调用。
- beforeMount：在挂载开始之前被调用。
- mounted：被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
- beforUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
- update：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
- beforeDestory：实例销毁之前调用。
- destoryed：实例销毁后调用。