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 文件 ...
随机推荐
- [Java] 父类和子类拥有同名的成员变量（fields）的情况
首先,需要明确的是,无论是通过casting,还是通过将子类对象的reference赋值给父类变量,都无法改变该reference所指对象的真实类型.但当该reference的类型是父类时,将无法调用 ...
- java web 开发教程(1) - 开发环境搭建
勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...
- 机器学习经典算法之KNN
一.前言 KNN 的英文叫 K-Nearest Neighbor,应该算是数据挖掘算法中最简单的一种. 先用一个例子体会下. /*请尊重作者劳动成果,转载请标明原文链接:*/ /* https://w ...
- C#常用设计模式--单例模式
为什么要使用单例模式 在我们的整个游戏生命周期当中,有很多对象从始至终有且只有一个.这个唯一的实例只需要生成一次,并且直到游戏结束才需要销毁. 单例模式一般应用于管理器类,或者是一些需要持久化存在的 ...
- 【Mac】Mac快捷键与Mac下的Idea快捷键
本人之前一直在windows平台下进行开发,刚接触Mac的时候有些许的不适应,无论是无鼠标操作,还是文件系统的变更,以及键盘格式以及系统快捷键的变更,都曾对自己造成过一定程度的困扰. ...
- Codeforces Round #568 (Div. 2)A
A. Ropewalkers 题目链接:http://codeforces.com/contest/1185/problem/A 题目: Polycarp decided to relax on hi ...
- JDK1.8之ConcurrentHashMap
目录 简介 JDK1.7 JDK1.8 重要属性 Node类 ForwardingNode类 原子操作和Unsafe类 重要方法 初始化表操作(initTable) 插入键值对(put和putVal) ...
- CSU 1326：The contest（并查集+分组背包）
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1326 题意:…… 思路:并查集建图处理出边,然后分组背包. 之前不会分组背包,比赛的时候也推不出来 ...
- web应用分页
1. 场景描述 目前大部分的应用程序中都会用到分页功能,以便减少前端浏览器及后台服务器的压力,以及其他方面的考虑. (1)分页从概念上可分为逻辑分页和物理分页,逻辑分页主要是通过应用程序(前端或者后端 ...
- 对于Typora（markdown）的基本使用
对于刚开始使用该软件,应该在熟悉基本的markdown语法的基础上,再进行快捷键的使用! 标题 (快捷键:ctrl + 数字) 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ###### ...