vue的安装使用

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文件

3.Vue中基础知识

1、双花括号

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

语法：

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

2、指令-循环指令

基本语法1：

<any

v-for

“tmp in array”

基本语法2：

<any

v-for

“(value,index) in array”

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

3、指令-选择指令

语法：

<any

v-if

“表达式”

<any

v-else-if

“表达式”

<any

v-else

“表达式”

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

4、指令-事件绑定

语法：

<any

v-on:eventName

“handleEvent”

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

5、指令-属性绑定

基本语法：

<any

v-bind:myProp

“表达式”

补充，支持简写：

<any
:
myProp

“表达式”

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

<img

v-bind:src

“‘img/’+myImg”

alt

“”

动态样式绑定：

<p
:
style

"
{backgroundColor:myBGColor}
"

动态样式绑定

动态样式类绑定：

<h1
:
class

“{myRed:false}”

动态样式类的绑定

6、指令-双向数据绑定

方向1：数据绑定到视图

方向2：将视图中（表单元素）用户操作的结果绑定到数据

基本语法：

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

4.组件化

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

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

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

1、组件的创建

全局组件：

Vue
.component(
‘my-com’
,{

template
:
<h2>it is a header</h2>
})
局部组件：

new

Vue
({
components:{

‘my-footer’
:{

template
:
‘’
}
}
})
2、组件使用

作为普通的标签去使用

3、注意事项

组件的id和使用方式 遵循烤串式命名方式：a-b-c
如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用
5.自定义指令

创建：

Vue
.directive(
‘change’
,{
bind:
function
(el,bindings){

//首次调用
},
update:
function
(el,bindings){

//只要是有数据变化，都会调用
},
unbind:
function
(){

//解绑
}
})
使用：

<any

v-change

“count”

6.过滤器

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

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

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

1、过滤器的创建和使用

1.创建

Vue
.filter(

‘myFilter’
,

function
(myInput){

//myInput是在调用过滤器时，管道前表达式执行的结果

//针对myInput，按照业务需求做处理

//返回

return

‘处理后的结果’
})
2.使用

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

1.发送

{{expression | myFilter(参数1，参数2)}} 2.接受

Vue
.filter(
‘myFilter’
,
function
(myInput，参数
1
，参数
2
){

return

‘处理后的结果’
})
7.复合组件

知识回顾：

Vue
.component(
‘my-header’
,{

template
:
<div></div>
});
<
my
-header></
my
-header>
复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件。

注意事项：

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

效果是出不来的。

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

8.生命周期

四个阶段：

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

1、watch

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

v-model=

“myValue”
2.监听

    watch:{
    myValue:

function
(newValue,oldValue){
}
}
2、computed

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

1.指定计算属性

        computed:{
          myHandle:

function
(){

return
数据
}
}
2.调用

{{myHandle}} 10.组件间通信

1、父与子通信 （props down）

1.发送

<son

myName

‘zhangsan’

2.接受到son组件：

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

template
:
<p>{{myName}}</p>
})

2、子与父通信 (events up)

1.绑定

    methods:{
     handleEvent:

function
(msg){}
}
<son
@customEvent

“handleEvent”

2.触发

子组件内部：

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

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

1.指定ref属性

<son

ref

“mySon”

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

this
.$refs.mySon4、$parent

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

5、兄弟组件通信

var
bus =
new

Vue
();
2.接收方

bus.$on(

‘eventName’
,
function
(msg){})
3.发送方

bus.$emit(

‘eventName’
,
123
);
11.补充组件创建的方式

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

1.全局组件

Vue
.component
2.局部组件

    {
      components:{

‘my-footer’
：{
template
:
``
}
}
}
2、.vue结尾的文件

3、单独指定一个模板内容

    Vue.component('',{
      template:'#myContent'
    })

12.路由模块

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

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

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

工作原理：

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

专业术语：

router路由器
route路由
routes 路由数组（路由词典）
1.引入 vue.js vue-router.js

2.指定一个容器

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

“路由地址”

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组件指定一个容器

2.配置路由词典

  {
    path:

‘/a’
,
component:A,
children:[
{path:
‘/b’
,component:B}
]
}
需求：现在有两个组件，分别是login/mail,建立SPA。

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

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

  /mail /mail/draft

13.搭建基于CLI开发环境的方式

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

2.将tpls.zip拷贝到project中

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

4.进入到tpls

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

6.执行npm install

7.执行npm start