1小時(shí)輕松入門Vue

1小時(shí)Vue

Vue Tutorial in 2018 - Learn Vue.js by Example的筆記，深入淺出，通俗易懂。

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

GIF.gif

安裝Vue

? 安裝vue有三種方式，本次使用Vue CLI

Vue 提供了一個(gè)官方的 CLI，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時(shí)間就可以運(yùn)行起來并帶有熱重載、保存時(shí) lint 校驗(yàn)，以及生產(chǎn)環(huán)境可用的構(gòu)建版本

? 步驟：

  • 安裝vue cli

    > npm install -g @vue/cli

  • 開始一個(gè)新的Vue項(xiàng)目

    > vue create vue-proj

  • 進(jìn)入項(xiàng)目，開啟服務(wù)，訪問localhost:8080

    yarn serve
    image

Vue組件

? 組件是組成Vue應(yīng)用的基本單元，可以看下vue-pro的工程目錄

[圖片上傳失敗...(image-729d50-1560939129883)]

? 這里的App.vue、Skill.vue就是組件，每個(gè)vue文件都是組件。

組件的結(jié)構(gòu)

  • template 中放置的是html
  • script中是頁面的邏輯
  • style中即樣式信息
<template>
  ...
</template>

<script>
  ...
</script>

<style>
 ...
</style>

引入其他的組件

? 如下所示：

<template>
  <!-- Other HTML removed for brevity -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- Other HTML removed for brevity -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

Vue class和style綁定

scoped

? style元素上使用了scoped，那么該style下面的寫的css或者引用的外部css，只對(duì)所在component中的元素起作用.如下：

<style scoped>
body {
background-color: #eeeeee;
}
</style>

如何引入外部css資源

注意：加了scoped代表該css只在當(dāng)前componet中元素生效

<style src="./Skills.css" scoped></style>

class的綁定

<template>
  <div class="skills">
    <div class="holder">
    
      <!-- Add this -->
      <div v-bind:class="{ alert: showAlert}"></div>

    </div>
  </div>
</template>
<script>
export default {
  name: 'Skills',
    data() {
        return {
          showAlert: true  // Add this
        }
    },
  }
}
</script>

如上，只有在showAlert為true時(shí)，才該div的class屬性加上alert的值。

class綁定多個(gè)值

<div v-bind:class="{ alert: showAlert, 'another-class': showClass }"></div>

style綁定

<div v-bind:style="{ backgroundColor: bgColor, width: bgWidth, height: bgHeight }"></div>
<script>
export default {
  name: 'Skills',
    data() {
        return {
          bgColor: 'yellow',
          bgWidth: '100%',
          bgHeight: '30px'
        }
    },
  }
}
</script>

為了模板中代碼的簡(jiǎn)潔，你也可以如下寫

<div v-bind:style="alertObject"></div>
<script>
export default {
  name: 'Skills',
    data() {
        return {
          alertObject:{
              backgroundColor: 'yellow',
              width: '100%',
              height: '30px'
          }
        }
    },
  }
}
</script>

Vue template

在vue的模板<template></template>里，可以寫html，和使用vue特定的功能。

vue在模板里的功能分為兩類：

  • vue interpolation（vue的插入） 文本插值用{{}} 元素屬性插入用v-on v-bind這些指令、也可以在{{}}中寫表達(dá)式
  • vue directives （vue的指令） 都是以v-開頭的，每個(gè)指令都有自己的特定任務(wù)

下面的代碼中.有用到上述的兩種功能

<template>
    <div class="skills">
       文本插入: {{name}}
        <h1 v-once>{{name}}</h1>
       插入表達(dá)式：  {{ btnState ? 'The button is disabled' : 'The button is active'}}
        元素屬性插入： <button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>
        
        v-for指令
        <ul>
            <li v-for="(data,index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
        </ul>
        <p v-if="skills.length >= 1">you have >=1</p>
        <p v-else>you have 小于1</p>
     </div>
</template>

全部的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的雙向綁定

<!-- Add these two lines: -->
<input type="text" placeholder="Enter a skill you have.." v-model="skill">

{{ skill }}

上述代碼運(yùn)行后：在輸入框里輸入，輸入框后面的文本也會(huì)顯示相應(yīng)內(nèi)容

如何導(dǎo)入驗(yàn)證的第三方插件

/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

驗(yàn)證的完整代碼：

<form @submit.prevent="addSkill">
    <input type="text" placeholder="輸入一個(gè)技能" v-model="skill" v-validate="'min:5'" name="skill">
    <p class="alert" v-if="errors.has('skill')">{{errors.first('skill')}}</p>
</form>
<script>
    export default {
        name: 'Skills',
        data: function() {
            return {
                skill: '',
                skills: [{
                        "skill": "vue.js"
                    },
                    {
                        "skill": "php"
                    }
                ]
            }
        },
        methods: {
            addSkill() {
                this.$validator.validateAll().then((result) => {
                    if(result) {
                        this.skills.push({
                            skill: this.skill
                        });
                        this.skill = "";
                    } else {
                        console.log("Not valid");
                    }
                })
            }
        }
    }
</script>

Vue動(dòng)畫

vue2中集成了進(jìn)入離開動(dòng)畫、狀態(tài)過渡效果

下面演示了一個(gè)進(jìn)入離開動(dòng)畫寫法，需要?jiǎng)赢嫷脑乇?lt;transition name='value'></transition>包裹，然后利用value值做css選擇器的前綴，書寫css，如下：

<form @submit.prevent="addSkill">
    <input type="text" placeholder="Enter a skill you have.." v-model="skill" v-validate="'min:5'" name="skill" >
    <!-- Add these 3 lines -->
    <transition name="alert-in">
    <p class="alert" v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
    </transition>
</form>
<style>
.alert-in-enter-active {
  animation: bounce-in .5s;
}
.alert-in-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

上面演示了 enter-active、leave-active兩個(gè)類名，實(shí)際上vue提供了6中用于過渡中切換的類名。

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

對(duì)于這些在過渡中切換的類名來說，如果你使用一個(gè)沒有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="my-transition">，那么 v-enter 會(huì)替換為 my-transition-enter。

vue如何使用動(dòng)畫庫

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

<transition name="alert-in" 
            enter-active-class="animated flipInX" 
            leave-active-class="animated flipOutX">
<p class="alert" 
   v-if="errors.has('skill')">{{ errors.first('skill') }}</p>
</transition>

Vue路由

vue提供了vue-router,用于在vue組件中設(shè)置頁面路徑

  1. 安裝vue router

    > yarn add vue-router

  2. 新增 /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
    }
  ]
})

  3. 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中運(yùn)用路由
<template>
  <div id="app">
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    <router-view/>
  </div>
</template>

最終的切換效果：

GIF.gif

不妨在本地跑起來玩玩吧~ github地址：https://github.com/pluscai/vue-proj

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容