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 文件 ...
随机推荐
- WebBrowser执行脚本和调用外部方法
控制WebBrowser实际上就是控制IE,最简单的方法就是执行javascript或vbscript,省去了接口的转换.如何执行脚本?以前我一直用mshtml中IHTMLWindow2接口的exec ...
- C# Task 的用法
C# Task 的用法(转自:http://www.wxzzz.com/683.html#) 其实Task跟线程池ThreadPool的功能类似,不过写起来更为简单,直观.代码更简洁了,使用Task来 ...
- 【JRebel 作者出品--译文】Java class 热更新：关于对象，类，类加载器
一篇大神的译文,勉强(嗯..相当勉强)地放在类加载器系列吧,第8弹: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现 ...
- Java多线程同步工具类之CyclicBarrier
一.CyclicBarrier使用 CyclicBarrier从字面上可以直接理解为线程运行的屏障,它可以让一组线程执行到一个共同的屏障点时被阻塞,直到最后一个线程执行到指定位置,你设置的执行线程就会 ...
- 关于vue中使用rem问题
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" onsubmi ...
- Java NIO 学习笔记（七）----NIO/IO 的对比和总结
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
- 4.shell编程-文本处理三剑客之sed
4.1.sed的选项 sed,流编辑器.对标准输出或文件进行逐行处理. 语法格式 第一种:stdout | sed [option] "pattern command" 第二种:s ...
- while循环语句、格式化输出、常用运算符、字符编码
1.while循环 while 空格 条件 冒号 缩进 循环体 num=1 while num<11: print(num) num=num+1 变量都是先执行等号右边的,然后执行等号左边的. ...
- 开源系统监控工具Nagios、Zabbix和Open-Falcon的功能特性汇总及优缺点比较
Nagios Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT 基础设施监控系统,其功能强 ...