Vue的基本使用(三)
1.过滤器
1.局部过滤器,在当前组件内部使用过滤器,给某些数据添油加醋.
//声明
filters:{
"过滤器的名字":function(val,a,b){
//a就是alex,val就是当前的数据
}
} //使用 管道符|
数据 | 过滤器的名字("alex","wusir")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<App/>
</div> <script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/moment.js"></script>
<script>
let App = {
data() {
return {
msg: "hello world",
time: new Date()
}
},
template: `
<div>我是一个APP {{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div>
`,
filters: {
myReverse: function (val) {
return val.split("").reverse().join("")
},
myTime: function (val, formatStr) {
return moment(val).format(formatStr);
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
2.全局过滤器,只要过滤器一创建,在任何组建中都能使用
Vue.filter("过滤器的名字",function(val,a,b){})
在各个组建中都能使用
数据 | 顾虑器的名字("alex","wusir")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/moment.js"></script>
<script>
Vue.filter("myTime", function (val, formatStr) {
return moment(val).format(formatStr)
}); let App = {
data() {
return {
msg: "hello world",
time: new Date()
}
},
template: `
<div>我是一个APP {{ msg | myReverse }}
<h2>{{ time | myTime("YYYY-MM-DD") }}</h2>
</div>
`,
filters: {
myReverse: function (val) {
return val.split("").reverse().join("")
}
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
}
})
</script>
</body>
</html>
2.生命周期的钩子函数
beforeCreate():组件创建之前
created():组件创建之后
beforeMount():装载数据到DOM之前会被调用
mounted():装载数据到DOM之后会调用,可以获取到真实存在的DOM元素
beforeUpdate():在更新之前,调用此钩子,应用:获取原始的DOM
updated():在更新之后,调用此钩子,应用:获取最新的DOM
beforeDestroy():组件销毁之前
destroyed():组件销毁之后,如果开了定时器,一定要关闭定时器
acticated():组件被激活
deactivated():组件被停用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3</title>
</head>
<body>
<div id="app">
<App/>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
let Test = {
data() {
return {
msg: "alex",
count: 0,
timer: null
}
},
template: `
<div id="test">
<div id="box">{{ msg }}</div>
<p>{{ count }}</p>
<button @click = "change">修改</button>
</div>
`,
methods: {
change() {
this.msg = "wusir";
document.querySelector("#box").style.color = "red";
}
},
beforeCreate() {
//组件创建之前
console.log("组件创建之前", this.msg);
},
created() {
//组件创建之后
console.log("组件创建之后", this.msg);
},
beforeMount() {
//装载数据到DOM之前会调用
console.log(document.getElementById("app"));
},
mounted() {
//装载数据到DOM之后会调用,可以获取到真实存在的DOM元素,vue操作以后的DOM
console.log(document.getElementById("app"));
//jsDOM操作
},
beforeUpdate() {
//在更新之前,调用此钩子,应用:获取原始的DOM
console.log(document.getElementById("app").innerHTML);
},
updated() {
//在更新之后,调用此钩子,应用:获取最新的DOM
console.log(document.getElementById("app").innerHTML);
},
beforeDestroy() {
console.log("beforeDestory");
},
destroyed() {
//定时器的销毁要在此方法中处理
console.log("destroyed", this.msg);
},
activated() {
console.log("组件被激活了");
},
deactivated() {
console.log("组件被停用了");
}
}; let App = {
data() {
return {
isShow: true
}
},
template: `
<div>
<keep-alive>
<Test v-if="isShow"/>
</keep-alive>
<button @click = "clickHandler">改变test组件</button>
</div>
`,
methods: {
clickHandler() {
this.isShow = !this.isShow;
}
},
components: {
Test
}
}; new Vue({
el: "#app",
data() {
return {}
},
components: {
App
}
}) </script>
</body>
</html>
3. vue-router的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const Course = {
data() {
return {}
},
template: `<div>我是免费课程</div>`
}; //创建路由
const router = new VueRouter({
//定义路由规则
mode: "history",
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
component: Home
},
{
path: "/course",
component: Course
}
]
}); let App = {
data() {
return {}
},
//router-link和router-view是vue-router提供的两个全局组件
//router-view是路由组件的出口
template: `
<div>
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/course">免费课程</router-link>
</div> <router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
//挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
4.命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//如果以后是模块化编程,Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const Course = {
data() {
return {categoryList:[]}
},
template: `<div>
<span v-for = "(item,index) in categoryList">{{ item.name }}</span>
</div>`,
methods:{
getCategoryList(){ }
},
created(){
//ajax发送请求,数据获取
this.getCategoryList();
}
}; //创建路由
const router = new VueRouter({
//定义路由规则
mode: "history",
routes: [
{
path: "/",
redirect: "/home"
},
{
path: "/home",
name:"Home",
component: Home
},
{
path: "/course",
name:"Course",
component: Course
}
]
}); let App = {
data() {
return {}
},
//router-link和router-view是vue-router提供的两个全局组件
//router-view是路由组件的出口
//router-link默认会被渲染成a标签,to属性默认被渲染成href
template: `
<div>
<div class="header">
<router-link to="/home">首页</router-link>
<router-link to="/course">免费课程</router-link>
</div> <router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
//挂载 路由对象
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
5.动态路由匹配
$route 路由信息对象
$router 路由对象VueRouter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7</title>
</head>
<body>
<div id="app"></div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script>
//路由范式:
//http://127.0.0.1:8000/index/user
//http://127.0.0.1:8000/user/1
//http://127.0.0.1:8000/user/2
//http://127.0.0.1:8000/user?user_id=1 const User = {
data() {
return {
user_id: null
}
},
template: `<div>我是用户{{ user_id }}</div>`,
created() {
console.log(this.$route);//路由信息对象
//当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用.
//因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效.
//不过,这也意味着组件的生命周期钩子不会再被调用.
},
watch: {
"$route"(to, from) {
//对路由变化做出响应.
console.log(to.params.id);
console.log(from);
this.user_id = to.params.id;
//发送ajax
}
}
}; //创建路由
const router = new VueRouter({
routes: [
{
path: "/user/:id",
name: "User",
component: User
}
]
}); let App = {
data() {
return {}
},
template: `
<div>
<div class="header">
<router-link :to = "{ name:'User',params:{id:1} }">用户1</router-link>
<router-link :to = "{ name:'User',params:{id:2} }">用户2</router-link>
</div>
<router-view></router-view>
</div>
`
}; new Vue({
el: "#app",
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
}) </script>
</body>
</html>
6.编程式导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8</title>
</head>
<body>
<div id="app"> </div>
<script src="../vue/dist/vue.js"></script>
<script src="../vue/dist/vue-router.js"></script>
<script> const Home = {
data() {
return {}
},
template: `<div>我是首页</div>`
}; const User = {
data() {
return {
user_id: null
}
},
template: `<div>
我是用户{{ user_id }}
<button @click = "clickHandler">跳转首页</button>
</div>`,
created() {
console.log(this.$route);
},
methods: {
clickHandler() {
this.$router.push({
name: "Home"
})
}
},
watch: {
"$route"(to, from) {
console.log(to.params.id);
console.log(from);
this.user_id = to.params.id;
//发送ajax
}
}
}; //创建路由
const router = new VueRouter({
//定义路由规则
routes: [
{
path: "/user/:id",
name: "User",
component: User
},
{
path: "/home",
name: "Home",
component: Home
}
]
}); let App = {
data() {
return {}
},
template: `
<div>
<div class="header">
<router-link :to = "{name:'User',params:{id:1}}">用户1</router-link>
<router-link :to = "{name:'User',params:{id:2}}">用户2</router-link>
</div>
<router-view></router-view>
</div>`
}; new Vue({
el: "#app",
router,
data() {
return {}
},
template: `<App />`,
components: {
App
}
})
</script>
</body>
</html>
Vue的基本使用(三)的更多相关文章
- vue mandmobile ui实现三列列表的方法
vue mandmobile ui实现三列列表的方法 请问这种列表的要用那个组件好呢?Cellitem 只能用到两列,这个要三列的怎么弄?mand的好像没有listview,grid组件的 问了man ...
- vue+webpack开发（三）
上一篇博文讲了怎么使用路由,这次主要讲讲怎么编写一个vue组件 vue定义了一种“单文件组件”后缀为‘.vue’的文件,大概长这样子: <template> <div> < ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由+同构
上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
- 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇：基于Vuex的权限验证探究
缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...
- Vue.js-03：第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- vue实战记录（三）- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- 从0开始搭建vue+webpack脚手架（三）
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- vue 开发系列（三） vue 组件开发
概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件 ...
随机推荐
- Aria2在Windows上如何安装配置使用
一.下载所需的软件 二.安装与使用 三.Aria2的额外内容 四.Aria2的使用 五.Aria2与其它插件配合使用 一.下载所需的软件 可以从一下地址获取最新版本 GitHub: https://g ...
- c# 将字符串转换为指定类型的值
private object GetValueByProperty(string key, string value, ref Type typeValue) { Type t = typeof(T) ...
- spring boot单元测试之RestTemplate(二)
上篇博客中,简单介绍了RestTemplate,只是用到了单元测试环节,如果在正式开发环境使用RestTemplate调用远程接口,还有一些配置要做. 一.配置类 由于Spring boot没有对Re ...
- Spark之从hdfs读取数据
/user/hive/warehouse/ycapp.db/appindex") ), e(),e().toInt)) (String, String, String) ,,all_post ...
- DNS之缓存服务器部署流程
环境介绍 [root@dns ~]# cat /etc/centos-releaseCentOS release 6.6 (Final)[root@dns ~]# ifconfig eth0|sed ...
- 深入理解Java虚拟机（字节码执行引擎）
深入理解Java虚拟机(字节码执行引擎) 本文首发于微信公众号:BaronTalk 执行引擎是 Java 虚拟机最核心的组成部分之一.「虚拟机」是相对于「物理机」的概念,这两种机器都有代码执行的能力, ...
- 关于vue项目中在js中引入图片问题
<template> <div> <img v-for="(star,index) in stars" :src="star.src&quo ...
- 了解Kubernetes主体架构（二十八）
前言 Kubernetes的教程一直在编写,目前已经初步完成了以下内容: 1)基础理论 2)使用Minikube部署本地Kubernetes集群 3)使用Kubeadm创建集群 接下来还会逐步完善本教 ...
- 长春理工大学第十四届程序设计竞赛（重现赛）J
J.Printout 题目:链接:https://ac.nowcoder.com/acm/contest/912/J 题目: 小r为了打校赛,他打算去打字社打印一份包含世界上所有算法的模板. 到了打字 ...
- chmod命令用法详解-chmod修改目录权限
chmod用法: 用来修改某个目录或文件的访问权限. 语法: chmod [-cfvR] [--help] [--version] [who] [+ | - | =] [mode] 文件名 例子: ...