Vue.js

vue.js安裝

先安裝node和npm 查看使用node -v npm -v
安裝vue-cli sudo npm install -g vue-cli
查看是否安裝成功 vue
在想要安裝的地方安裝項(xiàng)目 vue init webpack 項(xiàng)目名
進(jìn)入項(xiàng)目運(yùn)行 cd 項(xiàng)目名 | npm run dev

? Project name test 
? Project description 我的第一個(gè)項(xiàng)目
? Author caijunyu <vshiron@163.com>
? Vue build standalone
? Install vue-router? Yes （路由）
? Use ESLint to lint your code? No （語(yǔ)法檢查）
? Setup unit tests with Karma + Mocha? Yes （單元測(cè)試）
? Setup e2e tests with Nightwatch? (Y/n) y 

vue.js基礎(chǔ)

MVVM框架 雙向的數(shù)據(jù)綁定

• M-model 數(shù)據(jù)層
• V-view 視圖層
• VM-view model 視圖模塊 - vue

使用小胡子語(yǔ)法來(lái)實(shí)現(xiàn)最簡(jiǎn)單的數(shù)據(jù)展示
template模版，可以在創(chuàng)建的組件和實(shí)例中添加html模版

• data:{} 用來(lái)存放數(shù)據(jù)
• methods:{} 用來(lái)存放方法 不會(huì)有緩存
• computed:{} 計(jì)算方法 根據(jù)依賴有緩存 setter getter(自帶)
• watch:{} 監(jiān)聽方法
• filters:{} 過(guò)濾器方法
• directives 指令
• components:{} 創(chuàng)建局部 存放導(dǎo)入的組件
• component 創(chuàng)建去全局組件, 組件名字最好全小寫,并且?guī)б粋€(gè)-連字符

組件中的data必須是函數(shù)

方法, 計(jì)算屬性和監(jiān)聽的區(qū)別:

• 方法不會(huì)有緩存, 使用一次運(yùn)行一次
• 計(jì)算屬性存在緩存, 當(dāng)他所依賴的值沒(méi)有發(fā)生變化的時(shí)候會(huì)使用上一次的結(jié)果, 只有發(fā)生變化的時(shí)候才會(huì)更新
• 監(jiān)聽,

vue中的指令

• v-text 和差值表達(dá)式的的使用結(jié)果一樣 v-text=“變量名”. 是變量里面的內(nèi)容會(huì)覆蓋原有標(biāo)簽上的內(nèi)容

• v-html
  也可以輸出變量中的內(nèi)容，加粗顯示 可以在數(shù)據(jù)data中定義一個(gè)html內(nèi)容然后使用這個(gè)標(biāo)簽來(lái)輸出
  <div v-html="p"></div> data:{p:'<h1>hello</h1>'}

• v-show
  使用v-show這個(gè)指令也可以實(shí)現(xiàn)數(shù)據(jù)的顯示變化，她在不顯示的時(shí)候只是隱藏了這個(gè)，而if會(huì)直接刪除;
  頻繁的需要隱藏和顯示推薦使用v-show, 只顯示一次,或者可能很少看到的使用v-if

• v-if v-else
  v-If循環(huán)：if后面的值為true或者false。

• v-for
  這個(gè)可以有三個(gè)參數(shù)，value key index
  <li v-for="(value,key,index) in(of) object">{{index索引}}.{{key屬性名}}:{{value值}}</li>
  當(dāng)給v-for循環(huán)一個(gè)對(duì)象的時(shí)候，會(huì)直接輸出對(duì)象中的各項(xiàng)屬性值。v-for="(val, key) in user"

• v-on:
  也可以簡(jiǎn)寫成 @ v-on:click="fn" 其中的this指向的是實(shí)例
  如果不傳入?yún)?shù)則不需要寫括號(hào)會(huì)自動(dòng)傳入事件源event，調(diào)用的方法會(huì)有一個(gè)event的形參 如果加了括號(hào)需要手動(dòng)傳入$event屬性，后面在加上要傳入的其他參數(shù)

• v-bind: 可以縮寫為 :

