一.安装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. HSSFWorkBooK用法 ---Excel表的导出和设置

    public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...

  2. ios 应用发布appStore

    1.进入管理界面开发商 [点击 iTunes Connect] 2.进入管理apps界面 [点击 Manage Your Apps] watermark/2/text/aHR0cDovL2Jsb2cu ...

  3. Logical partitioning and virtualization in a heterogeneous architecture

    A method, apparatus, and computer usable program code for logical partitioning and virtualization in ...

  4. 概率论经典问题 —— 三个事件 A、B、C 独立 ≠ 三个事件两两独立

    三个事件 A.B.C 相互独立?三个事件两两独立? A:第一次正面朝上: B:第二次正面朝上: C:第一次和第二次结果不同: P(AB)=P(A)P(B): P(AC)=1/4=P(A)P(C)(不是 ...

  5. JS简单验证password强度

    <input type="password" id="password" value=""/><button id=&qu ...

  6. WPF文字描边的解决方法(二)——支持文字竖排和字符间距调整

    原文:WPF文字描边的解决方法(二)--支持文字竖排和字符间距调整 自前天格式化文本效果出来后,今天又添加文本竖排和调整字符间距的功能.另外,由于上次仓促,没来得及做有些功能的设计时支持,这次也调整好 ...

  7. WPF 窗体中获取键盘和鼠标无操作时的超时提示

    原文:WPF 窗体中获取键盘和鼠标无操作时的超时提示 通过调用Windows API中的GetLastInputInfo来获取最后一次输入的时间 , , );            timer.Tic ...

  8. 安装在谷歌axure小工具

    下载插件 第一步 第二步 第三步 第四步 版权声明:本文博客原创文章.博客,未经同意,不得转载.

  9. WPF 调用资源图片

    原文:WPF 调用资源图片 最近做的wpf项目中,在开发的时候,把图片放到了bin下面,采用了imagePath =System.IO.Directory.GetCurrentDirectory()+ ...

  10. Adapter的泛型

    宗旨:GetView方法放在具体的Activity/Fragment里面实现,其他的均可以复用 /// <summary> /// 通用适配器:新建GetViewEvent委托+OnGet ...