过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--{{msg}}--> {{count|change('--百分比')}} {{status|change}} <div>全局过滤器{{count|allNumber}}</div> </div> <script src="vue.js"></script> <script> Vue.filter('allNumber', function (value) { return value + '%' }); new Vue({ el: '#app', data: { msg: 'test', count: 19, status: 2 }, methods: {}, //过滤器 filters: { // change:function (value,flag) { change: function (status) { // 1、代表成功 // 2、代表失败 if (status == 1) { return '成功' } else if (status == 2) { return '失败' } // console.log('value-->'+value) // console.log('flag-->'+flag) return value+'%'+flag } } }) </script> </body> </html>
生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{msg}}</div> <script src="vue.js"></script> <script> // 生命周期 // vue在实例化到页面经理了哪些步骤 // 钩子函数 // 预留了几个特殊的方法 new Vue({ el: '#app', data: { msg: '' }, //实例化后，数据还没有初始化 beforeCreate: function () { console.log('beforeCreate') }, // 数据初始化之后 created: function () { console.log('created') }, // 未和标签进行关联之前 beforeMount: function () { console.log('beforeMount') }, // 实例和标签进行关联后 mounted: function () { // 获取后台的列表数据 this.msg = '获取后台的列表数据' console.log('mounted') }, // 数据更新前 beforeUpdate: function () { console.log('beforeUpdate') }, // 数据更新后 updated: function () { console.log('updated') }, methods: { register: function () { axios({ method: 'post', data: { name: vm.username, grade: vm.pwd, phone: vm.cpwd }, url: 'http://api.nnzhp.cn/api/user/add_stu' }).then(function (data) { console.log(data) }).catch(function (error) { console.log(error) }) } } }) </script> </body> </html>
组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--<demo></demo>--> <demo-key></demo-key> </div> <script src="vue.js"></script> <script> // 组件：将公用的功能抽离出来，形成组件，目的：复用代码 // 全局组件 Vue.component('demo', { template: '<h1 @click="change">{{msg}}</h1>', // 组件当中的data必须是个方法 data: function () { return { msg: 'msg' } }, methods: { change: function () { this.msg = 'test' } } }) new Vue({ el: '#app', data: {}, methods: {}, // 局部组件 components: { "demo-key": { template: "<h1 @click='change'>{{msg}}</h1>", data: function () { return { msg: 0 } }, methods: { change: function () { this.msg++ } } } } }) </script> </body> </html>
refs介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--<div ref="test">ref=test</div>--> <test ref="a"></test> <test ref="b"></test> <div>父组件-<span>{{count}}</span></div> <input type="button" value="test" @click="change"> </div> <script src="vue.js"></script> <script> // 定义全局组件 Vue.component('test', { template: '<div>子组件-<span @click="add">{{number}}</span></div>', data: function () { return { number: 0 } }, methods: { add: function () { this.number++ } } }) new Vue({ el: '#app', data: { count: 0 }, methods: { change: function () { // console.log(this.$refs.test) // document.getElementById('i1') this.count = this.$refs.a.number + this.$refs.b.number } } }) </script> </body> </html>
is规避错误
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <table border="1"> <thead> <th>id</th> </thead> <tbody> <tr is="tr-demo"></tr> </tbody> </table> <!-- <tr-demo></tr-demo> --> </div> <script src="vue.js"></script> <script> // 单纯的创建了一个全局组件 Vue.component('tr-demo', { template: '<tr><td>1</td></tr>' }) new Vue({ el: '#app' }) </script> </body> </html>
父子组件交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <number @change="countAdd"></number> <number @change="countAdd"></number> <div>父组件-<span>{{count}}</span></div> </div> <script src="vue.js"></script> <script> Vue.component('number', { template: '<div>子组件-<span @click="add">{{num}}</span></div>', data: function () { return { num: 0 } }, methods: { add: function () { this.num++ this.$emit('change') //向父组件触发事件 } } }) new Vue({ el: '#app', data: { count: 0 }, methods: { countAdd: function () { this.count++ } } }) </script> </body> </html>
父组件像子组件传值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <number :num2="number2" num3="10"></number> <!-- {{number2}}<input type="button" value="test" @click="change"> --> </div> <script src="vue.js"></script> <script> Vue.component('number', { //父组件向子组件 存在单向数据流 // props:['num2','num3'], props: { 'num2': { type: [Number, String], default: 200, required: true //不能和default连用 } }, // template :'<div>子组件-<span>{{count}}</span></div>', template: '<div>子组件-<span @click="add">{{count}}</span></div>', data: function () { return { count: this.num2, number3: this.num3 } }, methods: { add: function () { this.count = 100 } } }) new Vue({ el: '#app', data: { number2: 99 } }) </script> </body> </html>