前端—vue學習

1.漸進式架構:可以同時與jquery.js 原生js同時存在

2.vue生态:core+Vue_router(路由)+Vuex(狀态)

3.特性

1.服用元件

2.虛拟dom

3.狀态管理

4.路由

5.官方網站

https://cn.vuejs.org/v2/guide/

二.vue.js安裝

1.cdn安裝

<!-- 開發環境版本，包含了有幫助的指令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生産環境版本，優化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.不聯網引入

下載下傳位址:

開發版:

https://cn.vuejs.org/js/vue.js

生産版:

https://cn.vuejs.org/js/vue.min.js

3.npm引入

三.指令

1.v-clock

隐藏資料綁定時的閃爍效果

<p v-cloak></p>

在元素上增加v-cloak,并增加style樣式

<style>

 [v-cloak]:{

    display:none

}

</style>

2.v-text v-html

綁定資料

v-text 與 {{}} 效果一樣

差別是

1. v-text 預設不會閃爍 {{}}會閃爍
2. v-text會覆寫元素内的所有内容  {{}}不會

<p v-text="msg"></p>

<p>{{msg}}</p>

v-html 與v-text一樣 綁定資料,v-html會解析成html代碼

<template>

    <div id="zhiling">

        v-html效果:<span v-html="msg"></span>    <br/>

        v-text效果:<span v-text="msg"></span>    

    </div>

</template>

<script>

export default {

    name: "zhiling",

    data(){

        return {

            msg:"<b>123</b>"

        }

    }

</script>

3.v-bind 綁定資料

 v-bind效果:<span v-bind:title="msg+'sss'">123</span>

可以簡寫為 : 不加v-bind

 v-bind效果:<span :title="msg+'sss'">123</span>

v-bind 會把資料作為js的表達式解析

5.v-on 綁定事件

v-on綁定事件的值裡不能直接寫js代碼

 v-on效果:<span v-on:click="show">123</span>  

這裡的show調用的是methods中的方法,不可以直接寫alert(123),與v-bind的差別

methods:{

        show(){

            alert("123")

v-on:click 也可以簡寫為 @onclick="show"

6.v-once 隻有第一次會改變值

 v-once效果:<span v-once v-text="msg"></span>

7.v-pre 原樣顯示

v-pre效果:<span v-pre>{{msg}}</span>    <br/>

4.事件修飾符

stop:阻止冒泡

selef:隻能由自己觸發

once:隻觸發一次

@chlick.stop="alertMsg"

四.生命周期

五.計算屬性

有緩存機制

computed:

 computed效果:<span>{{totalPrice}}</span>    <br/>

computed:{

    totalPrice(){

        let result = 0

        for(let moive of this.moives){

            result += moive.price

        return result

    }  

  },

六.ES6文法與高階函數

ES6文法

高階函數

filter

過濾出符合條件的結果傳回

var arr = [1,2,3,4]

var newArr = arr.filter(function(item){

    return item > 2

})

console.log(newArr)

map

對結果進行處理後傳回處理後的結果

var newArr = arr.map(function(item){

    return item*2

reduce

對資料的資料進行彙總

var total = arr.reduce(function(prevalue,item){

    return prevalue+item

console.log(total)

七.父子元件傳值

父傳子:

定義元件時使用props屬性

Vue.component("cpn",{

    template: "#cpn",

        return {}

    },

    props:{

        moive:{

            type: Array,

            default: function(){

                return []

            }

            required: true

<template id="cpn">

<div id="app">

 <cpn :moive="父元件的屬性"></cpn>

</div>

子傳父:

通過this.$emit()發射事件傳值

    methods:{

        //定義子元件的觸發事件

        testEmit(參數){

            this.$emit("ptestemit","參數");

父元件監聽子元件事件

    <cpn @ptestemit="父元件中負責處理的方法"></cpn>

注意駝峰

pTestEmit = p-test-emit

八. 插槽 slot

作用:擴充元件

8.1 基本使用

元件内使用slot 标簽預留插槽

 <slot></slot>

使用元件時傳入要自定義的内容,自動替換slot的内容

    <cpn><button>按鈕</button></cpn>

8.2 插槽預設值

slot内可以寫一個預設内容,如果沒有指定的内容來替換就會使用預設内容

8.3 具名插槽

當有多個插槽時,需要給插槽起一個不一樣的名字來區分

 <slot name="left"></slot>

    <slot name="center"></slot>

    <slot name="right"></slot>

使用元件時 指定替換的是哪個名字的slot,就隻會替換該名字的插槽

  <cpn>

   <span slot="center"></span>  

  </cpn>

若有收獲，就點個贊吧