Vue.js基础教程

XboxYan 发布于2019-08-23 15:24 / 3450人阅读

摘要：自定义名称縮放控制器可以使用中的动画设计更为华丽的效果。在和中必须使用，不然它们会同时生效，动画也会瞬间完成。先在标签内加入，接着类似自定义动画可以给命名。

文章链接：Vue.js基础教程

开发工具准备：

根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode；

安装git base和node.js；

安装vue-cli，命令npm i -g @vue/cli；

新建vue-cli项目：

方法一：通过图形界面进行安装vue ui；

方法二：通过命令行安装vue create project-name

运行项目npm run serve，端口8080。

双向绑定v-model

双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。

现阶段大部分工作在App.vue上，template与普通写法一致，js写法：

export default {
    name: "app",
    data() {
        return {
            title: "vue.js",
            myname: "请输入名字"
        }
    }
}

去掉空白符.trim

直接在v-model后加上.trim即可。

懒加载.lazy

在离开input时才更新输入的内容，在v-model后加上.lazy即可。

限定输入数字.number

在v-model后加上.number即可。

遍历v-for

遍历有一个基本的模板：


    
        {{item}}

组件component

在App.vue中引入components中的组件：

数据传递props

其中:cardData="cardData"是这个组件的核心，用于绑定属性cardData。其他数据展示工作放在Card.vue组件中进行。

JS Result
EDIT ON

这里解析一下

包裹
主要是方便后期应用扩展，以及让应用整体更稳定。

生命周期

我不喜欢用官网的生命流程图来讲解这个内容，使用文字表达更加让思维清晰。

初始化：设置数据监听，编译模板，挂载到DOM并在数据变化时更新DOM等；

生命周期钩子：其实就是一个过程处理，类似于服务站。

生命周期钩子简介

beforeCreate：实例初始化

created：实例建立完成（可以取得$data）

beforeMount：模板挂载之前（还没有生成html）

mounted：模板挂载完成

beforeUpdate：如果data发生变化，触发组件更新，重新渲染

updated：更新完成

beforeDestroy：实例销毁之前（实例还可以使用）

destroyed：实例已销毁（所有绑定被解除、所有事件监听器被移除、所有子实例被移除）

生命周期钩子用得最多的是mounted，主要用在调用属性、方法的时候，

指令 v-once指令

第一次渲染完成后变为静态内容，其下的所有子元素都是这样的效果。

v-pre指令

v-pre指令会让指定元素被忽略。

v-cloak指令

v-cloak指令用于去除页面渲染数据时出现闪现的情况，使用方法：

v-html指令

v-html指令会把html标签渲染成DOM显示在页面上。

v-html指令只能对可信任的用户使用，否则容易受到XSS攻击。

动画

Vue动画一般在真正需要使用的情况下才加入页面，推荐在CSS中使用动画。

加入渐变的时机

v-if条件渲染

v-show条件显示

动态组件

组件的根节点

渐变的分类

v-enter定义进入渐变时开始的样式。

只存在组件插入前，组件插入后就移除。

v-enter-active定义进入渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。

在组件被插入前生效，在完成动画时移除。

v-enter-to定义进入渐变后结束的样式。

在组件被插入后生效，同时v-enter被移除，并在完成进入渐变动画时移除。

v-leave定义离开渐变时开始的样式。

在触发组件离开渐变时生效，接着马上移除。

v-leave-active定义离开渐变的过程效果，可以设定渐变过程的时间（duration）和速度曲线（easing curve）。

在触发组件离开渐变时生效，在完成动画时移除。

v-leave-to定义离开渐变后结束的样式。

在触发组件离开渐变时生效，同时v-enter被移除，并在完成离开渐变动画时移除。

transition自定义名称

.zoom-enter, .zoom-leave-to {
width: 0px;
height: 0px;
}
.zoom-enter-active, .zoom-leave-active {
transition: width 1s, height 1s;
}

animation

可以使用CSS中的animation动画设计更为华丽的效果。

