環(huán)境搭建

官網(wǎng)：https://cn.vuejs.org

安裝：

1. 通過(guò)vue-cli 腳手架建立項(xiàng)目
   npm install -g vue-cli
2. 新建基于webpack環(huán)境的項(xiàng)目
   vue init webpack project
   cd project
   npm install
   npm run dev (package.json 中)

項(xiàng)目結(jié)構(gòu)：

1. index.html 項(xiàng)目根試圖
2. static 靜態(tài)文件服務(wù)，直接可以在瀏覽器中找到
3. config服務(wù)器的配置文件（自動(dòng)打開(kāi)瀏覽器等）
4. bulid webpack配置文件 打包等操作設(shè)置在里面

實(shí)例

• 入口文件 main.js 類似于react 這個(gè)文件中綁定跟元素視圖 以及使用了哪些插件都在這里
  單界面元素 都會(huì)綁定入口視圖

new Vue({
  <!--綁定一個(gè)元素-->
  el: '#app',
  router,
  <!--組件注入-->
   components: { App },
   <!--模板-->
   template: '<App/>' 
})

• 一個(gè)vue文件的模板

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <span>{{hello}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
        hello:"你好 vue"
    }  
  },
  components:{
      //本組件中用到的組件
  }
}
</script>

<style scoped>
#app {
    
}
</style>

Mustache模板

表現(xiàn)形式：{{變量}}
當(dāng)行：{{1>2?aaa:bbb}}
注視： 只能存在單行語(yǔ)句，并且不能作用在html熟悉上

Vue的基本指令：

v-html 渲染文本 如果文本中帶html標(biāo)簽 會(huì)解析后顯示
v-text 渲染文本
<p v-html></p>

v-bind 哪個(gè)屬性是活動(dòng)的，就綁定
<span v-bind:class="class1">動(dòng)態(tài)樣式<span>
data:
class1:"class1",

style{
.class:xxxxx
}
v-bind:class 的簡(jiǎn)寫(xiě) :class

條件渲染

1. v-if
   <p v-if="show">
   data: show:true
   <p v-else>
   注意：同樣是標(biāo)簽是不能相互嵌套的，除了div等，否則是兄弟關(guān)系?。?br> template 是一個(gè)承載容器，不會(huì)被渲染成組件，?。?！

2. v-show 沒(méi)有else了，<p v-show>xxx</p>
   注視：相對(duì)于if，v-show 總是會(huì)被渲染

3. v-for 列表渲染

dataArry:[1,2,3,]
<ul>
    <li v-for=" item in dataArry"></li>
</ul>

v-for="(item,index) in dataArry" index是下標(biāo)
:key="index" 綁定key,否則會(huì)有警告

事件監(jiān)聽(tīng)

v-on

<button v-on:click="add"/>

//直接操作數(shù)據(jù)

<button v-on:click="num+1"/>

data(){
    return{
        num:1
    }
},
methods:{
    add(){
       this.num+=1
       //this 是當(dāng)前組件
    }
}
備注：template中只能存在一個(gè)根目錄

給事件傳遞參數(shù)：add("AAA");
add(parms,event){
    //其中event是點(diǎn)擊的對(duì)象，忽略
},

事件修飾符

組織冒泡，只能點(diǎn)擊一次等
v-on:click.once
按鍵修飾符
<input type="text" v-on:keyup.enter="add"> .enter只會(huì)在enter時(shí)候觸發(fā)
事件縮寫(xiě)
@keyup.enter="add"

數(shù)組檢測(cè)更新

數(shù)據(jù)的變化會(huì)改變視圖的變化
在數(shù)組中有些方法可以改變視圖，有些確不可以！！
可以的：push／pop／shift等
不可以：concat
注視：可以的是因?yàn)楦淖冊(cè)瓟?shù)組，所以才能改變

計(jì)算屬性和觀察者

1. 計(jì)算屬性
   存在意義：一個(gè)數(shù)據(jù)的變化數(shù)據(jù)，在不同地方顯示，那么不在每個(gè)里面計(jì)算，而是采用計(jì)算屬性實(shí)現(xiàn)

computed:{
    msg(){
        return this.num+1
    }
}
<p>{{msg}}<p>

備注： 計(jì)算屬性是基于原數(shù)據(jù)的

跟方法比較：計(jì)算屬性會(huì)有緩存，方法不行，會(huì)重復(fù)調(diào)用，只有當(dāng)數(shù)據(jù)變化的時(shí)候，計(jì)算屬性才會(huì)相應(yīng)的改變，否則會(huì)在緩存拿

輸入綁定

