前端-Vue基础2
1.过滤器
前台通过后台传值，要对后台传过来的变量进行特殊处理，比如根据id转成中文等；
1.1 局部过滤器
局部过滤器只针对一个Vue实例
默认将|左侧count传递给右侧方法
{{count|filterFunc}}
可以传多个参数
{{count|filterFunc("test")}}
func:function(value,test){
}
<body>
<div id="app">
{{count|change('百分比')}}
{{status|changeStatus}}
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
count:19,
status:1
},
filters:{
change:function (value,flag) {
console.log('value:',value)
console.log('flag:',flag)
return value+'%'
},
changeStatus:function (status) {
if(status==1){
return '成功'
}else if(status==2){
return '失败'
}
}
}
})
</script>
</body>
显示结果如图所示：
19% 成功
1.2 全局过滤器
全局过滤器可以针对所有的vue，只要引用都可以使用
Vue.filter('allNumber',function (value) {
return value + '&'
})
new Vue({
el:'#app',
data:{
msg:'test',
count:19,
status:1
}
})
<div id="app">
<div>{{count|allNumber}}</div>
</div>
2.vue的生命周期
vue的生命周期：是指vue实例化到页面经历了哪些步骤
钩子函数：预留了几个特殊的方法
<body>
<!--vue的生命周期：是指vue实例化到页面经历了哪些步骤-->
<!--钩子函数：预留了几个特殊的方法-->
<div id="app">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:''
},
beforeCreate:function () {
//实例化后，数据还没有初始化
console.log('beforeCreate')
},
created:function () {
//数据初始化后
console.log('created')
},
beforeMount:function () {
//未和标签进行关联前
console.log('beforeMount')
},
mounted:function () {
//实例和标签进行关联后
//可以用来获取后台列表数据
this.msg='获取后台列表数据'
console.log('mounted')
},
beforeUpdate:function () {
//数据更新前
console.log('beforeUpdate')
},
updated:function () {
//数据更新后
console.log('updated')
}
})
</script>
</body>
3.$refs
this.$refs.test // 获取到标签 可以理解为 document.getElementbyID 获取的是标签对象
<body>
<div id="app">
<!-- 需求：点击子组件的数字，自增1,点击test按钮，父组件的值等于子组件的值相加-->
<test ref="a"></test>
<test ref="b"></test>
<div>父组件--<span>{{count}}</span></div>
<input type="button" value="test" @click="change">
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('test',{
template:'<div>子组件--<span @click="add">{{number}}</span></div>',
data:function () {
return{
number:0
}
},
methods:{
add:function () {
this.number++
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
change:function () {
//this.$refs.a = document.getElementById('a')
this.count = this.$refs.a.number+this.$refs.b.number
}
}
})
</script>
</body>
4.组件（复用代码，抽象公用代码）
组件：将公用的功能抽离出来，形成组件
目的：复用代码
4.1 全局组件
<body>
<div id="app">
<!-- 引用组件-->
<demo></demo>
<demo></demo>
<demo></demo>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('demo',{
template:'<h1 @click="change">{{msg}}</h1>',
data:function () {
//组件中的data，必须是个方法
//如果引用了demo这个组件，就可以使用它的变量，如果是map形式的，改变了变量msg的值，其他组件的msg的值也会跟着该笔爱
//如果是data是一个方法，msg只作用域data这个方法，如果改变msg的值，其他组件的msg变量不会跟着改变
return {
msg:'msg'
}
},
methods:{
change:function () {
this.msg = 'test'
}
}
}) new Vue({
el:'#app'
})
</script>
</body>
4.2 局部组件
<body>
<div id="app">
<!-- 引用组件-->
<demo></demo>
<demo-key></demo-key>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('demo',{
template:'<h1 @click="change">{{msg}}</h1>',
data:function () {
//组件中的data，必须是个方法
//如果引用了demo这个组件，就可以使用它的变量，如果是map形式的，改变了变量msg的值，其他组件的msg的值也会跟着该笔爱
//如果是data是一个方法，msg只作用域data这个方法，如果改变msg的值，其他组件的msg变量不会跟着改变
return {
msg:'msg'
}
},
methods:{
change:function () {
this.msg = 'test'
}
}
}) new Vue({
el:'#app',
components:{
"demo-key":{
template:'<h1 @click="change">{{count}}</h1>',
data:function () {
return{
count:0
}
},
methods:{
change:function () {
this.count++
}
}
}
}
})
</script>
</body>
4.3 is规避错误
多层标签封装为组件时，不能直接使用，要用is来规避组件渲染的错误
<body>
<div id="app">
<table border="1px">
<thead>
<th>id</th>
</thead>
<tbody>
<!-- 多层标签封装为组件时，不能直接使用，要用is来规避组件渲染的错误-->
<tr is="tr-demo"></tr>
<!-- <tr-demo></tr-demo>-->
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('tr-demo',{
template:'<tr><td>1111</td></tr>'
}) new Vue({
el:'#app'
})
</script>
</body>
前端-Vue基础2的更多相关文章
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- [前端] VUE基础 (9) (element-ui、axios、Vuex)
一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...
- [前端] VUE基础 (8) (vue-cli脚手架)
一.安装vue-cli脚手架 官方文档:https://cli.vuejs.org/zh/guide/cli-service.html Vue CLI 的包名称由 vue-cli改成了 @vue/c ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- 前端-Vue基础3（父子组件交互）
1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...
- 前端-Vue基础1
Vue核心思想:只要改变数据,页面就会发生改变 1.引入vue 1.下载vue.js 2.在script标签的src属性中,引入vue.js <script src="js/vue.j ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
随机推荐
- 出现异常org.yaml.snakeyaml.parser.ParserException: while parsing a block mapping
这是因为yaml的配置文件格式出错导致的异常 原代码,仔细看数据源的配置没有和type的路径一致,而是下一级的目录,所以导致出错 使用shift+tab快捷键向左移动改变下就好了 最后成功运行
- 换硬盘，装win10系统小记
国庆在家给女朋友的电脑换了1T的固态,重装了系统,特此记录一下,方便后续有需要时查看. win10 激活问题 由于以前的系统就是正版 win10,即使重新装机也会自动激活,不需要做什么额外的步骤. 微 ...
- 在Yolov5 Yolov4 Yolov3 TensorRT 实现Implementation
在Yolov5 Yolov4 Yolov3 TensorRT 实现Implementation news: yolov5 support 引论 该项目是nvidia官方yolo-tensorrt的封装 ...
- 在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练
在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练 自动驾驶汽车的深度神经网络(DNN)开发是一项艰巨的工作.本文验证了DGX多节点,多GPU,分布式训练在DXC机器 ...
- Spring Cloud系列（一）：服务注册中心
一.Spring Cloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线).分布式系统的协调导致了样 ...
- Zabbix 4.0 使用笔记
自定义监控项1.确认需监控内容 (例如:登陆用户数)2.确认监控方法(例如:脚本)3.编写脚本 vi /etc/zabbix/custom_shell/current_login_user.sh# w ...
- 基于Docker安装常用软件
基于Docker安装常用软件 本实验介绍如何基于Docker安装常用的软件,具体包括: Ubuntu Cetnos Nginx Node.js PHP MySQL Tomcat Redis Mongo ...
- 如何在CentOS 7上搭建LAMP环境(使用YUM或编译)
什么是LAMP? LAMP是Linux,Apache,MySQL和PHP的缩写. 它是一堆应用程序的堆栈,它们在Web服务器上一起工作以托管网站. 话虽如此,每个程序都有不同的目的: 在LAMP中, ...
- 利用 Bean Validation 来简化接口请求参数校验
团队新来了个校招实习生静静,相互交流后发现竟然是我母校同实验室的小学妹,小学妹很热情地认下了我这个失散多年的大湿哥,后来... 小学妹:大湿哥,咱们项目里的 Controller 怎么都看不到参数校验 ...
- kafka基础知识梳理
一.Kafka的基本概念 关键字: 分布式发布订阅消息系统:分布式的,分区的消息服务 Kafka是一种高吞吐量的分布式发布订阅消息系统,使用Scala编写. 对于熟悉JMS(Java Message ...