Vue组件和模块化
2018-09-30 本文已影响2人
追逐_chase
Vue.jpeg
组件
-
组件为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，需要什么样的功能就使用对应的组件
-
组件化：是从UI界面的角度划分;方便代码分层开发，保证功能模块的单一
-
模块化：是逻辑代码的角度划分，前端组件化，方便UI组件的重复利用
创建组件方式一
<script src="node_modules/vue/dist/vue.js"></script>
//组件的使用
<div id="app">
<!--
自定义的组件
注意：myComl在写成元素的时候 驼峰命名不在适用，需要在中间添加一个 - 链接 my-coml
若是在命名的时候没有驼峰命名，在引用的时候就不必在使用 - 链接，直接使用可以了
-->
<my-coml></my-coml>
</div>
<script>
//1创建全局的Vue组件 模板对象
var coml = Vue.extend({
//指定组件要展示的html结构
template:"<h2> 这是使用Vue.extend创建的组件</h2> "
})
//Vue.component("组件的名称"，创建出来的组件模板对象)
Vue.component("myComl",coml)
//实例创建
new Vue({
el:"#app",
})
</script>
创建方式二
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
<mycmol></mycmol>
</div>
<script>
//创建组件 在模板对象直接用对象代替
Vue.component("mycmol",{
data:function () {
return {
count:0
}
},
template:`<div>
<h1>这是第二种创建组件的方式</h1>
<button @click='count++'>这是开始{{count}}</button>
</div>`
})
new Vue({
el:"#app"
})
</script>
- 注意：在创建模板时，必须要只有一个根元素，所以需要用
容器元素包裹子元素 - 组件可以有自己的
data,但是组件的data是一个function（函数），必须返回一个对象
创建方式三
//引包
<script src="node_modules/vue/dist/vue.js"></script>
//HTML
</div><div id="app">
<mycoml3></mycoml3>
</div>
<!--模板代码结构-->
<template id="teml">
<div>
<h1>这是通过template元素创建的组件的结构</h1>
<h4>这样方便些html元素</h4>
</div>
//JS
<script>
//创建组件
Vue.component("mycoml3",{
template:"#teml"
})
new Vue({
el:"#app"
})
</script>
定义私有组件
<div id="app">
<login></login>
</div>
<script>
new Vue({
el:"#app",
components:{
//定义私有组件
//组件的名称
login:{
//模板对象字符串
template:`<div>
<label>
name:
<input type="text" placeholder="登录。。。">
</label>
</div>`
}
}
})
</script>
多个组件之间的切换
- 在
Vue中提供了component元素，这是一个占位符元素，可以根据:is属性来绑定要显示的元素
<component :is="comName"></component>
<div id="app">
<a href="" @click.prevent="loginHandle">登录</a>
<a href="" @click.prevent="registerHandle">注册</a>
<a href="" @click.prevent="forgetHandle">忘记密码</a>
<!--Vue提供的component元素，来展示对应名称的组件-->
<!--component是一个暂未符 根据:is属性 后面对应的名称 来展示对应的组件-->
<component :is="comName">
<!--绑定一个属性 变量 根据@click点击方法 赋值 切换组件-->
</component>
</div>
<script>
Vue.component("login",{
template:"<h2>登录组件</h2>"
})
Vue.component("register",{
template:"<h2>注册组件</h2>"
})
Vue.component("forget",{
template:"<h2>忘记密码组件</h2>"
})
new Vue({
el:"#app",
data:{
//默认显示 登录组件
comName:"login"
},
methods:{
loginHandle:function () {
this.comName = "login"
},
registerHandle:function () {
this.comName = "register"
},
forgetHandle:function () {
this.comName = "forget"
}
}
})
</script>
多个组件之间的过渡
- 就按照上面的代码例子说 我们只需要加一个
transition元素 - 注意：多个组件之间的过渡有一个
mode属性,mode="out-in表示一个组件包动画先离开完全之后，另外一个组件在进来
//样式
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(50px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
<transition mode="out-in" >
<!--Vue提供的component元素，来展示对应名称的组件-->
<!--component是一个暂未符 根据:is属性 后面对应的名称 来展示对应的组件-->
<component :is="comName">
<!--绑定一个属性 变量-->
</component>
</transition>
父组件传值子组件
<div id="App">
<!--父组件，在引用子组件的时候，可以通过属性绑定(v-bind:)的方式，把需要传递的数据给子组件-->
<coml :parmsg="msg"></coml>
</div>
<script>
new Vue({
el:"#App",
data:{
msg:"父组件是不是？"
},
methods:{
},
components:{
coml:{
data:function () {
//字组件中的data数据 ，并不是父组件传递的，是子组件私有的
//比如：子组件通过Ajax，请求回来的数据，可以放到data身上
//data里面的数据是可读可写的
return {
title:"这是一个标题",
content:"www"
}
},
template:`<h1>这是一个子组件的H1++{{parmsg}}++{{title}}</h1>`,
//绑定好属性之后，在props中 写入这个属性，这样才可以使用这个数据
// 组件中的所有props中的数据，都是通过父组件传递给子组件的
//里面的数据之可读的
props:["parmsg"]
}
}
})
- 小总结
- 父组件在向子组件传值时
- 1.通过属性绑定（
v-bind:）定义一个新的属性 - 2.将这个
新的属性写入props数组，这个里面的数据只可读，不可更改，否则报错
父组件传递方法给子组件
-
v-on方属性绑定
<div id="app">
<!--父组件传递方法给子组件-->
<teml @func="show"></teml>
</div>
<!--模板---子组件-->
<template id="tml">
<div>
<h1>子组件现不现实</h1>
<input type="button" value="子组件" @click="myclick">
</div>
</template>
<script>
new Vue({
el:"#app",
data:{},
methods:{
show(){
console.log("点击父组件上的方法");
}
},
components:{
teml:{
data:function () {
return{}
},
template:"#tml",
props:[],
methods:{
myclick:function () {
console.log("是不是点击");
//拿到父组件的方法，调用
//emit出发 调用
this.$emit("func");
// 注意如果父组件上的函数有参数，那么这个 emit的第二个参数起，就是父组件函数参数与之对应
//调用父组件中的方法，并向父组件方法中传递参数this.$emit("func"，123，456);
}
}
}
}
})
</script>
小案例
- 结合组件的的介绍点训练
//引包， Vue.js 和 bootstrap
<script src="node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
//Html
<div id="app">
<!--父组件 向 子组件传递方法 -->
<temp @func="loadCommtent"></temp>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.name}}</span>
{{item.content}}
</li>
</ul>
</div>
//模板字符串
<template id="tmp1">
<div>
<div class="form-group ">
<label >评论人:</label>
<input type="text" class="form-control" v-model="name">
</div>
<div class="form-group ">
<label >评论内容:</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
</div>
</div>
</template>
//JS
<script>
var contentbox = {
data:function () {
return {
name:"",
content:""
}
},
template:"#tmp1",
methods:{
//发表评论的方法
postComment(){
//1.数据存到 本地 localStorage
//2.localStorage只支持字符串，把对象转化成json字符串，在之前要处理判断
//是否有字符串
//3.若是localStorage中的评论字符串，为空不存在，则可以返回一个`[]`让json.parse转换
if (!this.name || !this.content) {
alert("请正确输入。。。")
return;
}
var comment = {id:Date.now(),name:this.name,content:this.content};
//获取本地数据
var list = JSON.parse(localStorage.getItem("cms") ||"[]");
list.unshift(comment);
//保存数据到本地
localStorage.setItem("cms",JSON.stringify(list));
//清空属性数据
this.name = this.content = "";
this.$emit("func");
}
}
}
new Vue({
el:"#app",
data:{
list:[
{id:Date.now(),name:"TT",content:"这是一个新的评论"},
{id:Date.now(),name:"CC",content:"CC这是一个新的评论"},
{id:Date.now(),name:"DD",content:"DD这是一个新的评论DDDD"}
]
},
created() {
this.loadCommtent();
},
methods:{
loadCommtent:function () {
//获取本地数据
var list = JSON.parse(localStorage.getItem("cms")||"[]");
//赋值给list属性
this.list = list;
}
},
components:{
temp:contentbox
}
})
</script>
render渲染
-
render属性对应的是一个方法函数，这个函数有一个固定的形参createElements是一个方法，当你把模板组件传入的时候，返回一个渲染的页面html, 这个方法会把原来的div删除，把返回的html渲染删除的div界面
<div id="app">
</div>
<script>
var login = {
template:"<h1>这是登录组件</h1>"
}
new Vue({
el:"#app",
data:{},
methods:{},
render:function(createElements){
//createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构
return createElements(login);
//注意：返回的结果会替换页面中 指定的那个容器(也就是会把页面中的div删除掉，把这个返回的代替原来删除的)
}
})
</script>
喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。
image.png
