定义Vue组件化
什么是组件化：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件
组件和模块化的不同：
-
模块化：是从代码逻辑的角度来划分的。
-
组件化： 是从UI界面的角度来进行划分的
。
组件定义的三种方式<script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div class="app"> <my-comp></my-comp> //第一种 <my-twocopm></my-twocopm>第二种 <mycomp3></mycomp3>第三种 </div> <template id="temp"> 这是属于第三种方式，通过id来定义的 <div> <h3>这是使用Vu常见的组件第三种</h3> </div> </template> <script> //组件名尽量不要使用驼峰明明迷宫 //使用extend 来创建组件 var exte=Vue.extend({ template:'<h3>这是使用Vu常见的组件</h3>' }); Vue.component('my-comp',exte); //组件里面只能有一个唯一的根元素。如果有两个元素就会报错。 Vue.component('my-twocopm',{ template:'<h3>只是第二种方式常见的component</h3>' }) Vue.component('mycomp3',{ //第三种方式，这个是通过id来定义的这种方式比较好 template:'#temp' }) var vm = new Vue({ el:'.app', data:{ }, methods:{ } }) </script>
私有组件
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="app">
<login></login>
</div>
<template id="temp1">
<h1>这是私有组件的东西</h1>
</template>
<script>
var vm = new Vue({
el:'.app',
data:{
},
methods:{
},
/*定义私有组件 这里定义的就只能在app 使用*/
components:{
login:{
// template:'<h1>这是私有的组件</h1>'
template:"#temp1"//一样的可以在外面定义
}
},
filerts:{},//过滤
directives:{}
})
</script>
</body>
</html>
组件中的data
一个组件的data 选项必须是一个函数，
组件中的data处理必须是一个方法外，方法内部必须返回一个对象。
格式如下：
Vue.component('comp',{
template:'<h1>全局组件{{count}}</h1>',
data:function(){
return {
count:40
}
},
})
为什么data 必须是一个函数
<div class="app">
<counter></counter>
<counter></counter>
</div>
<template id="temp1">
<button @click="clickCount">点击次数{{count}}</button>
</template>
<script>
Vue.component('counter',{
template:'#temp1',
data:function(){
return {
count:40
}
},
methods:{ //methods 在组件中的使用
clickCount(){
this.count++;
}
}
})
var vm = new Vue({
el:'.app',
data:{
},
methods:{
},
filerts:{},//过滤
directives:{}
})
</script>
组件切换
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="app">
<a href="" @click.prevent="showText= 'login'">登录</a>
<a href="" @click.prevent="showText= 'register'">注册</a>
<!-- <login v-if="flag"></login>
<register v-else></register> -->
<!-- <login v-show="flag"></login>
<register v-show="!flag"></register> -->
<component :is="showText">
</component>
</div>
<script>
Vue.component('login',{
template:'<h1>登录</h1>'
})
Vue.component('register',{
template:'<h1>注册</h1>'
})
var vm = new Vue({
el:'.app',
data:{
flag:true,
showText:'login'
},
methods:{
},
filerts:{},//过滤
directives:{}
})
</script>
</body>
</html>
到现在我学习啦
component ,template ,transition, transition-group
组件切换的动画
<div class="app">
<a href="" @click.prevent="showText= 'login'">登录</a>
<a href="" @click.prevent="showText= 'register'">注册</a>
<!-- 通过mode 来设置切换的方式 -->
<transition mode="out-in">
<component :is="showText">
</component>
</transition>
</div>
<script>
Vue.component('login',{
template:'<h1>登录</h1>'
})
Vue.component('register',{
template:'<h1>注册</h1>'
})
组件种值传递
<body>
<div class="app">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的额数据通过属性
绑定的烦事，传递到子组件内部，供子组件使用 -->
<com1 v-bind:parentmsg = "msg"></com1>
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
msg:'这是父控件的msg'
},
methods:{
},
components:{
// data中的值是组件自己的，比如组件从服务器请求的。可以读，也可以写
data:function(){
return {
id:'1'
}
},
com1:{
// props 里面的值是从父控件中得到的，只能读不能写
props:['parentmsg'],
//发现子组件访问不到父亲组件的值 template:'<h1>com1组件 -- {{msg}}</h1>'
template:"<h1>com1组件 -- {{ parentmsg }}</h1>"
}
}
})
</script>
</body>
父子组件种方法传递 emit
<body>
<div class="app">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的额数据通过属性
绑定的烦事，传递到子组件内部，供子组件使用 -->
<comp2 @clickchild="show"></comp2>
</div>
<template id="temp1">
<div>
<input type="button" value="点我" @click="myclick">
<h1>这个是组件</h1>
</div>
</template>
<script>
var comp2 = {
template:'#temp1',
data:function(){
return{
sonmsg:{name:'小君'}
}
},
methods:{
myclick(){
this.$emit('clickchild',this.sonmsg )
}
}
}
var vm = new Vue({
el:'.app',
data:{
msg:'这是父控件的msg'
},
methods:{
show(data){
console.log(data);
console.log('调用啦父控件的方法'+data.name)
}
},
components:{
comp2
}
})
</script>
</body>
路由
- 后端路由：由于普通的网网站，私有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
- 前端路由： 对于单页面应用来说，主要通过URL中的hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：http请求中不会包含hash相关的内容；所有，单页面程序中的页面跳转主要用hash实现
- 在单页面应用程序中，这种通过hash改变来切换页面的方式，称为前端路由；
网友评论