.zoom-leave-active {
animation: special_effects 1.5s;
}

.zoom-enter-active {
animation: special_effects 1.5s reverse;
}

@keyframes special_effects {}

transition自定义动画类别

除了在中设定name自定义前缀（属性），还可以预设动画类别。

enter-class定义进入动画时开始的样式。

enter-active-class定义进入动画的过程效果。

enter-to-class定义进入动画后结束的样式。

leave-class定义离开动画时开始的样式。

leave-active-class定义离开动画的过程效果。

leave-to-class定义离开动画后结束的样式。

以上六个自定义属性优先级别高于一般渐变类别。

CSS动画库：Animation.css

JavaScript钩子

还可以绑定JavaScriptHooks，除了多带带使用，也能结合CSS transition和animations一起使用。

beforeEnter(el)在进入渐变或动画前生效。

enter(el,callback)在进入渐变或动画的组件插入时生效。

afterEnter(el)在进入渐变或动画结束时生效。

enterCanceled(el)在未完成渐变或动画时取消。

beforeLeave(el)在离开渐变或动画前生效。

leaveCancelled(el)在未完成渐变或动画时取消。

在enter和leave中必须使用done，不然它们会同时生效，动画也会瞬间完成。

设定初始载入时的渐变

如果想要设定一开始载入画面时组件的渐变效果，可以通过设定appear属性来实现。

appear-class载入时开始的样式。

appear-to-class载入过程的样式。

appear-active-class载入结束时样式。

先在标签内加入appear，接着类似自定义动画可以给class name命名。

初始载入JavaScript Hooks

beforeAppear载入前

appear载入时

afterAppear载入后

appearCancelled取消载入（载入开始后）

key

对相同的标签元素使用key进行区分。

渐变模式in-out和out-in in-out模式

新加入的元素做渐变进入。

渐变进入结束后，原存在的元素再渐变离开。

out-in模式

原存在的元素渐变离开。

渐变离开结束后，新元素再渐变进入。

列表过渡

会渲染出一个html标签，预设是，也可以选择自定义tag为其他标签。

无法使用（渐变模式in-out和out-in），因为不再是元素之间来回切换。

每个元素需要设定一个key值，不能重复。

列表乱数排序

能够改变数组的排序，使用前需要先安装shuffle

npm i --save lodash.shuffle

let shuffle = require("lodash.shuffle")

过滤器filter filters串联

filter可以同时串联多个filter函数。

filters参数 $emit

父组件可以使用props把数据传递给子组件。

子组件可以使用$emit触发父组件的自定义事件。

GPU云服务器云服务器 Vue.js vue.js 属性 vue.js自学 cdn vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101996.html

(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
推荐五个Vue2的免费教程

摘要：一步一步学习一直都有发布他开发的教程。在上有他免费的教程，并且宣称是世上最深入的系列。基础在上有个非常的视频教程。的官网教程非常值得你从头读到尾。使用框架这是我们最后一个教程的介绍。不过在和已经有为你准备了不错的免费课程哈一步一步学习Vue 2 （Laracasts） Jeffrey Way一直都有发布他web开发的教程。他曾经在30天内教会了我使用jquery。在Laracast...

liangzai_cool 2019-08-22 10:49 评论0 收藏0
微豆 - Vue 2.0 实现豆瓣 Web App 教程

摘要：微豆一个使用与重构豆瓣的项目。在中的配置代理重新启动，打开查看结果是否与直接请求豆瓣相同。更多请参考豆瓣电影文档。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。微豆 Vdo 一个使用 Vue.js 与 Material Design 重构豆瓣的项目。项目网站 http://vdo.ralfz.com/ GitHub https:...

cjie 2019-08-20 15:11 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
美团小程序框架mpvue入门教程

摘要：美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾，今天趁周末空闲，来写个没朋友的简单入门教程，本教程只针对新手，老鸟勿喷。美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南,一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋...

YorkChen 2019-08-22 16:14 评论0 收藏0