一、概述
一个vue文件主要由三个部分组成：模板页面、Js模块对象、CSS样式。
组件： 组件是一个局部功能界面，它包含了所有要实现这个功能界面的相关资源，如CSS、HTML等.
组件化编码的基本流程
1) 拆分界面,抽取组件
2) 编写静态组件
3) 编写动态组件
初始化数据,动态显示初始化界面；
实现与用户交互功能；
二、使用
以下主要演示组件化编码的过程，首先定义一个子组件HelloWorld.vue、然后在在根组件App.vue中引入子组件，
在main.Js中将App.vue渲染到主页面index.Jsp中去。
1. 组件化编程的步骤
(1) 首先定义一个子组件：HelloWorld.vue
<template> <div> <h2 >{{msg}}</h2> </div></template><script> // 自定义一个子组件 // 这是默认的写法 // 向外默认暴露一个配置对象（与vue一直） export default { // data : {} // 对象，这里不可以写 data () { // data里面可以写对象，也可以写函数，但是在组件里面必须写函数 return { msg: ‘第一个Vue组件‘ } } }</script><style scoped> .Title { color: red; background: yellow; }</style> (2) 根组件App.vue：在根组件里面使用子组件,最终要将改组件渲染到index.HTML页面上去
<template> <div> <img src="./assets/logo.png" alt="logo" > <!--3.使用组件标签--> <HelloWorld/> </div></template><script> import HelloWorld from ‘./components/HelloWorld.vue‘ // 1. 引入自己定义的子组件 export default { components: { // 2.映射组件标签(通过这个配置，将子组件映射成<HelloWorld>标签，这里的HelloWorld是HelloWorld:HelloWorld的简写) HelloWorld } }</script><style> .logo { wIDth: 100px; height: 100px; }</style>
(3) 入口Js：main.Js
/*入口Js */import Vue from ‘vue‘ // 引入vueimport App from ‘./App.vue‘ // 1.引入App组件// 创建vm实例,最终的目的是将App组件渲染到index页面中去/* eslint-disable no-new */new Vue({ el: ‘#app‘,components: {App},// 2.映射成标签：通过这个配置，将组件映射成指定名称的一个标签(即这里的标签名叫App),这里{App}可以写成{App:App} template: ‘<App/>‘ // 3.使用组件标签：指定需要渲染到页面的模板，这个模板会插入到 ‘#app‘中(el所匹配的页面上的div中)})
标签渲染也可以采用如下的简化写法：
/*入口Js */import Vue from ‘vue‘import App from ‘./App.vue‘import store from ‘./store‘import ‘./base.CSS‘// 创建vm/* eslint-disable no-new */// new Vue({// el: ‘#app‘,// components: {App},// 映射组件标签// template: ‘<App/>‘,// 指定需要渲染到页面的模板// store // 所有的组件对象都多了一个属性: $store(值就是store对象)// })// 这是比较简洁的写法new Vue({ el: ‘#app‘,//箭头函数是用来定义匿名函数的，接收一个参数h,而这个参数是函数类型的，这个是用来创建元素标签的(根据组件来创建)，这里是根据App组件来创建来创建所对应的标签<App/>, //返回的结果最终会插入到el所对应的div中去 render: h => h(App),// 渲染函数,‘=>‘有两个作用：代表是一个函数;代表return 这个渲染函数代替了components、template的功能 store})// 原始方式// new Vue({// el: ‘#app‘,// render: function (createElement) {// return createElement(App) //更具组件创建一个元素标签，相当于返回了<App/>标签，而这个<App/>标签会被插入到‘#app‘中去// },// store// })VIEw Code
(4) index.HTML: 这个页面基本上没有做任何的配置
<!@H_2_301@DOCTYPE HTML><HTML> <head> <Meta charset="utf-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <Title>vue_blank</Title> </head> <body> <div ID="app"></div> <!-- built files will be auto injected --> </body></HTML>@H_762_403@ 总结
以上是内存溢出为你收集整理的3.2 vue组件的使用/去除红色波浪线全部内容，希望文章能够帮你解决3.2 vue组件的使用/去除红色波浪线所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）