一.安装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>

注:参数的个数没有限制

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>

注: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.编程式导航

编程式通过自己的逻辑,来实现复杂的业务 ​ 声明式是通过框架自带的标签属性来完成业务 前者需要自己写大量重复的事务控制代码,后者通过设置可以一次性给所有的业务方法添加上事务特性。

vue-cli脚手架 ,过滤器,生命周期钩子函数的更多相关文章

  1. vue环境配置脚手架搭建,生命周期,钩子

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  2. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  3. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  4. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  5. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  6. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  7. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  8. 什么是vue生命周期和生命周期钩子函数?

    原文地址 vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩 ...

  9. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

随机推荐

  1. 【record】10.2..10.9

    .

  2. switch语句中default用法详解

    当年学C语言switch开关语句的时候,很多人会告诉你它是这么用的: switch(表达式){ case常量表达式1: 语句1;break; case常量表达式2: 语句2;break; - case ...

  3. Network management system scheduling for low power and lossy networks

    In one embodiment, a network management system (NMS) determines an intent to initialize a request-re ...

  4. dotnet core 使用 sqlite 部署到 Centos 服务器

    原文:dotnet core 使用 sqlite 部署到 Centos 服务器 本文告诉大家如何创建一个 asp dotnet core 程序,这个程序使用 sqlite 保存,部署程序到 Cento ...

  5. 矩阵微分(matrix derivatives)

    关于矩阵求导,得到的导数则是矩阵形式:关于矢量求导,得到的导数则是矢量形式:关于标量求导,得到的仍是标量形式.也即关于谁求导,得到的导数形式便和谁的维度信息一致. fx = f(x) grad = n ...

  6. Latex 琐碎

    χ(\chi),Ξ(\Xi),ξ(\xi) 0. 加颜色 x2+y2=z2({\color{Red} {x^2+y^2=z^2}}) Magenta, Cyan, Emerald(宝石绿) 1. 斜杠 ...

  7. 解析Android的 消息传递机制Handler

    1. 什么是Handler: Handler 网络释义"机械手.经理"意思,在Android它用于管理多个线程UI操作: 2. 为什么会出现Handler: 在Android里面的 ...

  8. ZOJ 2319 Beatuiful People(单调递增序列的变形)

    Beautiful People Time Limit: 5 Seconds      Memory Limit: 32768 KB      Special Judge The most prest ...

  9. 讨论IM软件“网上假货’

    概要 网上假货.在不能使用网络的情况下,IM软件还显示在线. 网上是假的"在线--当前离线"之间的状态,在这段时期.用户无法发送消息.用户可以创建假冒网上心跳的错觉(点击了解).缓 ...

  10. ASP.NET Core 配置身份验证

    以AspUser的Password为例,去掉最少1个大写字母,1个小写字母等等坑爹的要求在Startup的ConfigureServices中进行配置 services.Configure<Id ...