一、框架和库的区别

框架(framework):有着自己的语法特点、都有对应的各个模块。

库(library):专注于一点。

框架的好处:

  1. 提到代码的质量,开发速度
  2. 提高代码的复用率
  3. 降低模块之间的耦合度(高内聚低耦合)

UI:user interface

GUI:graphical user interface

CLI:command line interface

API:application interface

思维模式的转换:从操作 DOM 的思维模式切换到以数据为主。

二、Vue 概述

1、what

是一个渐进式的构建用户界面的 js 框架

2、where

小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序

3、why
  • 方便阅读的中文文档
  • 容易上手 (学习曲线比较缓和)
  • 体积小
  • 基于组件化的开发方式
  • 代码的可读性、可维护性得到了提高
4、how

工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能

搭建环境

方式 1

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖,走你

$ cd my-project
$ npm install
$ npm run dev

方式 2

直接引入对应的 js 文件

三、Vue 中基础知识

1、双花括号

mustache(胡子)/interpolation(插值表达式)

语法:

<any>{{表达式}}</any>

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

2、指令-循环指令

基本语法1:

 <any v-for="tmp in array"></any>

基本语法 2:

<any v-for="(value,index) in array"></any>

作用:在遍历 array 这个集合时,将临时变量保存在 tmp 中,创建多个 any 标签。

3、指令-选择指令

语法:

<any v-if="表达式"></any>

<any v-else-if="表达式"></any>
    
<any v-else="表达式"></any>

作用:根据表达式执行结果的真假,来决定是否要将当前的这个元素,挂载到 DOM 树。

4、指令-事件绑定

语法:

<any v-on:eventName="handleEvent"></any>

作用:给指定的元素将 handleEvent 的方法绑定给指定 eventName 事件。

5、指令-属性绑定

基本语法:

<any v-bind:myProp="表达式"></any>

补充,支持简写:

<any :myProp="表达式"></any>

作用:将表达式执行的结果绑定到当前元素的 myProp 属性。

<img v-bind:src="'img/'+myImg" alt="">

动态样式绑定:


<p :style="{backgroundColor:myBGColor}">
动态样式绑定
</p>

动态样式类绑定:

<h1 :class="{myRed:false}">
动态样式类的绑定
</h1>
6、指令-双向数据绑定

方向1:数据绑定到视图

方向2:将视图中(表单元素)用户操作的结果绑定到数据

基本语法:

<表单元素 v-model="变量"></表单元素>

四、组件化

组件:组件就是可被反复使用的,带有特定功能的视图。

所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序。

1、组件的创建

全局组件:


Vue.component('my-com',{
	template:`<h2>it is a header</h2>`
})

局部组件:


new Vue({
	components:
	{              
		'my-footer':{template:''}

    }
})
2、组件使用

作为普通的标签去使用

<my-com></my-com>
3、注意事项
  • 组件的 id 和使用方式 遵循烤串式命名方式:a-b-c
  • 如果一个组件 要渲染多个元素,将多个元素放在一个顶层标签中,比如div、form
  • 全局组件可以用在 id 为 example 的范围内的任何一个组件内部,直接调用可以;但是局部组件只能在父模板中直接调用

五、自定义指令

创建:

Vue.directive('change',{
bind:function(el,bindings){       
//首次调用
},
update:function(el,bindings){    
//只要是有数据变化,都会调用
},
unbind:function(){     //解绑
}
})

使用:

<any v-change="count"></any>

六、过滤器

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据。

过滤器的本质 就是一个带有参数带有返回值的方法。

Vue1.* 支持内置的过滤器,但是 Vue2.* 就不再内置过滤器,但是支持自定义过滤器。

1、过滤器的创建和使用

1. 创建

Vue.filter('myFilter',function(myInput){
           
//myInput是在调用过滤器时,管道前表达式执行的结果
           
//针对myInput,按照业务需求做处理
           
//返回
           
return
 
'处理后的结果'
})

2. 使用

<any>
{{expression | myFilter}}
</any>
2、如何在调用过滤器时,完成参数的发送和接受

1. 发送

<any>
{{expression | myFilter(参数1,参数2)}}
</any>

2. 接受

Vue.filter('myFilter',function(myInput,参数1,参数2){
        
return
'处理后的结果'

})

七、复合组件

知识回顾:

Vue.component('my-header',{
	template:`<div></div>`
});

<my-header></my-header>

复合组件:并不是新的概念,就是一个组件,只不过这个组件中 可以调用其他的组件。

注意事项:

1. 组件要渲染的内容 取决于在定义组件时 template

<my-list>
        
<my-item></my-item>
      
</my-list>

效果是出不来的。

2. 允许在一个组件中,直接来调用另外一个组件。

八、生命周期

四个阶段:

  • create 准备工作 (数据的初始化。。。)
  • mount 挂载前后针对元素进行操作
  • update 数据发生变化,
  • destroy 清理工作 (关闭定时器、集合清空..)
  • beforeCreate/created
  • beforeMount/mounted
  • beforeUpdate/updated
  • beforeDestroy/destroyed
九、常用属性
1、watch

