1.簡單概述
我們在學習vue之前呢，先來了解一下它，
前端框架有三大馬車：Vue，React，Angular 其中我們所要學的vue是一款漸進式JavaScript前端框架，它的作者是尤雨溪，被我們稱為尤大，
官網地址: http://cn.vuejs.orghttp://cn.vuejs.org
http://cn.vuejs.org
插件案例：https://github.com/opendigg/awesome-github-vuehttps://github.com/opendigg/awesome-github-vuehttps://github.com/opendigg/awesome-github-vuevue之所以受歡迎主要取決以下幾個特點：
1.簡單，上手方便
2.結合angular指令與react組件思維
3.生態豐富（插件多）API檔案完善
接下來開始簡單了解一些vue的應用吧
2.實體化引數 new Vue
1.el:"#app"：選擇目標標簽
2.data:{}：指定資料；data(){return{}}：一個函式回傳一個物件
3.methods：方法集合
4.computed：計算
5.watch：監聽
3.計算 computed
作用：從現有資料計算出新的資料
簡單的例子：
computed:{
rmsg(){return this.msg.split('').reverse().
join('')}
}4.監聽 watch
作用：監聽資料的變化，并執行回呼函式handler
簡單的例子：
watch:{
"num":{
handler(navl,oval){},
deep:true
}
}5.自定義指令 directives
常用：
bind：系結執行一次
inserted：插入執行一次
update：每次更新執行一次
簡單的例子：
directives:{
"v-focus":{
update(el,binding){
if(binding.value){el.focus()}
}
}}6.過濾-管道 filters
作用：格式化資料
使用方法：
1.{{num|fix}}
2.{{num|fix(2)}}
3.v-text="num|fix"
簡單的例子：
filters:{
fix(value,arg){
return value.toFixed(arg)
}
}7.指令
指令的值可以是簡單的JavaScript命令
1,文本渲染指令
{{}}
v-text
v-html：渲染html文本
v-model：表單
2.屬性系結
v-bind:屬性="指令的值"
:屬性="值" ：簡寫方式
例子：:disabled="num<=1"：當 num<=1時禁止點擊
3.條件渲染
v-show css方式隱藏
v-ifv-else
v-else-if
頻繁切換用v-show,一次性切換用v-if，v-show隱藏是通過css的方式隱藏節點
4.串列渲染
v-for="item in list"
v-for="(item,index)in list"
使用v-for務必加上:key="值"，且值必須是唯一，這樣可以優化渲染，讓vue更好的識別當前渲染的節點
5.事件指令
| 事件修飾符 | 按鍵修飾符 |
| .stop .prevent .once | .up .down .left .right .delete .enter .space .esc .tab |
v-on:事件型別="回應函式"
@click="say()"：事件的簡寫
@click="num++"：行內事件回應
@change=""：當事件發生改變時執行
事件物件：event
6.表單系結指令
v-model：讓表單的值與資料系結在一起
<input type="checkbox">：默認選中的值是true，不選中為flag
<input type="checkbox" name="fruit" v-model="list">：如果是多個 把選中的值動態添加到list陣列中
修飾符：
1 .number 數字
2 .trim移除兩端空白
7.類系結
屬性：:class="值"
物件：當物件的屬性值為真，該屬性作為class系結 :class="{'key1':true,'key2':false}"key1的值為真，key1會被系結，k2不會陣列方式：:class="[c1,c2,c3]"
8.樣式系結
屬性名去掉-下個字母大寫：:style="{color:'red';'fontSize':'48px'}"
8.影片
vue影片在內置組件transition包裹，會自動在影片的進入程序與離開程序添加類名
內置組件：
1.transition
name名稱
mode：模式
in-out：先進再出
out-in：先出再進
enter-active-class：指定進入類名
leave-active-class：指定離開類名
2.transition-group
影片類：
| v-enter-active 進入程序 | v-leave-active 離開程序 |
| v-enter 進入前 v-enter-to 進入后 | v-leave 離開前 v-leave-to 離開后 |
創建影片形式：
| 方法 | 影片類6個css創建 |
| keyframes關鍵幀 .fade-enter-active{animate:fadeIn ease 1s} .fade-leave-active{animate:fadeOut ease 1s} | |
| 參考第三方影片庫 指定進入的class與離開的class <transition enter-active-class="slideIn animated" leave-active-class="hinge animated"> |
9.組件
一段可以重復利用的代碼塊
1.全居組件
Vue.component("組件名",{template:''})
2.區域組件
const steper = {template:``}
3.注冊組件
new Vue({
components:{steper}
})
4.使用組件
<steper></steper>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/345765.html
標籤：其他