Vue快速学习_第三节
过滤器
局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}}
全局过滤器(全局过滤器,只要过滤器一创建,在任何组件中都能使用, Vue.filter('过滤器的名字'，function(val,a,b){}) )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<App></App>
</div> </body>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script>
// 定义全局过滤器,字符串翻转
Vue.filter('strReverse', function (val) {
return val.split('').reverse().join('')
}); let App = {
data(){
return{
// 创建日期对象
timer: new Date(),
msg: 'i love you',
}
},
methods: { },
// YYYY-MM-DD HH:mm:ss 代表年月日 时分秒,过滤器的使用是 数据 | 过滤器的名字(第二个参数,第三个参数....)
template:`
<div>
<h3>{{ timer|myTime('YYYY-MM-DD HH:mm:ss') }}</h3>
<h3>{{ msg|strReverse }}</h3>
</div>
`,
components: { },
// 局部过滤器
filters:{
// 时间格式化过滤器
myTime: function(val, formatStr){
//val 就是输入的时间数据, formatStr就是用户自定义的时间格式,moment是moment.js中一个日期处理类库的方法
return moment(val).format(formatStr);
}
} };
new Vue({
el: '#box',
data(){
return{ }
},
methods:{ },
components:{
App
}
}) </script>
</html>生命周期的钩子函数
beforeCreate(){} 组件创建之前,此时组件元素还不可调用
created(){} 组件创建完成,组件元素可以调用,一般此时做ajax请求,实现数据驱动视图(常用,重要)
beforeMount(){} 在挂载开始之前被调用,此时数据还未被加载到DOM上
mounted(){} 装载数据到DOM之后调用,可以操作DOM(也比较重要)\
beforeUpdate(){} 在更新之前获取原始的dom
updated(){} 更新完之后,调用此钩子获取最新dom,以便之后操作
beforeDestroy(){} 实例销毁之前调用。在这一步，实例仍然完全可用
destroyed(){} Vue 实例销毁后调用,一般用于定时器的销毁
activated(){} keep-alive 组件激活时调用( keep-alive 组件主要作用，让组件产生缓存)
deactivated(){} keep-alive 组件停用时调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<App></App>
</div> </body>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script>
let Test1 = {
data(){
return {
msg1: 'Test1组件内容',
}
},
template: `
<div>
<h3 id="msgs">{{ msg1 }}</h3>
<button @click = 'clickHandler'>颜色修改</button>
</div>
`,
methods:{
clickHandler(){
document.querySelector('#msgs').style.color = 'red';
},
},
// keep-alive 组件主要作用，让组件产生缓存, 所以组件激活停用后,状态会保存(例如上面的颜色就能被保存),激活时调用
activated(){
console.log('组件被激活了')
},
// keep-alive 组件停用时调用
deactivated(){
console.log('组件被停用了')
}
};
let Test = {
data(){
return {
msg: 'Test组件内容',
count:null,
timer:null
}
},
template: `
<div>
{{ count }}
<h3>{{ msg }}</h3>
<button @click = 'clickHandler'>修改msg</button>
</div>
`,
methods:{
clickHandler(){
this.msg = '修改之后的Test组件内容';
document.querySelector('#msgs').style.color = 'red';
},
},
beforeCreate(){
console.log('组件创建之前')
},
created(){
// 创建一个定时器,每秒加1
this.timer = setInterval(()=> {
this.count++
},2000);
console.log('组件创建之后')
},
beforeMount(){
// 获取不到<h3>Test组件内容</h3>,因为dom还没加载
console.log(document.querySelector('#box'))
},
mounted(){
// 可以获取到<h3>Test组件内容</h3>,因为此时dom已经加载完成
console.log(document.querySelector('#box'))
},
beforeUpdate(){
// 在更新之前获取原始的dom,点击了修改按钮才会执行更新这两个方法
console.log(document.querySelector('#box').innerHTML)
},
updated(){
// 更新完之后,调用此钩子获取最新dom,以便之后操作
console.log(document.querySelector('#box').innerHTML)
},
beforeDestroy(){
console.log('在销毁之前')
},
destroyed(){
// 由于定时器不会自动销毁,所以一般都会在destroyed方法里面进行销毁
clearInterval(this.timer);
console.log('在销毁之后')
}
}; let App = {
data(){
return{
isShow: true,
isChange: true
}
},
methods: {
clickDestroy(){
this.isShow = !this.isShow;
},
clickActivate(){
this.isChange = !this.isChange;
}
},
template:`
<div>
<Test v-if="isShow" />
<button @click = 'clickDestroy'>销毁和创建组件</button>
<keep-alive>
<Test1 v-if="isChange" />
</keep-alive>
<button @click = 'clickActivate'>激活和停用组件</button>
</div>
`,
components: {
Test,
Test1
},
};
new Vue({
el: '#box',
data(){
return{
}
},
methods:{ },
components:{
App
}
}) </script>
</html>
vue-router的基本使用
Vue的全家桶 (vue+vue-router+vuex)
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用, vue-router是vue的核心插件,
网址为:https://router.vuejs.org/zh/
为什么要使用单页面应用？
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动, 为了用户体验.
vue-router使用及命名路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//0 .如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
// Vue.use(VueRouter)
// 1. 定义 (路由) 组件,可以从其他文件 import 进来,首先定义了首页和课程两个路由组件
const Home = {
data(){
return{}
},
template:`<div>我是首页</div>`
};
const Course = {
data(){
return{}
},
template:`<div>我是课程页面</div>`
};
// 2.定义路由规则,每个路由应该映射一个组件。 其中"component" 可以是,还可以给路由起别名name:'Home'
const routes = [
{path: '/', redirect: '/home'},
{path: '/home',name:'Home', component: Home},
{path: '/course', component: Course},
];
//3.创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
//vue-router 默认 hash 模式(带#号),如果不想要很丑的 hash，我们可以用路由的 history 模式
// mode:'history',
routes // (缩写) 相当于 routes: routes
});
let App = {
data(){
return {}
},
// router-link和router-view 是vue-router 提供的两个全局组件
//router-view 是路由组件的出口
//router-link默认会被渲染成a标签，to属性默认被渲染成href, 绑定to属性,然后再{name:'Home'}通过首页的别名进行访问
template:`
<div>
<div class="header">
<router-link :to="{name:'Home'}">首页</router-link>
<router-link to="/course">课程</router-link>
</div>
<router-view></router-view>
</div>
`,
};
new Vue({
el:'#box',
// 4.创建和挂载根实例,一定要记得挂载
router,
data(){
return {}
},
template:`
<App></App>
`,
components:{
App
}
})
</script>
</body>
</html>
动态路由匹配
$route 路由信息对象
$router 路由对象 VueRouter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//动态路由匹配针对的是类似course/1 ,course/22 这样的访问,如果是course?xx=1,则需要用$route.query (如果 URL 中有查询参数)
const Course = {
data(){
return{
id:null
}
},
//4 id就发生了变化
template:`<div>我是课程页面/{{ id }}</div>`,
//提醒一下，当使用路由参数时，例如从 /course/1 导航到 /course/22，原来的组件实例会被复用。因为两个路由都渲染同个组件，
// 比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
// 3. 所以用watch (监测变化) $route 对象
watch:{
// to表示要去哪里,点击/course/2,则to就是/course/2(当前路由信息对象),而from就是/course/1的信息(从/course/1来)
'$route'(to, from){
// 对路由变化作出响应,
this.id = to.params.id;
}
}
};
const routes = [
// 2.一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params
{path: '/course/:id',name:'course', component: Course},
];
const router = new VueRouter({
routes
});
let App = {
data(){
return {}
},
//1.通过这种params:{id:1}传参
template:`
<div>
<div class="header">
<router-link :to="{name:'course',params:{id:1}}">课程1</router-link>
<router-link :to="{name:'course',params:{id:2}}">课程2</router-link>
</div>
<router-view></router-view>
</div>
`,
};
new Vue({
el:'#box',
router,
data(){
return {}
},
template:`
<App></App>
`,
components:{
App
}
})
</script>
</body>
</html>
编程式导航(this.$router.push({name:'Home'}))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"> </div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const Home = {
data(){
return{}
},
template:`<div>我是首页</div>`
};
const Course = {
data(){
return{
id:null
}
},
template:`<div>
<div>我是课程页面</div>
<button @click = 'clickHandler'>跳转首页</button>
</div>
`,
methods:{
// 编程式导航,将要跳转的页面放入$router中
clickHandler(){
this.$router.push({
name:'Home'
})
}
},
};
const routes = [
{path: '/home',name:'Home', component: Home},
{path: '/course',name:'course', component: Course},
];
const router = new VueRouter({
routes
});
let App = {
data(){
return {}
},
template:`
<div>
<div class="header">
<router-link :to="{name:'course'}">课程</router-link>
</div>
<router-view></router-view>
</div>
`,
};
new Vue({
el:'#box',
router,
data(){
return {}
},
template:`
<App></App>
`,
components:{
App
}
})
</script>
</body>
</html>
Vue快速学习_第三节的更多相关文章
- Vue快速学习_第一节
之前写CRM都是Django前后端一起写的,在大部分项目中实际上前后端是分离的,因此我们需要学习一个前端框架来进行前端页面的编写,这里选择了Vue进行学习,好了开始学习吧. 1.ES6部分知识点学习 ...
- Vue快速学习_第二节
表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可 ...
- Vue快速学习_第五节
axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...
- Vue快速学习_第四节
获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...
- VUE的学习_从入门到放弃（一）
一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...
- Vue 超快速学习
Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术（一） LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
- 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总
当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2 任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
随机推荐
- 【C#】WPF的xaml中定义的Trigger为什么有时候会不管用，如Border的MouseOver之类的
原文:[C#]WPF的xaml中定义的Trigger为什么有时候会不管用,如Border的MouseOver之类的 初学WPF,知道一些控件可以通过定义Style的Trigger改变要显示的样式,但是 ...
- aspx页面@Page指令解析
@Page指令位于每个ASP.NET页面的顶部,告诉ASP.NET这个具体页面使用什么属性,以及该页面继承的用户控件.ASP.NET页面@Page指令属性有:AspCompat.Async.Async ...
- 调用其它UI文件
调用其它UI文件 首先 要头文件包含 #include “dialog_biaozhun.h"Dialog_biaozhun *dialog = new Dialog_biaozhun() ...
- 什么是TOML？
配置文件的使用由来已久,从.ini.XML.JSON.YAML再到TOML,语言的表达能力越来越强,同时书写便捷性也在不断提升. TOML是前GitHub CEO, Tom Preston-Werne ...
- 零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I
原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置 ...
- ASP.NET MVC控制器Controller
控制器的定义 MVC模式下的控制器(Controller)主要负责响应用户的输入,并且在响应时可能的修改模型(Model). 之前的URL访问,通常是通过指定服务器的路径来实现,如访问URL:http ...
- nginx 配置https并自签名证书
2016-10-28 转载请注明出处:http://daodaoliang.com/ 作者: daodaoliang 版本: V1.0.1 邮箱: daodaoliang@yeah.net 参考链接: ...
- 亿方云（用电话或者qq沟通是远远不够的，容易忘还不能反复催，最好的方式就是指定一个平台，团队内的人定期查看最新记录）
作者:城年链接:http://www.zhihu.com/question/20579359/answer/106319200来源:知乎著作权归作者所有,转载请联系作者获得授权. 更新,文字发完后,好 ...
- 【DRP】-完成物料修改页面Servlet和JSP开发
本系列博客内容为:做DRP系统中的常用功能. 该项目采用MVC架构 C(Controller)控制器,主要职责;1.取得表单参数:2.调用业务逻辑:3.转向页面 M(Model)模型,主要职责:1.业 ...
- ubuntu 14.04搭建tensorflow-gpu开发环境
一.安装nvidia显卡驱动 去navidia官网查看最新的驱动版本号:navidia官网:http://www.geforce.cn/drivers 找到显卡对应的驱动下载,例如下载的驱动为 NVI ...