前端小白如何快速上手Vue框架(下篇)
vue.js组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：注册一个全局组件语法格式如下：Vue.component(tagName, options)tagName 为组件名，options 为配置选项。注册后，我们可...
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的默认访问界面:
创建的项目目录详解
前往低代码交流专区
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)