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的默认访问界面:

在这里插入图片描述

创建的项目目录详解

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