• v-model
  通過(guò)綁定變量，本身發(fā)生變化的時(shí)候，綁定的變量也會(huì)發(fā)生變化 主要是用在表單組件上
  修飾符:v-model.修飾符 .lazy(轉(zhuǎn)變?yōu)閏hange，輸入完成之后才會(huì)更新頁(yè)面) .number(數(shù)字) .trim(空格)

• v-once 你也能執(zhí)行一次性地插值，當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新
• v-cloak 解決閃爍問(wèn)題被他包含的內(nèi)容將在頁(yè)面加載完成之后顯示 [v-cloak] { display: none }

修飾符

事件修飾符

.stop 阻止單機(jī)事件繼續(xù)傳播 事件冒泡 事件從下往上執(zhí)行 意思就是只觸發(fā)自身的點(diǎn)擊事件
.prevent 提交事件不再重載頁(yè)面,阻止默認(rèn)行為
.capture 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 事件捕獲 就是優(yōu)先執(zhí)行
.self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) 自會(huì)阻止自己的冒泡事件
.once 點(diǎn)擊事件將只會(huì)觸發(fā)一次
.passive 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)

按鍵修飾符

.enter
.tab
.delete(捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.13="submit"> 使用鍵盤碼
你還可以通過(guò)全局 Vue.config.keyCodes.f1 = 112 對(duì)象自定義按鍵修飾符別名

系統(tǒng)修飾符

.ctrl
.alt
.shift
.meta
<input @keyup.alt.67="clear"> ait+c

鼠標(biāo)按鍵修飾符

.left
.right
.middle

過(guò)濾器

使用管道符 | 來(lái)過(guò)濾 可以用在雙花括號(hào)插值和 v-bind 表達(dá)式
其中的this指向的是window
filters:{} 過(guò)濾方法寫在這個(gè)里 方法的參數(shù)方法名(data,參數(shù),參數(shù)){ 可以使用data }
當(dāng)有多個(gè)根實(shí)例的時(shí)候，如果想要公用一個(gè)過(guò)濾器，可以創(chuàng)建一個(gè)根過(guò)濾器 Vue.filter('名',(data)=>{方法體}); 要放在頁(yè)面的頂部
var date = new Date( 一個(gè)字符串 );
var y = date.getMonth() + 1;
var d = date.getDate();
return ${y}+$u0z1t8os 就會(huì)根據(jù)給定的字符串,得到特定的時(shí)間, 返回的需要帶上引號(hào)

生命周期鉤子

• beforeCreate 在實(shí)例初始化之后，實(shí)例創(chuàng)建完成之前,數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用
• created 在實(shí)例創(chuàng)建完成后被立即調(diào)用 專門用來(lái)發(fā)送ajax的方法 他的this指向?qū)嵗旧?/li>
• beforMount 在掛載開始之前被調(diào)用, 模版已經(jīng)初始化完成在內(nèi)存中
• mounted el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子 dom創(chuàng)建
• beforeUpdate 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前
• updated 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子
• activated keep-alive 組件激活時(shí)調(diào)用
• deactivated keep-alive 組件停用時(shí)調(diào)用
• beforeDestroy 實(shí)例銷毀之前調(diào)用
• destroyed 實(shí)例銷毀之后調(diào)用

使用v-bind指令綁定樣式

使用v-bind綁定class樣式，可以直接綁定到一個(gè)樣式，也可以直接綁定到兩個(gè)樣式；除此之外，可以吧可以直接把他綁定到一個(gè)組里，在data里面直接定義這個(gè)組，組中的屬性為要綁定的class名。還可以直接給它綁定一個(gè)計(jì)算屬性的方法，最后也可以為他綁定一個(gè)數(shù)組，數(shù)組中的值是兩個(gè)變量，兩個(gè)變量在data中以activeClass: 'active',的形式來(lái)定義一個(gè)新的class。
綁定樣式：

• :class="['name', 'name']" 直接綁定
• :class="[ isFlag?'active':'']" 三元表達(dá)式
• :class="[{'active': isactive}]" 內(nèi)嵌對(duì)象
• <div v-bind:class="{ active: isActive, this: true }"></div> ——外聯(lián)樣式
  給這個(gè)div綁定一個(gè)class，名字為active，當(dāng)后面的值為true的時(shí)候就會(huì)綁定這個(gè)class，從而添加樣式。
  也可以為class綁定一個(gè)數(shù)組，其中的值對(duì)應(yīng)的是data中的屬性值
