正文
vue-cli脚手架 ,过滤器,生命周期钩子函数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一.安装vue-cli脚手架1.淘宝镜像下载
用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即可
2.vue-cli的下载
安装文档:https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4
二.过滤器1.局部过滤器:在当前组件内使用
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
let App={
data(){return{data:"hello"}},
//使用语法
template:`<div>我是一个app {{ data | reverse }}</div>`,
//创建语法
filters:{
reverse:function(val){
return val.split('').reverse().join("")
}
}
} new Vue({
el:"#app",
data(){
return{}
},
template:`<div class="vue"><App></App></div>`,
components:{
App
}
})
</script>
</body>
2.全局过滤器:任何组件都能使用
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="day03/moment.js"></script>
<script>
//创建语法
Vue.filter("showTime",function(val,style,a){
return moment(val).format(style)
})
new Vue({
el:"#app",
data(){
return{time:new Date()}
},
//使用语法
template:`<div>现在的时间是:{{ time | showTime("YYYY-MM-DD",1) }}</div>`,
})
</script>
</body>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
let App={
data(){return{data:"hello"}},
//使用语法
template:`<div>我是一个app {{ data | reverse }}</div>`,
//创建语法
filters:{
reverse:function(val){
return val.split('').reverse().join("")
}
}
} new Vue({
el:"#app",
data(){
return{}
},
template:`<div class="vue"><App></App></div>`,
components:{
App
}
})
</script>
</body>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="day03/moment.js"></script>
<script>
//创建语法
Vue.filter("showTime",function(val,style,a){
return moment(val).format(style)
})
new Vue({
el:"#app",
data(){
return{time:new Date()}
},
//使用语法
template:`<div>现在的时间是:{{ time | showTime("YYYY-MM-DD",1) }}</div>`,
})
</script>
</body>
注:参数的个数没有限制
3.moment.js
JavaScript 日期处理类库
使用文档:http://momentjs.cn/
三.生命周期的钩子函数 <body>
<div id="app"></div> <script src="vue.js"></script>
<script>
let Test={
data(){
return {msg:"shy"}
},
template:`<div id="change">我叫{{ msg }}<button @click="change">更新</button></div>`,
methods:{
change(){
this.msg="dsz"
}
},
beforeCreate() {
// 组件创建之前
console.log('组件创建之前', this.msg);
},
created() {
//!!!!!!!!!!!!!!!!!!!!!!
// 组件创建之后,此时的DOM还没有渲染完成
//作用:可用来发送ajax,获取ajax数据,为DOM操作提供数据支撑
console.log('组件创建之后', this.msg);
}, beforeMount() {
// 挂载之前:
console.log(document.getElementById('app'));
},
mounted() {
//!!!!!!!!!!!!!!!!!!!!!!
//挂载之后:Test挂载在App上,App挂载在Vue上
//作用:可以在此处操作DOM,
console.log(document.getElementById('app'));
}, beforeUpdate() {
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('change').innerHTML); },
updated() {
// 在更新之后，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('change').innerHTML);
}, beforeDestroy() {
//在组件销毁之前
console.log('beforeDestroy');
},
destroyed() {
//在组件销毁之后
//作用:常用于清除定时器
console.log('destroyed',this.timer);
}, activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
};
let App={
data(){
return{is_show:true}
},
template: `<div><keep-alive><Test v-if="is_show"></Test></keep-alive><button @click="change_test">改变test组件的生死</button></div>`,
methods:{
change_test(){
this.is_show=!this.is_show
}
},
components:{
Test
}
};
new Vue({
el:"#app",
data(){
return{}
},
template: `<div><App></App></div>`,
components:{
App
} })
</script>
</body>
<body>
<div id="app"></div> <script src="vue.js"></script>
<script>
let Test={
data(){
return {msg:"shy"}
},
template:`<div id="change">我叫{{ msg }}<button @click="change">更新</button></div>`,
methods:{
change(){
this.msg="dsz"
}
},
beforeCreate() {
// 组件创建之前
console.log('组件创建之前', this.msg);
},
created() {
//!!!!!!!!!!!!!!!!!!!!!!
// 组件创建之后,此时的DOM还没有渲染完成
//作用:可用来发送ajax,获取ajax数据,为DOM操作提供数据支撑
console.log('组件创建之后', this.msg);
}, beforeMount() {
// 挂载之前:
console.log(document.getElementById('app'));
},
mounted() {
//!!!!!!!!!!!!!!!!!!!!!!
//挂载之后:Test挂载在App上,App挂载在Vue上
//作用:可以在此处操作DOM,
console.log(document.getElementById('app'));
}, beforeUpdate() {
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('change').innerHTML); },
updated() {
// 在更新之后，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('change').innerHTML);
}, beforeDestroy() {
//在组件销毁之前
console.log('beforeDestroy');
},
destroyed() {
//在组件销毁之后
//作用:常用于清除定时器
console.log('destroyed',this.timer);
}, activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
};
let App={
data(){
return{is_show:true}
},
template: `<div><keep-alive><Test v-if="is_show"></Test></keep-alive><button @click="change_test">改变test组件的生死</button></div>`,
methods:{
change_test(){
this.is_show=!this.is_show
}
},
components:{
Test
}
};
new Vue({
el:"#app",
data(){
return{}
},
template: `<div><App></App></div>`,
components:{
App
} })
</script>
</body>
注:keep-alive
Vue提供的内置组件
主要作用:让组件产生缓存
注:获取DOM的救命稻草
document.querySelector("#app")
四.Vue全家桶:vue,vue-router,vuex
vue-router是vue的核心插件
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
为什么要使用单页面应用:
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验
注:掘金,开发者资源网站
1.vue-router下载
下载地址:https://unpkg.com/vue-router/dist/vue-router.js
注:vue-router插件依赖于vue
2.vue-router下载的基本使用
<body>
<div id="app">
<p>
<!--router-link和router-link是vue-router的两个全局组件-->
<!--router-link相当于a标签 to相当于href-->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
</p>
<!--router-view是整个路由组件的出口-->
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//0.如果是模块化编程,必须要加这句话,相当于Vue.proptotype.$VueRouter=VueRouter,给Vue的原型上挂载一个属性
// Vue.use() //3.定义路由组件
const Home={
template:`<div>我是主页内容</div>`
};
const Course={
template:`<div>我是课程内容</div>`
}; //1.创建router实例
const router=new VueRouter({
//摆脱了哈希,它使用URL的哈希来模拟一个完整的URL
mode:'history',
routes:[
//2.定义路由规则
{
path:'/',
//对访问地址重定向
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:"/course",
component:Course
}
]
}); //4.创建并挂载router实例
const app=new Vue({
//key和value相同写一个
router
}).$mount("#app")
</script>
</body>
3.路由命名
(1)在routes中定义name
(2)在使用时对router-link的to属性绑定
<body>
<div id="app">
<p>
//(2)在使用时对router-link的to属性绑定
<router-link :to='{name:"Home"}'>首页</router-link>
<router-link :to="{name:'Course'}">课程</router-link>
</p>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script> const Home={
template:`<div>我是首页</div>`
}; const Course={
template:`<div>我是课程</div>`,
}; const router=new VueRouter({
routes:[
{
//(1)在routes中定义name
path:'/home',
name:'Home',
component:Home
},
{
path:'/course',
name:'Course',
component:Course
}
]
});
const app=new Vue({
router,
}).$mount("#app")
</script>
</body>
4.动态路由匹配
如果是动态路由用parmas
如果是get请求信息用query
<body>
<div id="app">
<p>
//使用时
<router-link :to='{name:"Home",params:{id:1}}'>第一页</router-link>
<router-link :to='{name:"Home",params:{id:2}}'>第二页</router-link>
</p>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script> const Home={
data(){
return{
user_id:3
}
},
template:`<div>我是首页{{ user_id }}</div>`,
watch:{
//路由信息对象(到哪里去,从哪里来)
'$route'(to,from){
console.log(111)
console.log(to);
this.user_id = to.params.id;
}
}
}; const router=new VueRouter({
routes:[
{
//定义时
path:'/home/:id',
name:'Home',
component:Home
}
]
});
const app=new Vue({
router,
}).$mount("#app")
</script>
</body>
5.编程式导航
编程式通过自己的逻辑,来实现复杂的业务 声明式是通过框架自带的标签属性来完成业务 前者需要自己写大量重复的事务控制代码，后者通过设置可以一次性给所有的业务方法添加上事务特性。
