前端小白如何快速上手Vue框架(下篇)

vue.js组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

注册一个全局组件语法格式如下：

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。
注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

全局组件:所有定义的vue实例都可以使用全局组件.

template是模板组件,用来定义自定义模板.

局部组件:可以在实例选项中注册局部组件，这样组件只能在这个实例中使用

在实例中声明了只有one实例可以调用局部组件,所以只会输出one实例中定义的内容.

prop:父组件用来传递数据的一个自定义属性

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

动态 Prop:

首先使用了v-model对输入框进行了双向数据绑定,使得vue可以响应页面数据变化.

再用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件.

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

Prop可以传递类型是多种多样的,比如:数字,布尔值,数组,对象,对象属性

1.传递数字:<child v-bind:message=”43”></child>
2.传递布尔值:<child is-published></child> 没有值默认为true
3.设置布尔值:<child v-bind:is-published=”false”></child>
4.传递数组:<child v-bind:comment-ids=”[234,266,273]”></child>
5.传递一个对象:<child v-bind:author=”{ name:xfl,age:21}”></child>

如果生产需求中需要子组件把数据传递回父组件,就得使用自定义事件:

使用 $on(eventName) 监听事件,使用 $emit(eventName) 触发事件.

子组件使用了emit来进行通知父组件，这样就形成父子组件间的相互呼应传递信息，其实在开发的过程中父子组件通讯也都是使用这样的方法，父组件传递信息给子组件的时候会通过props参数，通常不会直接在子组件中修改父组件传递下来的信息，而且通过这样的一个钩子去通知父组件对某些参数进行改变.

vue指令

vue常用的内置指令

v-if:根据其后表达式的 bool 值进行判断是否渲染该元素.
v-show:其后表达式的 bool 值为 false 时，对渲染的出标签添加display：none;的样式
v-else:紧跟着v-if或者v-show一起使用
v-for:v-for的用法 person in people ,前者是后者的元素，类似于数组的用法
v-bind:(:):用于响应地更新 html 特性
v-on:(@):用于监听指定元素的 DOM 事件

vue.js自定义指令

自定义指令存在的意义就是让开发人员根据实际情况自己定义指令.Vue 也允许注册自定义指令。

全局指令

我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时元素获得焦点.

Vue.directive表示自定义指令.对内置指令做一些补充和扩展.

定义方法:vue.directive(id,definition)两个参数:指令ID和定义对象，定义对象提供了一些钩子函数。

局部指令

在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用

钩子函数:指令定义对象的函数.

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
钩子函数就是生命周期事件的别名而已；
bind: 只调用一次，指令第一次绑定到元素时调用
inserted: 被绑定元素插入父节点时调用。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值.
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。
expression: 绑定值的表达式或变量名。
arg: 传给指令的参数。
modifiers: 一个包含修饰符的对象。
vnode: Vue编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

钩子函数实例

如下实例就是调用了钩子函数bind,对el,binding,vnode参数相关内容进行了输出.

不需要其他的钩子函数时可以简写函数:

Vue.js 路由:允许我们通过不同的URL访问不同的内容.

安装引入vue路由:

1、直接下载 / CDN,在<script>中调用即可.和引入vue的时候一样
https://unpkg.com/vue-router/dist/vue-router.js
2.NPM推荐使用淘宝镜像：cnpm是一个完整的npm镜像,用法完全一致.
cnpm install vue-router

实例:vue.js+vue.router实现单页应用

router-link 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容,to 属性为目标地址,即要显示的内容。

HTML:router-view指的是路由的出口!

js代码:

const用来声明变量.vue对象中绑定块元素的两种方式:

1.通过 vue 对象中声明 el 属性绑定操作块元素选择器

2.通过在vue对象后面.$mount(‘选择器’)绑定操作块元素

运行结果:点击不同的链接可以切换不同的HTML内容

NPM 路由实例:

在 Github 上下载实例：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，并进入该目录，执行以下命令：
# 安装依赖，使用淘宝资源命令 cnpm   
cnpm install
# 启动应用，地址为 localhost:8080      
cnpm run dev

访问 ​​http://localhost:8080​​ 测试效果:

Vue过渡:

由于这部分内容用图片无法直观的演示动画效果.可以在下方我给出的链接去看更多的参数讲解.
​​​css3动画属性详解之transform、transition、animation​​

过渡就是一个淡入淡出的过程,vue在元素显示与隐藏的过渡中提供了6个class来切换.

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效

Vue过渡实例–transition指的是过渡

如果你使用一个没有名字的 transition，则 v- 是这些类名的默认前缀。如果你使用了transition name=“my-transition”，那么 v-enter 会替换为 my-transition-enter。opacity属性设置元素的不透明级别.

如下实例定义了transition名字,设置了不同的过渡状态的动画效果.使用v-on监听了按钮的触发,v-bind指令做了样式绑定.

CSS 过渡:最常用的过渡方式.

transfrom表示变换如移动,旋转等.cubic-bezier指的是贝塞尔曲线.

CSS 动画:

