vue基础（三）
1.vue中添加定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <p v-show="isShow">我爱你赵丽颖</p> <button @click="destroy">点击销毁</button> </div> <script src="./js/vue.js"></script> <script> new Vue({ data:{ isShow:true }, //挂载之后 mounted() { //回调代码一般都在这 发ajax 定时器 //vm中设置timer属性 this.timer = setInterval(() => { this.isShow = !this.isShow }, 1000); }, beforeDestroy() { // 一般是在销毁实例之前的一些善后工作 清除定时器，解绑事件等相关 clearInterval(this.timer) }, methods: { destroy(){ //点击按钮我要销毁vm实例，销毁之前自动会调用beforeDestroy回调 this.$destroy() //销毁实例的方法，固定的 } }, }).$mount('#root') </script> </body> </html>
2.vue的生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- 插值花括号中，可以使用js语法 --> <p v-show="isShow" ref="pp">{{isShow?'我爱你赵丽颖':'我爱你杨幂'}}</p> <button @click="destroy">点击销毁</button> </div> <script src="./js/vue.js"></script> <script> new Vue({ data:{ isShow:true }, //生命周期钩子执行的顺序是固定的 beforeCreate() { //打印数据是看不见的 console.log(this.isShow) //undefined， }, created() { //打印vm的数据可以看见 console.log(this.isShow) //true // 报错，Error in created hook: "TypeError: Cannot read property 'innerText' of undefined" // console.log(this.$refs.pp.innerText) }, beforeMount() { //挂在前，模板挂在前（生成正儿八经的标签，虚拟dom） console.log(this.isShow) //true // Error in beforeMount hook:报错 console.log(this.$refs.pp.innerText) }, mounted() { console.log(this.$refs.pp) //true // 挂载后，可以打印看到文本 console.log(this.$refs.p.innerText) //我爱你赵丽颖 //回调代码一般都在这 比如发ajax 定时器 this.timer = setInterval(() => { this.isShow = !this.isShow }, 1000); }, // 跟新数据，打印的还是之前的数据 beforeUpdate() { console.log(this.isShow,this.$refs.pp.innerText) }, // 跟新数据，打印的是变化的数据 updated() { console.log(this.isShow,this.$refs.pp.innerText) }, beforeDestroy() { // 一般是在销毁实例之前的一些善后工作 清除定时器，解绑事件等相关 console.log('销毁前') }, destroyed() { //销毁后可以打印提示信息 console.log('销毁了') }, methods: { destroy(){ clearInterval(this.timer) //点击按钮我要销毁vm实例，销毁之前自动会调用beforeDestroy回调 this.$destroy() //销毁实例的方法，固定的 } }, }).$mount('#root') </script> </body> </html>
3.过渡和动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 */ /* 已经进入， 打算离开 */ .xxx-enter-active, .xxx-leave-active { transition: opacity .5s; } /* 打算进入，已经离开 */ .xxx-enter, .xxx-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } /*动画*/ /* 类名bounce */ .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } /* 关键帧名 bounce-in */ @keyframes bounce-in { /* scale缩放 */ 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="demo"> <button @click="show = !show"> Toggle </button> <!-- 动画标签，包裹需要添加动画的元素 --> <transition name="xxx"> <p v-if="show">hello</p> </transition> </div> <div id="example-2"> <button @click="show = !show">Toggle show</button> <!-- bounce 类名 --> <transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p> </transition> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#demo', data: { show: true } }) new Vue({ el: '#example-2', data: { show: true } }) </script> </body> </html>
4，自定义指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <p v-text="msg"></p> <p v-upper="msg"></p> </div> <div id="root1"> <p v-text="msg"></p> <p v-upper="msg"></p> </div> <script src="./js/vue.js"></script> <script> //全局指令 所有的vue实例都能使用 //指令名字不包含v- 而且不能是大写 // element是元素，bindings是对象，有个value属性，为标签文本 // Vue.directive('upper',function(element,bindings){ // // console.log(bindings) // element.textContent = bindings.value.toUpperCase() // element.innerText= bindings.value.toUpperCase() // }) new Vue({ el: '#root', data() { return { msg: 'i love you~' } }, //局部指令 只有当前的实例可以使用 directives: { upper(element, bindings) { // console.log(bindings) element.textContent = bindings.value.toUpperCase() } } }) new Vue({ el: '#root1', data() { return { msg: 'i love you~' } }, }) </script> </body> </html>
5，自定义过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <p>{{timeNow | timeFormat}}</p> <p>{{timeNow | timeFormat('hh:mm:ss')}}</p> </div> <div id="root1"> <div>{{ msg | filterA | filterB}}</div> </div> <script src="./js/vue.js"></script> <!-- Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。 --> <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.js"></script> <script> //自定义过滤器 是用来对渲染的数据进行进一步的计算之后，返回新数据再去渲染 // //全局过滤，timeFormat为新的计算值的名称 // Vue.filter('timeFormat',function(value,format='YYYY-MM-DD hh:mm:ss'){ // return moment(value).format(format) // }) //局部 new Vue({ el: '#root', data() { return { timeNow:Date.now() } }, //局部过滤 filters:{ // timeFormat为过滤新值后的名称 timeFormat(value,format='YYYY-MM-DD hh:mm:ss'){ return moment(value).format(format) } } }) new Vue({ el:"#root1", data(){ return { msg:'2018' } }, //过滤器, value代表需要过滤的原值，即msg,filterA为过滤后的值 filters:{ filterA(value){ return value+ '年' }, filterB(value){ return value +"hello" } } }) </script> </body> </html>
6，自定义插件
插件模块，
MyPlugin.js
(function(w){
let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
console.log('myGlobalMethod全局方法调用了，切记实例不能直接使用，是Vue的方法')
}
// 2. 添加一个全局资源(asset)
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 一些逻辑……
el.innerText = binding.value.toUpperCase()
}
})
// 4. 添加一个实例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log('$myMethod实例方法调用了，切记Vue不能直接使用，是V实例化对象的方法')
}
}
w.MyPlugin = MyPlugin
})(window);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p v-my-directive="msg"></p> </div> <script src="./js/vue.js"></script> <script src="./myPlugin.js"></script> <script> //获取MyPlugin对象 console.log(MyPlugin) Vue.use(MyPlugin) //重要，声明使用插件，本质就是自动调用插件对象的install方法 Vue.myGlobalMethod() let vm = new Vue({ el:'#app', data(){ return { msg:'liu' } } }) vm.$myMethod() </script> </body> </html>
7,自定义组件（非单文件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- 3.使用组件，本质是实例化了一个组件对象 --> <mybutton></mybutton> </div> <script src="./js/vue.js"></script> <script> //麻烦的写法 // //1、定义组件，本质是定义了一个实例化组件对象的构造函数 // const VueComponent = Vue.extend({ // //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el // //可以理解组件就是一个小的vm // data(){ // return { // count:0 // } // }, // // 模板,点击按钮，count递增 // template:'<button @click="count++">你点击了{{count}}</button>' // }) // //2、注册组件 本质是给组件对象起名字，mybutton // Vue.component('mybutton',VueComponent) //3、使用组件，本质是实例化了一个组件对象 //全局简单写法： Vue.component('mybutton', { //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el //可以理解组件就是一个小的vm data() { return { count: 0 } }, template: '<button @click="count++">你点击了{{count}}</button>' }) new Vue({ el: '#root', //自定义组件,注册组件到vm中,局部定义组件 components: { // 组件名称 mybutton: { //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el //可以理解组件就是一个小的vm data() { return { count: 0 } }, // 如果有两个以上的标签，外头要套个div template: '<div><button @click="count++">你点击了{{count}}</button><h2>我爱你</h2></div>' }, } }) </script> </body> </html>
8，自定义单文件组件
8.1 , component---Mybutton子组件，
<template> <div> <!-- //组件化的标签超过两个以上，外头套一个div --> <button @click="count++">你点击了{{count}}</button> <h2>我爱你</h2> </div> </template> <script> export default { name: '', data:{ count:0 } } </script> <style lang="less" scoped> </style>
8.2， 在入口组件App组件引入子组件Mybutton
<template> <div> <!-- //标签可以简写成单标签 --> <MyButton/> <MyButton/> <MyButton/> <MyButton/> </div> </template> <script> //引入组件对象 import MyButton from './components/MyButton.vue' // 注册组件,起名为MyButton // Vue.component('MyButton',MyButton) export default { name: '', components:{ // 简写 MyButton } } </script> <style lang="less" scoped> </style>
8.3, 在html文件中引入app入口组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> </div> <script src="./js/vue.js"></script> <script> import App from './App.vue' new Vue({ el:'#root', // 注册组件到vm中 components:{ App }, //模板 template:'<App/>' }) </script> </body> </html>
