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 文件 ...
随机推荐
- 多线程基础理论--C#
1.主线程 进程创建时,默认创建一个线程,这个线程就是主线程.主线程是产生其他子线程的线程,同时,主线程必须是最后一个结束执行的线程,它完成各种关闭其他子线程的操作.尽管主线程是程序开始时自动创建的, ...
- 设计模式——（Abstract Factory）抽象工厂“改正为简单工厂”
设计面向对象软件比较困难,而设计可复用的面向对象软件就更加困难.你必须设计相关类,并设计类的接口和继承之间的关系.设计必须可以解决当前问题,同时必须对将来可能发生的问题和需求也有足够的针对性.掌握面向 ...
- python自动化测试之mysql5.0版本数据库查询数据时出现乱码问题分析
1.确保数据库编码是utf8编码.若不是,请将my.ini的client,mysql,mysqld三个字段下面添加default-character-set = utf8,这样可以永久改变在新建数据库 ...
- 微服务SpringCloud之服务注册与发现
在找.net core 微服务框架时发现了Steeltoe开源项目,它可以基于Spring Cloud实现.net core和.net Framework的微服务.正好之前也有学习过SpringBo ...
- openstack namespace 的应用
查看虚拟机网络连通性 1.neutron port-list | grep IP 2.neutron port-show ID 查看subnet 3.neutron subnet-show ID 查看 ...
- MD5加密工具代码
找到一个开源的MD5加密工具代码,收藏起来 /** * MD5加密工具 */ public class MD5Utils { /** * byte[]字节数组 转换成 十六进制字符串 * @param ...
- 【JVM】虚拟机初见-运行时数据区图解
本文是听咕泡XX公开课视频整理的笔记,较书本更为总结,感谢. 计算机模型(汇编知识):数据集(数据).指令集(操作指令,+-等).控制集(分支循环) JVM运行时的数据区: 程序计数器(每个线程都有) ...
- Appcan 自定义数字加减控件
DIV部分: *这里的三个ID:as_sub_3.as_now_3.as_add_3里面的“3”可以自定义,这个对于生成任意个数的列表形式很有帮助 *cb 为执行成功后可进行回调 <div cl ...
- Map集合的4种遍历方式
import java.util.HashMap;import java.util.Iterator;import java.util.Map; public class TestMap { p ...
- 半小时学会V语言
半小时学会V语言 1. V语言简介 V是一个静态类型.编译型的编程语言,目标是构建可维护软件.与Go语言相似,并受Oberon,Rust和Swift语言影响.V语言非常简单,只需要半小时就能学会这门语 ...