| vue 方法属性 | | | --- | --- | | name | --- | ``` <script> export default { name: 'app' //当前组件名字 } </script> ``` | data | 存放数据的属性 | | --- | --- | ``` <template> <div>{{message}}</div> </template> <script> export default { name: 'app', data() { return { message: '配置数据信息' } } } </script> ``` | methods | 配置方法 | | --- | --- | ``` <template> <div @click="redirect(url)"></div> </template> <script> export default { name: 'app', methods: { redirect: function(url) { this.$route.push(url); } } } </script> ``` | filters | 过滤器 | | --- | --- | ``` <template> <div>{{message | reverseMessage}}</div> </template> <script> export default { name: 'app', data() { return { message: '反转字符串过滤' } }, filters: { reverseMessage: function(msg) { this.message = msg.split('').reverse().join(''); } } } </script> ``` | computed | 计算器 | | --- | --- | 好像是这么用的，待检测 ``` <template> <div>{{message | reverseMessage}}</div> </template> <script> export default { name: 'app', data() { return { message: '反转字符串过滤' } }, computed: { reverseMessage: function(msg) { this.message = msg.split('').reverse().join(''); } } } </script> ``` | watch | 监听器 | | --- | --- | ``` <script> export default{ name: 'app', watch: { } } </script> | component | 注册组件 | | --- | --- | <script> //注册引用进来的组件 import Swiper from './swiper'; export default { name: 'app', component: { Swiper } } </script> ``` | prop[props] | 父子组件传值 | | --- | --- | >基本介绍： prop 是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop" 使用方法： #获取从父级组件的信息，再进行过滤验证 ``` <script> export default { name: 'app', props: { message: { type: [String, Number], required: true, default: 100, } } } </script> ``` | 生命周期 | | | --- | --- | >beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDesotry、destoryed ``` <template> <div id="app"> {{msg}} </div> </template> <script> export default { el: "#el", data() { return { msg: '生命周期' } }, beforeCreate(){ console.log("创建前："); console.log(this.$el); console.log(this.$data); }, created(){ console.log("创建完成："); console.log(this.$el); console.log(this.$data); }, beforeMount(){ console.log("挂载前："); console.log(this.$el); console.log(this.$data); }, mounted(){ console.log("挂载完成："); console.log(this.$el); console.log(this.$data); }, beforeUpdate(){ console.log('=即将更新渲染='); let name = this.$refs.app.innerHTML; console.log('name:'+name); }, updated(){ console.log('==更新成功=='); let name = this.$refs.app.innerHTML; console.log('name:'+name); }, /*beforeDestory(){ console.log("销毁前："); }, destoryed(){ console.log("销毁完成："); }*/ } </script> ``` 运行的流程如下图所示：