1、路由Router
概念
- 路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。
- 简单说路由就是url地址和对应的资源的映射,通过一个路径的url地址,可以唯一找到一个资源。
- 路由不包含在vue中,是一个插件,需要单独下载。
官方地址:https://router.vuejs.org/zh/
地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
使用步骤:
- 准备组件
- 映射关系(url映射组件)
- 告诉vue要使用路由
- 渲染组件的位置
1.1、引入路由js
npm
npm install vue-router
引入js
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
1.2、示例
<script type="text/javascript">
//1、准备组件
let INDEX = Vue.component("index", {
template: "<h1>首页</h1>"
});
let PRODUCT = Vue.component("product", {
template: "<h1>chanpin</h1>"
});
let EMPLOYEE = Vue.component("employee", {
template: "<h1>员工</h1>"
});
let router = new VueRouter({
routes: [
//2、路径映射到组件
{path: "/index", component: INDEX},
{path: "/product", component: PRODUCT},
{path: "/employee", component: EMPLOYEE},
]
})
var vue = new Vue({
el: "#app",
//3、告诉vue,我要使用路由
router:router
})
</script>
<body>
<div id="app">
<router-link to="/index">首页</router-link>
<router-link to="/product">产品</router-link>
<router-link to="/employee">员工</router-link>
<!--4、组件渲染的位置-->
<router-view></router-view>
</div>
</body>
2、生命周期
生命周期不深入的学习,只了解两个方法:
created和mounted
<!--生命周期:-->
<script type="text/javascript">
var vue = new Vue({
el: "#app",
data:{
msg:"hello"
},
methods:{
show(){
console.debug("nihao")
}
},
//在created中,data和methods已经完成初始化,可以直接调用
created(){
console.debug(this.msg);
this.show();
this.msg="gggg0";
},
//整个vue初始化完毕
//加载列表,渲染数据
mounted(){
console.debug("22222"+this.msg);
}
});
3、计算属性 computed
在插值表达式中使用js表达式是非常方便的,而且也经常被用到。
但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,我们有一个日期的数据,但是是毫秒值:
data:{
birthday:1529032123201 // 毫秒值
}
我们在页面渲染,希望得到yyyy-MM-dd的样式:虽然能得到结果,但是非常麻烦。
<h1>您的生日是:{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
</h1>
Vue中提供了计算属性,来替代复杂的表达式:
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法,但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
<div id="app">
<h1>您的生日是:{{birth}} </h1>
</div>
4、match
可以让我们监控一个值的变化。从而做出相应的反应。
<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>