1. 组件
组件是vue最强大的功能之一，组件可以扩展html元素，封装可重用代码！
简单理解：组件就是自定义标签，内部放了很多html代码！
1.1 全局组件
在所有vue实例中在它所挂载的元素下面有效！
全局组件的注册方式：第一个参数位组件名字，第二个参数是一个对象，template属性：模板内容！
Vue.component("mycomponet",{
template:"<h1>全局的组件</h1>"
})
使用方式：
<body>
<div id="myDiv">
<mycomponet></mycomponet>
</div>
<span id="mySpan">
<mycomponet></mycomponet>
</span>
</body>
<script>
Vue.component("mycomponet",{
template:"<h1>全局的组件</h1>"
})
new Vue({
el:"#myDiv"
})
new Vue({
el:"#mySpan"
})
</script>
之所以说是全局的，是因为我注册了一个组件，可以声明多个vue实例，挂载到不同的dom节点！
1.2 注意事项
- 如果是驼峰命名的方式或者有大写字母，那么如下注册的组件是无法使用的！
<script>
Vue.component("myComponet",{
template:"<h1>全局的组件</h1>"
})
new Vue({
el:"#myDiv"
})
</script>
<div id="myDiv">
<myComponet></myComponet>
</div>
正确的写法，以大写字母分割并且加上“ - ”
<div id="myDiv">
<my-componet></my-componet>
</div>
这样就可以使用组件了，推荐以后都以小写命名！
-
定义组件模板的时候，必须有且有一个根元素，否则不能正常渲染组件！
例如如下，没有根节点，是只会显示第一个<h1>标签，不会显示<span>标签！
Vue.component("myComponet",{
template:"<h1>全局的组件</h1><span>x</span>"
})
如下的模板什么都不会显示！
Vue.component("myComponet",{
template:"全局的组件"
})
添加根节点，全部展示！
Vue.component("myComponet",{
template:"<div><h1>全局的组件</h1><span>x</span></div>"
})
1.3 局部组件
在自己的vue实例中，在它所挂载的元素下面有效！
- 第一种方式：
<script>
new Vue({
el:"#myDiv",
components:{
"mycomponet":{
template:"<h1>hello componet</h1>",
},
"myconponet02":{
template:"<h5>HELLO COMPONET</h5>"
}
}
})
</script>
<div id="myDiv">
<mycomponet></mycomponet>
<myconponet02></myconponet02>
</div>
- 第二种方式：
<script>
let appcomponet = Vue.component("appcomponet",{
template:"<span style='color: red'>HELLO COMPONET</span>",
})
new Vue({
el:"#app",
components:{
"componetapp":appcomponet
}
})
</script>
<div id="app">
<appcomponet></appcomponet>
</div>
先创建全局的组件，再把它引用给局部组件！
1.4 定义组件的方式2
使用template的标签定义模板：
<script>
Vue.component("mycomponet",{
template:myTemplate
})
new Vue({
el:"#myDiv"
})
</script>
<div id="myDiv">
<mycomponet></mycomponet>
</div>
<template id="myTemplate">
<div>
<span style="color: red">h</span>
<h1 style="color: coral">l</h1>
<div style="color: yellow">l</div>
</div>
</template>
1.5 定义组件的方式3
使用script标签创建模板：
<script id="templateId" type="text/template">
<div>
<span style="color: red">h</span>
<h1 style="color: coral">l</h1>
<div style="color: yellow">l</div>
</div>
</script>
<script>
Vue.component("mycomponet",{
template:templateId
})
new Vue({
el:"#myDiv"
})
</script>
<div id="myDiv">
<mycomponet></mycomponet>
</div>
1.6 获取动态元素
如果组件要获取动态元素，他不会去找vue中的data属性，而是去找组件中的data属性
组件中的data对应值必须是一个函数，并且在函数中返回值是一个json格式！
<template id="templateId">
<span style="color: red">{{userInfo}}</span>
</template>
<script>
Vue.component("mycomponet",{
template:templateId,
data:function () {
return {userInfo:"admin" }
}
})
new Vue({
el:"#myDiv"
})
</script>
<div id="myDiv">
<mycomponet></mycomponet>
</div>
1.7 组件的另一种用法
<script type="text/javascript">
let components = Vue.component("mycomponent",{
template,
})
new Vue({
el:"#myDiv",
components,
template:"<mycomponent/>"
})
</script>
<div id="myDiv">
</div>
<template id="template">
<h1>HELLO WORLD</h1>
</template>
这里使用了es6的新语法，当属性名和值的名字一致时，可以简写为一个名字。
template:"<mycomponent/>"表示使用默认的组件。
2. 路由
路由：是负责将进入到浏览器的请求映射到特定的组件代码中
使用：
-
准备组件
npm 安装 vue-router
js页面引入
创建组件
let INDEX = Vue.component("index",{ template:"<h1 style='color: red'>首页</h1>" }) let EMPLOYEE = Vue.component("employee",{ template:"<h1 style='color: black'>员工</h1>" }) let PRODUCT = Vue.component("product",{ template:"<h1 style='color: chocolate'>产品</h1>" }) -
映射关系（将url映射到组件！）
let router = new VueRouter({ routes:[{ path:"/index", component:INDEX, },{ path:"/employee", component:EMPLOYEE, },{ path:"/product", component:PRODUCT, }] });path：路径
component：映射到的组件
-
告诉vue要使用路由
new Vue({ el:"#myDiv", router })es6的语法：如果属性名和值一样的话，可以简写为一个！这里的router就相当于<u>router：router</u>
-
组件渲染的位置
<div id="myDiv"> <router-link to="/index">首页</router-link> <router-link to="/employee">员工</router-link> <router-link to="/product">产品</router-link> <hr /> <router-view></router-view> </div>router-link：使用该组件导航，to属性用来指定链接！默认会被渲染成一个a标签！
router-view：将匹配到的组件渲染在这里！
3. 计算属性
vue实例中computed属性
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
<script type="text/javascript">
new Vue({
el:"#myDiv",
data:{
birthday:1429032123201
},
computed:{
date(){
return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"
+new Date(this.birthday).getDate()+"日"+new Date(this.birthday).getHours()+"时"
+new Date(this.birthday).getMinutes()+"分"+new Date(this.birthday).getSeconds()+"秒"
}
}
})
</script>
<div id="myDiv">
<span>{{date}}</span>
</div>
调用方法的时候不能加（）
4. watch属性
watch可以监控一个值的变化，从而做出反应！
它可以传递两个参数，改变之前的值，和改变之后的值！
如果要动态获取数据，必须要双向绑定v-model="msg"
<script type="text/javascript">
new Vue({
el:"#myDiv",
data:{
msg:""
},
watch:{
msg(newVal,oldVal){
console.debug("新"+newVal)
console.debug("旧"+oldVal)
}
}
})
</script>
<div id="myDiv">
<input type="text" v-model="msg"/>{{msg}}
</div>
