文章目錄
1小時Vue
Vue Tutorial in 2018 - Learn Vue.js by Example的筆記，深入淺出，通俗易懂。
效果如下，在線演示地址：http://www.caishuxiang.cn/demo/190619vueproj/#/
安裝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![]()
Vue組件
組件是組成Vue應用的基本單元，可以看下vue-pro的工程目錄
這裏的App.vue、Skill.vue就是組件，每個vue文件都是組件。
組件的結構
- 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，只對所在component中的元素起作用.如下：
如何引入外部css資源
注意：加了scoped代表該css只在當前componet中元素生效
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時，才該div的class屬性加上alert的值。
class綁定多個值
<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>
爲了模板中代碼的簡潔，你也可以如下寫
<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這些指令、也可以在
{{}}中寫表達式 - vue directives （vue的指令） 都是以v-開頭的，每個指令都有自己的特定任務
下面的代碼中.有用到上述的兩種功能
<template>
<div class="skills">
文本插入: {{name}}
<h1 v-once>{{name}}</h1>
插入表達式： {{ 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 }}
上述代碼運行後：在輸入框裏輸入，輸入框後面的文本也會顯示相應內容
如何導入驗證的第三方插件
/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
驗證的完整代碼：
<form @submit.prevent="addSkill">
<input type="text" placeholder="輸入一個技能" 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動畫
vue2中集成了進入離開動畫、狀態過渡效果
下面演示了一個進入離開動畫寫法，需要動畫的元素被包裹，然後利用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兩個類名，實際上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”
<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組件中設置頁面路徑
-
安裝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中運用路由 <template> <div id="app"> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </nav> <router-view/> </div> </template>
最終的切換效果：
不妨在本地跑起來玩玩吧~ github地址：https://github.com/pluscai/vue-proj