vue组件初学
1、组件定义component:
vue extend{}是组件构造器,构造之后需要实例化才可用,而component是直接创建组件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id= "app" > <runoob></runoob> </div> <script> // 注册 Vue.component( 'runoob' , { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script> |
2、prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id= "app" > <child message= "hello!" ></child> </div> <script> // 注册 Vue.component( 'child' , { // 声明 props props: [ 'message' ], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script> |
3、directive指令定义
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < title >Vue 测试实例 - 菜鸟教程(runoob.com)</ title > < script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></ script > </ head > < body > < div id="app"> < div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></ div > </ div > < script > Vue.directive('runoob', function (el, binding) { // 简写方式设置文本及背景颜色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </ script > </ body > </ html > |
4、自定义事件:
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步