1小时Vue

Vue Tutorial in 2018 - Learn Vue.js by Example的笔记，深入浅出，通俗易懂。

效果如下，在线演示地址：http://www.caishuxiang.cn/demo/190619vueproj/#/

GIF.gif

安装Vue

安装vue有三种方式，本次使用Vue CLI

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本

步骤：

安装vue cli
```
> npm install -g @vue/cli
```
开始一个新的Vue项目
```
> vue create vue-proj
```
进入项目，开启服务，访问localhost:8080
```
yarn serve
```
image

Vue组件

组件是组成Vue应用的基本单元，可以看下vue-pro的工程目录

[图片上传失败...(image-729d50-1560939129883)]

这里的App.vue、Skill.vue就是组件，每个vue文件都是组件。

组件的结构

template 中放置的是html
script中是页面的逻辑
style中即样式信息

引入其他的组件

如下所示：

Vue class和style绑定

`scoped`

style元素上使用了scoped，那么该style下面的写的css或者引用的外部css，只对所在component中的元素起作用.如下：

如何引入外部css资源

注意：加了scoped代表该css只在当前componet中元素生效

class的绑定

如上，只有在showAlert为true时，才该div的class属性加上alert的值。

class绑定多个值

style绑定

为了模板中代码的简洁，你也可以如下写

Vue template

在vue的模板里，可以写html，和使用vue特定的功能。

vue在模板里的功能分为两类：

vue interpolation（vue的插入）文本插值用{{}} 元素属性插入用v-on v-bind这些指令、也可以在{{}}中写表达式
vue directives （vue的指令）都是以v-开头的，每个指令都有自己的特定任务

下面的代码中.有用到上述的两种功能

全部的vue指令如下

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

Vue 表单

v-model的双向绑定




{{ skill }}

上述代码运行后：在输入框里输入，输入框后面的文本也会显示相应内容

如何导入验证的第三方插件

/src/main.js 文件中做如下更改

import Vue from 'vue'import App from './App.vue'

import VeeValidate from 'vee-validate'; // Add this
Vue.use(VeeValidate); // Add this

// Other code removed for brevity

验证的完整代码：


    
    {{errors.first('skill')}}

Vue动画

vue2中集成了进入离开动画、状态过渡效果

下面演示了一个进入离开动画写法，需要动画的元素被包裹，然后利用value值做css选择器的前缀，书写css，如下：


    
    
    
    {{ errors.first('skill') }}

上面演示了 enter-active、leave-active两个类名，实际上vue提供了6中用于过渡中切换的类名。

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则 v- 是这些类名的默认前缀。如果你使用了，那么 v-enter 会替换为 my-transition-enter。

vue如何使用动画库

拿Animate.css举例，引入了animate.css之后，直接加 enter-active-class="animated flipInx"


{{ errors.first('skill') }}

Vue路由

vue提供了vue-router,用于在vue组件中设置页面路径

安装vue router
```
> yarn add vue-router
```

新增 /src/router.js 配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

main.js中引入路由

// other imports removed for brevity
import router from './router'
new Vue({
  router,               // Add this line
  render: h => h(App)
}).$mount('#app')

## 在App.vue中运用路由

最终的切换效果：