animationend主要是实现动画属性的.为元素设置一些动画效果.

scale()表示比例.@keyframs用来定义一个动画.并设置动画效果.

自定义过渡的类名

我们可以通过以下特性来自定义过渡类名：

enter-class enter-active-class

enter-to-class (2.1.8+) leave-class

leave-active-class leave-to-class (2.1.8+)

自定义过渡的类名优先级高于普通的类名，对于结合第三方CSS动画库很有用.

也可以显性的定义过渡过程中的持续时间.

例如:在<transition>组件上有属性duration可以定制过渡时间.
<transition :duration="1000">...</transition>
同样可以定制进入和移出的持续时间.
<transition :duration="{ enter:500, leave:800}">...</transition>

Vue.js 混入

混入 (mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混入定义了一部分可复用的方法或者计算属性。通俗的理解就是:混入就是定义一个对象包含公共的方法或者数据,计算属性等,然后混入到多个组件使用,方便管理与统一修改.

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

Document.write()就是打印输出的意思. br是换行标签也可以使用\n.

如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高

全局混入

也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

全局混入的不安全性演示:

全局混合被注册到了每个单一组件上。因此，它们的使用场景极其有限并且要非常的小心。
Vue.mixin({
    mounted() {
         console.log("我是mixin");
    }
})
new Vue({
    ...
})
那个 console.log将会出现在每个组件上。在控制台上会有多余的输出.

Vue.js Ajax(vue-resource)

我们现在做单页应用程序属于前后端分离开发，那么这个单页应用程序中的数据就得通过ajax的方式获取，也要通过ajax的方式提交到后端。vue.js本身没有封装ajax操作库，所以我们要通过Vue-resource和Axios来进行ajax操作.
Console.log()主要是为了调试js用的,你可以看到你在页面中输出的内容.
window.onload是一个事件,在文档加载完成之后立即触发,并且能够为时间注册事件处理函数.将要对对象或者模块进行操作的代码存放在处理函数中。

get请求:

如果需要传递数据，可以使用 this.$http.get('get.php',{params : jsonData}) 格式，第二个参数 jsonData 
就是传到后端的数据。
this.$http.get('get.php',{params : {a:1,b:2}}).then(function(res){
   document.write(res.body);    
},function(res){
   console.log(res.status);
});

post 请求

post 发送数据到后端，需要第三个参数 {emulateJSON:true}。

emulateJSON 的作用：如果Web服务器无法处理编码为application/json的请求，你可以启用 emulateJSON 选项

demo_test_post.php 代码如下：
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>

Vue.js 响应接口

Vue 可以添加数据动态响应接口。例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在
Vue 实例之外才能实现正确的响应。setTimeout函数内设置了 10 秒后计算器的值加上 20 。

Vue.set

Vue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：
Vue.set( target, key, value )
参数说明：target: 可以是对象或数组  
key : 可以是字符串或数字    
value: 可以是任何类型

控制台输出

如上控制台输出可以看到的，在产品中添加了数量属性 qty，但是 get/set 方法只可用于 id，name 和 price 属性，却不能在 qty 属性中使用。我们不能通过添加 Vue 对象来实现响应。 Vue 主要在开始时创建所有属性。

如果我们要实现这个功能，可以通过 Vue.set 来实现：

从控制台输出的结果可以看出 get/set 方法可用于qty 属性

vue.delete—用于删除动态添加的属性 语法格式：

Vue.delete( target, key )

参数说明：target: 可以是对象或数组

key : 可以是字符串或数字

以上实例中我们使用 Vue.delete 来删除 price 属性。以下是控制台输出结果：

Vue.js构建工具vue-cli

1.安装:我的电脑均已安装不演示安装过程.

安装nodejs: sudo apt-get install nodejs

查看nodejs版本: node -v

安装npm: sudo apt-get install npm

安装vue-cli: sudo npm install -g vue-cli -g表示全局安装

查看vue版本,V是大写: vue -V

2.构建一个项目:

首先使用vue  init命令来初始化项目:vue init <template-name> <project-name>
init : 通过vue-cli 来初始化构建一个vue项目 template-name : 模板名称

vue-cli 官方模板:

webpack:一个全面的webpack+vue-loader的模板，功能包括热加载（更新），linting（语法检测），测试和Css扩展。
webpack-simple:一个简单webpack+vue-loader的模板，不包含其他功能，让你快速构建vue开发环境。
browserify:一个全面的Browerify+vueify的模板，功能包括热加载，linting，单元测试。
browserify-simple:一个简单的Browerify+vueify的模板，不包含其他功能，让你快速的构建vue的开发环境。
simple:一个最简单的单页应用模板。

project-name : 标识项目名称

在实际开发中，普遍是使用webpack这个模板，我们来实际创建一个项目吧。
$ vue init webpack vuecliTest
执行命令后，会询问我们几个简单的选项，根据自己的需要进行确认就好。
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，
如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

然后根据提示操作即可:

根据提示输入url就可以看到Vue的默认访问界面:

创建的项目目录详解