1. 表单元素的双向数据绑定

v-model="myValue"

2. 监听

watch:{
	myValue:function(newValue,oldValue){}
 }
2、computed

计算属于是用于在模板中,搞定复杂的业务逻辑,因为有依赖缓存。

1. 指定计算属性

computed:{
	myHandle:function(){
	return
	 数据
	}
}

2.调用

<any>
{{myHandle}}
</any>

十、组件间通信

1、父与子通信 (props down)

1.发送

<son myName='zhangsan'></son>

2.接受到 son 组件

Vue.component('son',{
props:[
	'myName'
],

template:`<p>{{myName}}</p>`
}) 
2、子与父通信 (events up)

1. 绑定

methods:{
	handleEvent:function(msg){}
}

<son @customEvent="handleEvent"></son>

2. 触发

子组件内部:

this.$emit(‘customEvent’,100);
3、ref(reference 引用/参考 外号)

帮助在父组件中 得到子组件中的数据、方法。

1. 指定 ref 属性

<son ref="mySon"></son>

2. 根据 ref 得到子组件实例

this.$refs.mySon
4、$parent

this.$parent 得到父组件的实例

5、兄弟组件通信

1.

var bus = new Vue();

2. 接收方

bus.$on('eventName',function(msg){})

3. 发送方

bus.$emit('eventName',123);

十一、补充组件创建的方式

1、直接在 template 属性中指定模板内容

1. 全局组件

Vue.component

2. 局部组件

{
	components:{
		'my-footer':{
			template:``
			}
    }
}
2、.vue 结尾的文件
<template></template>

<script></script>
        
<style></style>
3、单独指定一个模板内容
<script id='myContent'  type='text/x-template'>
        
</script>

Vue.component('',{

  template:'#myContent'

})

十二、路由模块

路由模块的本质就是建立起 url 和页面之间的映射关系。

1、SPA 的基本概念和工作原理

SPA:single page application 单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容,比如 Gmail、移动的 webApp。

工作原理:

  • 解析地址栏:完整的页面地址、路由地址
  • 根据路由地址从路由词典中找到真正的要加载的页面
  • 发起 ajax 请求:请求要加载的页面
  • 像指定的容器中插入加载来的页面
2、路由模块的基本使用

专业术语:

  • router 路由器
  • route 路由
  • routes 路由数组(路由词典)

1.引入 vue.js vue-router.js

2. 指定一个容器

<router-view></router-view>

3. 创建业务所需要用到的组件类

var MyLogin = Vue.component()

4. 配置路由词典

const myRoutes = [
{
	path:'',
	component:MyLogin
},
{
	path:'/login',
	component:MyLogin
}
];

const myRouter = new VueRouter({
  routes:myRoutes
})

new Vue({
   router:myRouter
})

5. 测试

修改地址栏中的路由地址,测试看加载的组件是否正确

注意事项:

1. 先引入 vue,再引入插件

2. 一定要指定 router-view

3. route 路由 {path:'',component:}

routes:路由数组 []

router:路由器,按照指定的路由规则去访问对应的组件 new VueRouter

3、使用路由模块来实现页面跳转的方式

方式 1:

直接修改地址栏

方式 2:

this.$router.push(‘路由地址’);

方式 3:

<router-link to="路由地址"></router-link>
4、完成参数的传递

在页面之间跳转的时候,在有些场景下,需要同时指定参数

1. 明确发送方和接收方

list --20--> detail

2. 配置接收方的路由地址

/detail --》 /detail/:index

this.$route.params.index

3. 发送

routerLink to="/detail/20"

this.$router.push('/detail/20')
5、路由嵌套

在一个路由中,path 对应一个 component,如果这个 component 需要根据

不同的 url 再加载其他的 component,称之为路由的嵌套。

举例:比如 A 组件现在需要根据不同的 url,加载 B 组件或者 C 组件

1. 给 A 组件指定一个容器

<router-view></router-view>

2. 配置路由词典

{
   path:'/a',
   component:A,
   children:[
        {
          path:'/b',
          component:B
		}
    ]
}

需求:现在有两个组件,分别是 login/mail,建立 SPA。

在此基础上,希望 mail 组件嵌套 inbox/outbox/draft

补充:在设置子路由,路由匹配规则依然是适用的,只不过路由地址为空和异常,要携带父组件的路由地址

/mail /mail/draft

十三、搭建基于CLI开发环境的方式

1. 指定一个文件夹:C:\xampp\htdocs\framework\vue\project

2. 将 tpls.zip 拷贝到 project 中

3. 右键单击压缩包,解压缩到当前文件夹

4. 进入到 tpls

5. 同时按下 shift 和鼠标右键,选择在此位置打开命令行串口

6. 执行 npm install

7. 执行 npm start

站在巨人的肩膀上,我们可以看得更远,约翰 · 雷西格发布了 jQuery 的第一个版本,从此让我们进入了 jQuery 时代;尤雨溪创造了 Vue,使我们正式迈入 Vue 的时代。

原文地址:戳这儿

发表评论

电子邮件地址不会被公开。 必填项已用*标注