Vue组件
组件作用:
用来减少Vue实例对象中代码量, 日后在使用Vue开发过程中, 可以根据不同的业务功能将页面中划分不同的多个组件, 然后由多个组件去完成整个页面的布局, 便于日后使用vue进行开发时页面管理, 方便开发人员维护
组件使用:
(一)全局组件注册:
- 说明: 全局组件注册给vue实例, 之后可以在任意vue实例的使用范围内使用该组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入vue.js文件 -->
<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "app">
<login></login>
</div>
<script type="text/javascript">
// 开发全局组件
Vue.component("login",{
template: "<div><h1>用户登录</h1></div>"
})
var vue = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
-
小结:
-
Vue.component用来开发全局组件, 参数1为: 组件名称, 参数2为组件配置模板对象
-
template属性中用来书写组件的html代码(也就时书写模板对象)
-
template中必须有且只有一个root元素(根容器)
-
eg:像上面的: template : “< div>< h1>用户登录< /h1>< /div>” 中的div就是一个根容器, 我们只能写一个根容器
-
如果写两个根容器的时候就会出错: eg:template : “< div>< h1>用户登录< /h1>< /div>< div>< /div>”
-
-
使用时需要在Vue作用范围内根据组件名使用全局组件
-
如果组件命名的时候使用了驼峰命名的规则, 在使用组件的时候必须将驼峰的所有单词小写, 并且将驼峰交接处使用-(中线)分割
- 这个时候是因为我们的JS中使用了驼峰命名规则对组件进行了一个命名, 但是这个时候我们在HTML中对于大小写是没有严格区分的, 我们的HTML中的标签命名的时候都是采用的短横线分割命名法, 所以当JS中使用驼峰命名的组件我们要在HTML中使用的浏览器会自动将其解析为对应的短横线分割命名法的形式
- 驼峰命名规则: camelCase
- 短横线分割命名规则: kebab-case
- 因为Vue在对组件命名的标准形式就是单词全部小写, 单词之间使用-(中线)分割, 所以如果我们使用了驼峰规则给组件命名, 那么我们的vue会将其在内存中转化为: 小写单词中间使用-(中线)分割的形式
- 这个时候是因为我们的JS中使用了驼峰命名规则对组件进行了一个命名, 但是这个时候我们在HTML中对于大小写是没有严格区分的, 我们的HTML中的标签命名的时候都是采用的短横线分割命名法, 所以当JS中使用驼峰命名的组件我们要在HTML中使用的浏览器会自动将其解析为对应的短横线分割命名法的形式
-
(二)局部注册
全局祖册往往都是不够理想的, 比如: 如果你使用了一个像webpack这样的构建系统, 全局注册所有的组件意味着即便你已经不在使用一个组件了, 但是它任然会被包含在你最终的构建的结果中 —> 这就造成了用户下载的JavaScript无谓的增加了
- 所以我们一般都是将组件给Vue实例中一个components属性来完成组件注册, 这种方式不会对Vue实例造成累加 —> 这种组件注册的方式我们就称之为: “局部注册”
第一种开发方式:(第一种局部注册的开发方式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一种局部注册的开发方式</title>
<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id = "app">
<login></login>
</div>
<script type="text/javascript">
const login = {
template : "<div><h2>用户登录</h2></div>"
}
const app = new Vue({
el:"#app",
data:{
},
methods:{
},
components: { //用来注册局部组件
login:login
}
})
</script>
</body>
</html>
第二种开发方式:(第二种局部注册的开发方式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二种局部注册的开发方式</title>
<script src="../js/Vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id = "login_Template">
<h1>用户登录</h1>
</template>
<div id = "app">
<login></login>
</div>
<script type="text/javascript">
let login = {//具体局部组件名称
template : "#login_Template"
}
const app = new Vue({
el:"#app",
data:{
},
methods:{
},
components: { //用来注册局部组件
login:login
}
})
</script>
</body>
</html>
补充:
局部组件的使用方式和全局组件的使用方式是一样的, 都是在Vue实例作用范围之内使用
补充二:
var声明变量
let代替var, 声明变量
const声明常量
var,let声明的是变量, 变量一旦初始化之后, 还可以重新赋值
const声明的就是常量, 常量一旦初始化之后, 就不能重新赋值了, 否则就会出错
var允许重复声明同一个变量, 而let和const不允许
- 只要是已经声明过的变量或者常量,不论是用什么方式声明的, 都不可以使用let或者const再次声明
补充三:
我们注册全局组件的时候通过Vue,注意: 首字母是大写的, 通过Vue来调用component属性来实现注册全局组件