• <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>---內(nèi)聯(lián)樣式
• 通過(guò)style綁定內(nèi)聯(lián)樣式 <div v-bind:style="styleObject">菜鳥教程</div>——綁定樣式對(duì)象
  在對(duì)象中寫好樣式，定義在data中。styleObject: { color: 'green', fontSize: '30px'}
• <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div>—— 綁定樣式數(shù)組
  每一個(gè)數(shù)組的元素都定義在data中， baseStyles: { color: 'green',fontSize: '30px'}
  V-bing:class=“{ class名字 : true/false}”
  V-bind :style=“{ 屬性名字：屬性值}"

計(jì)算屬性 computed 不是方法

• 方法不會(huì)有緩存 computed會(huì)根據(jù)依賴的屬性進(jìn)行緩存
• 由兩部分組成get和set(不能只寫set)
• 根據(jù)一個(gè)值給他設(shè)定一個(gè)計(jì)算屬性，當(dāng)這個(gè)值變化的時(shí)候執(zhí)行對(duì)應(yīng)的改變
• 默認(rèn)調(diào)用get方法，必須要有return，不支持異步
• 另一個(gè)值(){}

watch 監(jiān)聽一個(gè)值

• watch的屬性民要和觀察的人的名字一致 a(新值,舊值){}
• 只有值變化的時(shí)候才觸發(fā) 支持異步

vue.js組件