<input v-model="msg">
{{msg}}
雙向的數(shù)據(jù)綁定哦！?。?！

watch:{
//監(jiān)聽(tīng)數(shù)據(jù)的改變，給提示用途等
msg:function(data){
//方法名msg和綁定的數(shù)據(jù)要一樣才能監(jiān)聽(tīng)
console.log(data)
}
}
修飾符：v-model.lazy="msg" 失去焦點(diǎn)的時(shí)候顯示數(shù)據(jù)

組件：

1. 單文件的組成
   三個(gè)部分：

• template 只能存在一個(gè)根元素
• script
• style scoped屬性，樣式只在當(dāng)前的組件生效

組件的數(shù)據(jù)傳遞

//父
import Son from './son'
<Son/>
script:
//組件諸如
components:{
Son
}

數(shù)據(jù)傳遞：
父--子 props
<Son title="父親的數(shù)據(jù)"/>
在子的scrpit中
props:[title],

使用{{title}}
活數(shù)據(jù)
:title
設(shè)定傳來(lái)的數(shù)據(jù)的類型
props:{
title:String,
num:Number,
//多種數(shù)據(jù)類型
title:[String,Number],
//必選項(xiàng)
title:{
type:String
required:true
}
}
.........等等...............................
子---->父:
通過(guò)自定義事件 父子都需要哦
子：
<button @click="sendMsg/>

methods:{
sendMsg(enent){
這里有兩個(gè)參數(shù)，第一個(gè)參數(shù)是key，這個(gè)key就是父組件中的所自定義的事件 第二個(gè)參數(shù)是所要傳遞的參數(shù)
this.$emit("key",this.msg)
}
}

父：
事件綁定在子組件上
<Child @key = "getMsg"/>
methods:{
getMsg(data){
//這時(shí)候就能獲取到子組件傳遞來(lái)的數(shù)據(jù)了
}
}

//父子之間的關(guān)系： 父組件將數(shù)據(jù)傳遞給子，子處理好后 返回給老頭子

插槽：
將父組件的數(shù)據(jù)直接顯示在子組件里面，那么將數(shù)據(jù)直接插入到子
父：

<Child>
    <p> 這是插入的數(shù)據(jù) </p>
</Child>
子：<slot></slot>
======
<p> 這是插入的數(shù)據(jù) </p>

注意：子父組件都可以設(shè)置其樣式

為插槽命名

 父
<p slot="s1">xxx</p>
<p slot="s2">xx</p>
子
<slot name="s1"/>

插槽傳遞數(shù)據(jù)，子穿給父，父決定其樣式
<slot name="s1" text="子的數(shù)據(jù)"／>
<Child>
<p slot="s1" slot-scope="key"/>{{key.text}}</p>
</Child>

緩存 keep-alive

切換的組件（動(dòng)態(tài)組件） 數(shù)據(jù)不重新的加載，保持不變

1. 動(dòng)態(tài)組件
   <component :is="currentView"></component>
   data:
   current:組件名字，通過(guò)fun變換data 從而切換組件視圖

2. 切換不重新加載，用keep-alive 包裹
   <keep-alive>
   <component :is="currentView"></component>
   </keep-alive>
   在什么情況下使用緩存，這里注意哦

動(dòng)畫(huà)效果

直接將元素套在transition里面,并且指定name
<transition name="fade">
name的class的過(guò)度類名
v-enter: 進(jìn)入開(kāi)始
v-enter-active:執(zhí)行過(guò)程中
v-enter-to:結(jié)束動(dòng)畫(huà)
v-leave:離開(kāi)開(kāi)始
v-leave-active 離開(kāi)過(guò)程
v-leave-to:離開(kāi)結(jié)束

可以配合第三方動(dòng)畫(huà)庫(kù)

//從過(guò)0到1的過(guò)程 
.fade-enter-active{
   transition: opacity .5s;
}
// 從1到0的過(guò)程

自定義指令

1. 通過(guò)全局
2. 通過(guò)局部

eg：自動(dòng)獲取焦點(diǎn)

• 全局：
  在根元素綁定

Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)…….其中的el代表所要使用的元素
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

這樣全局都可以使用：
<input v-focus>

2. 局部使用

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
  其他的自定義······
}

過(guò)濾器-->數(shù)據(jù)的處理（數(shù)據(jù)加?xùn)|西 剪東西啥的）

filters:{
moneyChange(value){
if(typeOf value ==="number"){
return "￥"+value
}
return value
}
}

使用：<p>{{money|moneyChange}}</p>
當(dāng)money是數(shù)字的時(shí)候顯示￥money 當(dāng)不是數(shù)字直接顯示自己本身