文章链接：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。<!–more–>双向绑定v-model双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。现阶段大部分工作在App.vue上，template与普通写法一致，js写法：export default { name: ‘app’, data() { return { title: ‘vue.js’, myname: ‘请输入名字’ } }}去掉空白符.trim直接在v-model后加上.trim即可。<input type=“text” v-model.trim=“name” value=“name”>懒加载.lazy在离开input时才更新输入的内容，在v-model后加上.lazy即可。限定输入数字.number在v-model后加上.number即可。遍历v-for遍历有一个基本的模板：<div id=“app”> <ul v-for="(item,index) in member" :key=“index”> <li>{{item}}</li> </ul></div>组件component在App.vue中引入components中的组件：<template> <div id=“app”> <Card /> </div></template><script> import Card from ‘./components/Card’ export default { components: { Card } }</script>数据传递props<template> <div id=“app”> <Card :cardData=“cardData”/> </div></template>其中:cardData=“cardData"是这个组件的核心，用于绑定属性cardData。其他数据展示工作放在Card.vue组件中进行。JS ResultEDIT ON <template> <div class=“card_wall”> <div class=“card” v-for=“item in cardData” :key=“item.name”> <div class=“card_title”>{{item.name}}</div> <div class=“card_body”> <p>生日：{{item.birthday}}</p> <p>E-mail：{{item.mail}}</p> </div> </div> </div></template><script> export default { props: { cardData: { type: Array, required: true } } }</script>这里解析一下<div class=“card_wall”></div>包裹<div class=“card”></div>主要是方便后期应用扩展，以及让应用整体更稳定。生命周期我不喜欢用官网的生命流程图来讲解这个内容，使用文字表达更加让思维清晰。初始化：设置数据监听，编译模板，挂载到DOM并在数据变化时更新DOM等；生命周期钩子：其实就是一个过程处理，类似于服务站。生命周期钩子简介beforeCreate：实例初始化created：实例建立完成（可以取得$data）beforeMount：模板挂载之前（还没有生成html）mounted：模板挂载完成beforeUpdate：如果data发生变化，触发组件更新，重新渲染updated：更新完成beforeDestroy：实例销毁之前（实例还可以使用）destroyed：实例已销毁（所有绑定被解除、所有事件监听器被移除、所有子实例被移除）生命周期钩子用得最多的是mounted，主要用在调用属性、方法的时候，指令v-once指令第一次渲染完成后变为静态内容，其下的所有子元素都是这样的效果。v-pre指令v-pre指令会让指定元素被忽略。v-cloak指令v-cloak指令用于去除页面渲染数据时出现闪现的情况，使用方法：<template> <div id=“app”> <div v-cloak>${ item.title }</div> </div></template><style> [v-cloak] { display: none; }</style>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自定义名称<template> <div id=“app”> <div class=“main”> <button @click=“change = !change”>縮放控制器</button> <transition name=“zoom”> <div v-if=“change” class=“ant_man_style”></div> </transition> </div> </div></template>.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自定义动画类别除了在<transition>中设定name自定义前缀（属性），还可以预设动画类别。enter-class定义进入动画时开始的样式。enter-active-class定义进入动画的过程效果。enter-to-class定义进入动画后结束的样式。leave-class定义离开动画时开始的样式。leave-active-class定义离开动画的过程效果。leave-to-class定义离开动画后结束的样式。以上六个自定义属性优先级别高于一般渐变类别。CSS动画库：Animation.cssJavaScript钩子<transition>还可以绑定JavaScriptHooks，除了单独使用，也能结合CSS transition和animations一起使用。beforeEnter(el)在进入渐变或动画前生效。enter(el,callback)在进入渐变或动画的组件插入时生效。afterEnter(el)在进入渐变或动画结束时生效。enterCanceled(el)在未完成渐变或动画时取消。beforeLeave(el)在离开渐变或动画前生效。leaveCancelled(el)在未完成渐变或动画时取消。<transition @before-enter=“beforeEnter” @enter=“enter” @after-enter=“afterEnter” @enter-cancelled=“enterCancelled” @before-leave=“beforeLeave” @leave=“leave” @after-leave=“afterLeave” @leave-cancelled=“leaveCancelled”> <div v-if=“change” class=“ant_man_style”></div></transition>在enter和leave中必须使用done，不然它们会同时生效，动画也会瞬间完成。设定初始载入时的渐变如果想要设定一开始载入画面时组件的渐变效果，可以通过设定appear属性来实现。appear-class载入时开始的样式。appear-to-class载入过程的样式。appear-active-class载入结束时样式。<transition appear appear-class=“show-appear-class” appear-to-class=“show-appear-to-class” appear-active-class=“show-appear-active-class”></transition>先在<transition>标签内加入appear，接着类似自定义动画可以给class name命名。初始载入JavaScript HooksbeforeAppear载入前appear载入时afterAppear载入后appearCancelled取消载入（载入开始后）<div id=“app”> <transition appear @before-appear=“beforeAppear” @appear=“appear” @after-appear=“afterAppear” @appear-cancelled=“appearCancelled”> <div v-if=“change” class=“ant_man_style”></div> </transition></div>key对相同的标签元素使用key进行区分。渐变模式in-out和out-inin-out模式新加入的元素做渐变进入。渐变进入结束后，原存在的元素再渐变离开。out-in模式原存在的元素渐变离开。渐变离开结束后，新元素再渐变进入。<transition mode=“out-in”></transition><transition mode=“in-out”></transition>列表过渡<transition-group>会渲染出一个html标签，预设是<span>，也可以选择自定义tag为其他标签。无法使用（渐变模式in-out和out-in），因为不再是元素之间来回切换。每个元素需要设定一个key值，不能重复。列表乱数排序<transition-group>能够改变数组的排序，使用前需要先安装shufflenpm i –save lodash.shufflelet shuffle = require(’lodash.shuffle’)过滤器filterfilters串联filter可以同时串联多个filter函数。filters参数$emit父组件可以使用props把数据传递给子组件。子组件可以使用$emit触发父组件的自定义事件。