父子組件之間的傳值
父組件往子組件中傳值的時(shí)候是通過(guò)屬性來(lái)傳值的；存放在子組件的poro中。
子組件通過(guò)事件觸發(fā)的方式來(lái)傳值，創(chuàng)建一個(gè)觸發(fā)事件this.$emit(“delete”)；
當(dāng)給一個(gè)組件傳遞一個(gè)對(duì)象的時(shí)候，對(duì)象中包含很多的屬性，你可以直接使用<blog-post v-bind="post"></blog-post>直接綁定這個(gè)對(duì)象，然后對(duì)象中的屬性就會(huì)自動(dòng)全部綁定
在prop中可以驗(yàn)證一個(gè)值的類型，這個(gè)時(shí)候prop后面跟著的是一個(gè)對(duì)象required: true表示是必填字段

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對(duì)象
    propE: {
      type: Object,
      // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

創(chuàng)建全局組件

全局注冊(cè)的組件可以用在其被注冊(cè)之后的任何(通過(guò)new Vue)新創(chuàng)建的Vue根實(shí)例，也包括其組件樹中的所有子組件的模板中
組件命名規(guī)則:使用的時(shí)候最好使用連字符
不使用駝峰命名則直接使用
駝峰命名在使用的時(shí)候,要用連字符隔開

Vue.component（“組件名”,{  //創(chuàng)建全局組件
data: function(){      // 一個(gè)組件的data必須是一個(gè)函數(shù)
    return {
        數(shù)據(jù)
    }
},
props : ['content’],     //=> 用來(lái)存放父組件傳回來(lái)的值
template: "<li>{{content}}</li>”,  //=> 創(chuàng)建的組件模版
}) 

Vue.component("mycompenent",{
 props:{
  propA:Number, //一種數(shù)據(jù)類型要求
  propB:[Number,String], //多種數(shù)據(jù)類型要求
  propC:{   //數(shù)據(jù)類型，是否必須，默認(rèn)值
   type:Number,
   required:true,
   default:18
  },
  propD:{
   default:function(){ //自定義默認(rèn)值函數(shù)
     return {message:'hello'};
   }
  },
  propE:{
   validator:function(args){  //自定義驗(yàn)證函數(shù)
    return args>10;
   }
  }
 },
 data:function(){
  return {
   count:0
  }
 },
 template:'<div>....</div>'
})

 var com = Vue.extend({
    template: '<>'})
 Vue.component('mycom',com);
  <mycom></mycom>  使用

創(chuàng)建局部組件

。。。

var TodoItem = {  //=> 創(chuàng)建局部組件
props: ['content','index’],   //=> 存放值
template: "<li @click='handItemClick'>{{content}}</li>”,//=> 模版
methods: {        //=> 方法
    handItemClick: function(){
                this.$emit("delete",this.index);
                     }
    }
} 
//=> 局部組件創(chuàng)建成功之后，要在根實(shí)例中使用需要在實(shí)例中注冊(cè)一下
components:{ 'a-b':Ab(局部組件名) }
//=> 也可以在創(chuàng)建的其他子組件中使用，但是需要導(dǎo)入注冊(cè)
import ComponentA from './ComponentA.vue' //=> 導(dǎo)入
export default {
  components: {
    ComponentA     //=> 注冊(cè)
  },
  // ...
}

Prop

類型：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 一般都是這樣
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
這樣可以為每一個(gè)props的值設(shè)置指定的類型

自定義命令

    創(chuàng)建自定義的命令
<body>
<div id="app">
    <p>頁(yè)面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p>
    <input v-focus>
</div>
<script>      //-----------創(chuàng)建全局命令
// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
  // 第一次綁定到元素的時(shí)候
  bind: function(el){};  
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  // 所在組件更新時(shí)
  update: function(el) {},
   // 指令所在的組件的VNode以及其子VNode 全部更新后調(diào)用.
  componentUpdate : function(el) {}
  // 指令和元素解綁的時(shí)候調(diào)用,只調(diào)用一次
  unbind:  function (el) {}
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app'
})
</script>
</body>
<script>            ---------創(chuàng)建局部命令
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app',
  directives: {
    // 注冊(cè)一個(gè)局部的自定義指令 v-focus
    focus: {
      // 指令的定義
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

vue.js動(dòng)畫 *

需要先使用transition包起來(lái)要有動(dòng)畫的內(nèi)容
transition中有多個(gè)元素的時(shí)候 需要給他們添加一個(gè)key值來(lái)區(qū)分，在他的屬性中可以定義一個(gè)mode=“out-in”表示先出后進(jìn) mode=“in-out”先進(jìn)后出
tag 屬性用來(lái)把這個(gè)動(dòng)畫渲染成什么元素 tag="div"

<style>   原始動(dòng)畫
    .v-enter,v-leave-to { 動(dòng)畫的移動(dòng) }
    .v-enter-active,.v-leave-active { 過(guò)渡效果 }
    .v-move {移動(dòng)的效果}  這個(gè)主要是用來(lái)解決當(dāng)一個(gè)元素隱藏的時(shí)候,其他元素也會(huì)變動(dòng)時(shí)的效果
    
    .fade-enter-active,
    .fade-leave-active {
         transition: opacity 1s;
    }
    .fade-enter,
    .fade-leave-to {
          opacity: 0;
    }
</style>   添加appear的時(shí)候表示加載完成的時(shí)候也是用動(dòng)畫
<transition appear name="a" mode="out-in" >   //=> 當(dāng)有多個(gè)div需要添加動(dòng)畫的時(shí)候需要區(qū)分開來(lái)使用name
    <div>               //=> 添加name之后就會(huì)自動(dòng)尋找匹配的樣式 out-in表示動(dòng)畫先出后進(jìn)
</transition>

+++==>> 引用animated.css
首先安裝animated.css, 然后在main.js中引入, import animated from 'animated.css' Vue.vue(animated),在界面就可以直接使用.
    <transition
      appear
      name="fade"
      enter-active-class="animated zoomInLeft"
      leave-active-class="animated zoomOutRight"
    >
      <div v-if="show">hello worlds</div>
    </transition>

====》 動(dòng)畫鉤子
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"

可以把數(shù)據(jù)存放到j(luò)son文件中，在控制臺(tái)中輸入JSON.stringify(要轉(zhuǎn)換的數(shù)據(jù))轉(zhuǎn)換為json格式

操作dom

<h2 ref='foo'>我是ref的值</h2>要獲取這個(gè)h2元素的文本，需要給此元素添加ref屬性，并賦予名字
console.log(this.$refs.foo.innerHTML') 值就是要獲取的內(nèi)容
this.$refs.foo.innerHTML=’我是新值‘ 改變他的值