脚本宝典收集整理的这篇文章主要介绍了来一场Vue的学习之旅,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue.component
用于注册全局组件上面这两句话很常见......嗯,下面就从vue组件开始一场vue的学习之旅吧。
创建Vue组件很简单,只需要声明一个组件对象字面量,然后安装到vue实例上(局部安装或者全局安装)。
将组件声明为对象字面量的形式,必有属性是template
,还要渲染数据data
吧,或者还需要父组件传递数据的接口props
,然后一个比较完备的组件就声明好了。
// 组件声明(为对象)
var myComponent = {
template: '<div>this is a component</div>',
data: function() {
return {
message: 'this is within the component'
}
},
props: ['name']
}
// 简要分析一下:组件是对象,内部属性使用data定义,可接受父组件传过来的值,使用props声明。
// 全局注册
// 需要在Vue实例化之前进行
// 声明完再安装
Vue.component('hello', myComponent);
// 局部注册
new Vue({
el: '#app',
components: {
'hello': myComponent
}
})
组件的prop可设置验证,即规定prop的类型,只有满足类型说明的才能正常接受数据。这个时候,props使用对象进行声明,而不再使用数组的形式。改写上面的例子:
var myComponent = {
template: '<div>this is a component</div>',
data: function() {
return {
message: 'this is within the component'
}
},
props: {
name: String
}
}
感慨:我觉得我抓不住点,朦朦胧胧地,总感觉还差一点什么。子组件和父组件,应该就是子类和父类的区别。子类在创建的时候,需要传入一组参数实现specialization。
总结:
parameters
)父组件向子组件可以直接传入字符串,或者通过属性传入,如下所示:
<hello name="luuuuu"></hello> // 'luuuuu' 是字符串
<hello :name="toChild"></hello> // toChild 是变量
import Second from './second.vue'
export default {
data () {
return {
msg: "Second Component",
toChild: "xiaoluu"
};
},
components: {
Second
}
}
export default
出来的是组件的配置对象,也就是上面提到的parameters
vue-loader
加载.vue
组件文件vue组件中用到了es6的语法,包括import
和export
,模块的引入和输出需要它们声明。
模块是局部的,有作用域限制。通常,由模块向外暴露function
, object
还有 primitive values
等,继而被其他模块引入调用。
模块中,使用export
暴露,使用import
引入。export default
表示只暴露出一个接口,可以是初始值,可以是函数,可以是类,可以是对象,等等等。vue components单组件模块中暴露的是一个对象(组件声明的参数对象,用来描述component的对象字面量)。
// export
// export有两种方式:定义后立即调用;先定义后调用(模块名称需要使用 { } 包裹)
export { myFunction }
export { myObject }
export default {}
export const myObject = {}
export function () {}
// import
import defaultModule from './base'
import {boo, foo} from './base'
import {boo as haa} from './base'
import, export和require, module.exports, exports的区别
相信,这两组语法很多人都遇到过,而且也会被其所困扰,功能是一样的,但是比较奇怪的是,有时候就是不能替换使用,为什么呀?
import 和 export 是es6模块语法,而 require 和 module.exports, exports 是Commonjs的模块规范。
如果想了解更多关于这两者的区别和使用方法,可以参考这篇文章:module.exports,exports,export和export default,import与require区别与联系。简要提点(绝大部分摘自上述博文):
- 在
module.exports
中,module
指当前模块,其为对象,有属性exports
,模块输出,都是挂载到module.exports
上输出的;使用require
加载模块,实际上是加载该模块的module.exports
属性。- 其实
exports
变量是指向module.exports
,加载模块实际是加载该模块的module.exports
。- 于是我们可以直接在
exports
对象上添加方法,表示对外输出的接口,如同在module.exports
上添加一样。注意,不能直接将exports
变量指向一个值,因为这样等于切断了exports
与module.exports
的联系。(类似于function
的prototype
属性)
另外,你可能还会疑惑什么时候用import
,什么时候用require
,因为看起来功能都是一样的。应该是这样的:前端组件和模块中,使用import
和export
语法,其余情况(node开发)使用commonjs语法。(vue组件中使用import语法,但是webpack等其他配置中使用的是commonjs语法)
咔咔地就到了vue脚手架这里~ 对脚手架里面的配置文件还是需要了解一下的~
参考这里的配置说明博客:vue2.0脚手架的webpack 配置文件分析
以下内容是我的读后感:
copy-webpack-plugin
插件)。webpack.optimize.UglifyJsPlugin
, optimize-css-assets-webpack-plugin
),静态资源版本控制(我猜的~~),服务器gzip压缩(compression-webpack-plugin
)等。webpack和vue components结合使用,图片的引入和路径问题。
#HTML
<img :src="'./' + imgUrls.demo01" alt="demo"> // 本地可正常打开
<img :src="imgUrls.demo01" alt="demo"> // 配置服务器后正常打开
#JS
import demo01 from './1.jpg'
export default {
data () {
return {
imgUrls:{
demo01
}
};
}
}
以上是脚本宝典为你收集整理的来一场Vue的学习之旅全部内容,希望文章能够帮你解决来一场Vue的学习之旅所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。