🔥Vue全家桶🔥
| Vue全家桶 | 地址 |
|---|---|
| Vue全家桶(一)之基础指令🔥 | https://blog.csdn.net/m0_55990909/article/details/123917809 |
| Vue全家桶(一)之常用特性🔥 | https://blog.csdn.net/m0_55990909/article/details/123917352 |
| Vue全家桶(二)之组件化开发🔥 | https://blog.csdn.net/m0_55990909/article/details/123957131 |
| Vue全家桶(三)之cli3脚手架🔥 | https://blog.csdn.net/m0_55990909/article/details/123956982 |
| Vue全家桶(四)之ES6模块化与webpack打包🔥 | https://blog.csdn.net/m0_55990909/article/details/124019983 |
| Vue全家桶(五)之Vue-Router路由🔥 | https://blog.csdn.net/m0_55990909/article/details/123994048 |
| Vue全家桶(六)之VueX状态管理🔥 | https://blog.csdn.net/m0_55990909/article/details/124017667 |
| Vue接口调用（一）fetch用法 | https://blog.csdn.net/m0_55990909/article/details/123957200 |
| Vue接口调用（二）axios用法🔥 | https://blog.csdn.net/m0_55990909/article/details/123981283 |
| Vue接口调用（三）async/await用法🔥 | https://blog.csdn.net/m0_55990909/article/details/123981292 |
Vue常用特性
✍目录总览：（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）
一、表单操作
1. 基于Vue的表单操作
- v-model指令：在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。
1.1 Input 单行文本
<body>
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob'
}
})
</script>
</body>
1.2 textarea 多行文本
<body>
<div id="app">
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com'
}
})
</script>
</body>
1.3 radio 单选框
- 实现多选一效果。常见场景：性别选择
- v-model变量的值和value一致时，即勾选
<div id="app">
<span> 性别：<span/>
<span>
<input type="radio" id="male" value="1" v-model="picked">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="picked">
<label for="female">女</label>
<span/>
</div>
<script>
new Vue({
el: '#app',
data: {
//设置默认值为1，即默认选择性别为男
picked : 1
}
})
</script>
1.4 select 下拉表单（单选和多选）
- 表单元素添加multiple="true"属性 可以将单选下拉表单 变成 多选下拉表单
- 多选下拉表单（需要把data中v-model绑定的属性类型改为数组）。
<div id="app">
<-- 单选下拉表单 -->
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
<-- 多选下拉表单 -->
<select v-model="website" name="fruit" multiple="true">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{website}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
//默认选择Runoob
selected: 'www.runoob.com' ,
//多选下拉表单默认无选中
website:[]
}
})
</script>
1.5 checkbox 复选框（单个和多个）
- v-model变量的值和value一致时，即勾选。
<body>
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
//默认打勾
checked : true,
//默认打勾 Runoob Google Taobao
checkedNames: ["Runoob", "Google", "Taobao"]
}
})
</script>
</body>
2.表单修饰符
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转化为数值类型 | <input v-model.number = "age" /> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input v-module.trim = "msg" /> |
| .lazy | 在 change 时而非 input 时更新(失去焦点或回车时) | <input v-model.lazy = "msg" /> |
2.1 .number
- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。
2.2 .trim
- 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
2.3 .lazy
- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据。
- 但你可以添加一个修饰符 lazy ，从而转变为在 change 事件（当是去input输入框失去焦点或敲击回车）中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
二、自定义指令
使用场景：内置指令不满足需求
1.自定义指令
Vue.directive('focus' {
inserted: function(el) {
// 获取元素的焦点
el.focus();
}
})
//用法
<input type="text" v-focus>
2.带参数的自定义指令
Vue.directive(‘color', {
inserted: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})
//用法 修改背景颜色
<input type="text" v-color='{color:"orange"}'>
3.局部自定义指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
三、计算属性（computed）
1.概念和用法
- 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。
用法（computed）：
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
<div>{{reverseString}}</div>
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao'
},
computed: {
reverseString: function () {
return this.msg.split('').reverse().join('');
}
}
});
2.计算属性与方法的区别
- 计算属性是基于他们的依赖进行缓存的（如果输入不变，后续直接调用第一次计算结果的缓存数据）
- 方法不存在缓存（每次输入，都需要进行计算。）
四、侦听器
4.1 侦听器的应用场景：数据变化时执行异步或开销较大的操作。
**4.2 基本用法：**和计算属性相似
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
watch: {
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
侦听器案例：验证用户名是否可用
<div>
<span>用户名：</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
methods: {
checkName: function(uname) {
// 调用接口，但是可以使用定时任务的方式模拟接口调用
var that = this;
setTimeout(function(){
// 模拟接口调用
if(uname == 'admin') {
that.tip = '用户名已经存在，请更换一个';
}else{
that.tip = '用户名可以使用';
}
}, 2000);
}
},
watch: {
uname: function(val){
// 调用后台接口验证用户名的合法性
this.checkName(val);
// 修改提示信息
this.tip = '正在验证...';
}
}
五、过滤器
**5.1 过滤器的作用：**格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。
5.2 过滤器的基本用法：
//过滤器的使用
<input type="text" v-model='msg'>
<div>{{msg | upper }}</div>
<div>{{msg | upper | lower}}</div> //会被处理两次，先首字母大写，再首字母小写
<div :abc='msg | upper'>测试数据</div> //动态添加属性
//自定义全局过滤器
Vue.filter('upper', function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
//自定义局部过滤器filters
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
5.3 带参数的过滤器
- 过滤器是 JavaScript 函数，因此可以接收参数：{{ message | filterA(‘arg’ )}}
- 这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg’ 作为第二个参数
//过滤器使用
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
//过滤器定义 value是形参，表示过滤器要处理的原始数据
Vue.filter('format', function(value, arg) {
if(arg == 'yyyy-MM-dd') {
var ret = '';
ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
return ret;
}
return value;
})
过滤器案例：格式化日期
- 获取data数据使用过滤器格式化为**‘2022-4-1 12:22:19’的格式**
//过滤器使用
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
//过滤器定义function内部套用处理时间格式的固定模板
Vue.filter('format', function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
六、生命周期
1. 主要阶段
- 挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
- 更新（元素或组件的变更操作）
① beforeUpdate
② updated
- 销毁（销毁相关属性）
① beforeDestroy
② destroyed
2. Vue实例的产生过程
挂载;
① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
跟新：
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
销毁：
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
扫一扫
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
