30分鐘學會vuejs開發頁面

2018-10-19 1050 1 編輯:深正互聯 來源:互聯網

分五步

1.安裝

2.生命周期函數

3.屬性與事件綁定

4.組件之間傳值

5.異步請求

學會了這五個,基本上可以開發頁面了,至于其他知識點,可在開發過程中逐漸了解。

程序

1.安裝(3分鐘)

我這邊使用官方提供的cli工具安裝,設置了國內淘寶鏡像,大約3分鐘

node8.0.0

$ npm install --global vue-cli

$ vue init webpack my-project

多次回車

$ cd my-project

(依賴已經安裝完畢,不用npm install)

$ npm run dev

打開瀏覽器localhost:8080就可以看見頁面。


2.了解一下生命周期函數(3分鐘)

在App.vue文件

寫下面的代碼,看看瀏覽器控制臺

<template>

  <div>

    生命周期 {{ message }}

  </div>

</template>


<script>


export default {

  name: 'Life',

  components: {

  },

  data () {

    return {

      message: 'Hello Vue!',

    }

  },

  computed: {

  },

  methods: {


  },

  beforeCreate: function () {

    console.log('beforeCreated')

  },

  created: function () {

    console.log('created')

  },


  beforeMount () {

    console.log('beforeMounted')

  },

  mounted () {

    console.log('mounted')

  },


  beforeUpdate () {

    console.log('beforeUpdated')

  },

  updated () {

    console.log('updated')

  },


  beforeDestroy () {

    console.log('beforeDestroy')

  },

  destroyed () {

    console.log('destroyed')

  },

}

</script>


3.屬性與事件綁定(10分鐘)

在App.vue文件

寫下面的代碼,看看頁面

<template>

  <div>

    屬性 {{ message }}

    <button v-on:click="reverseMessage">綁定事件</button>

    <button @click="reverseMessage">綁定事件:簡寫</button>

    <div v-html="html"></div>

    <button v-bind:disabled="isButtonDisabled">綁定屬性</button>

    <button :disabled="isButtonDisabled">綁定屬性:簡寫</button>

    <div v-bind:id="'list-' + id">綁定id屬性,通過表達式</div>

    <div class="static"

         v-bind:class="{ active: isActive }">綁定class</div>

    <div class="static"

         v-bind:class="classObject">綁定class對象</div>


    <div v-if="ok">

      <h1>v-if</h1>

      <p>Paragraph 1</p>

      <p>Paragraph 2</p>

    </div>


    <div v-if="type === 'A'">

      v-if-else A

    </div>

    <div v-else-if="type === 'B'">

      v-if-else B

    </div>

    <div v-else-if="type === 'C'">

      v-if-else C

    </div>

    <div v-else>

      Not A/B/C

    </div>


    <div>v-for list</div>

    <ul id="example-1">

      <li v-for="item in items">

        {{ item.message }}

      </li>

    </ul>


    <div>v-for object</div>

    <ul id="example-2">

      <li v-for="item in items1">

        {{ item }}

      </li>

    </ul>

    <ul id="example-3">

      <li v-for="(value, key,index) in items1">

        {{ index }}.{{ key }}: {{ value }}

      </li>

    </ul>


    <button @click="getHomeInfo('hi',$event)">事件傳值</button>


    <div>阻止事件冒泡</div>

    <!-- 阻止單擊事件冒泡 -->

    <a v-on:click.stop="getHomeInfo">阻止事件冒泡</a>


    <!-- Ctrl + Click -->

    <div @click.ctrl="getHomeInfo"> Ctrl + Click </div>



    <div>表單雙向綁定</div>

    <input v-model="message1" placeholder="edit me">

    <p>Message1 is: {{ message1 }}</p>


    <input type="checkbox" id="checkbox" v-model="checked">

    <label for="checkbox">{{ checked }}</label>

  </div>

</template>


<script>


  export default {

    name: 'Attr',

    components: {},

    data() {

      return {

        checked:true,

        items1: {

          firstName: 'John',

          lastName: 'Doe',

          age: 30

        },

        items: [

          { message: 'Foo' },

          { message: 'Bar' }

        ],

        type:'B',

        ok:true,

        id: "id",

        classObject: {

          active: true,

          'text-danger': false

        },

        isActive: true,

        message: '測試',

        message1: '測試',

        html: '<div>直接注入html</div>',

        isButtonDisabled: true,

      }

    },

    methods: {

      getHomeInfo(mes,$event) {

        alert(mes)

        alert($event)

      },

      reverseMessage: function () {

        this.message = this.message.split('').reverse().join('')

      }

    },

  }

</script>


4.組件之間傳值

在App.vue文件

寫下面的代碼,看看頁面(10分鐘)


<template>

  <div>

    組件傳遞 {{ message }}

    <button v-on:click="reverseMessage">逆轉消息</button>

    <div>自定義組件</div>

    <child></child>

    <child></child>

    <child></child>

    <hr/>

    <div>父-->子組件傳值</div>

    <child-message

      my-message="父組件傳遞"

      :message="messageForChild"

    ></child-message>


    <hr/>


    <div>子-->父消息傳遞</div>

    <div>在父組件中監聽子組件發送過來的事件</div>

    <p>這個是父組件{{ total }}</p>

    <child-event

      my-message="第一個子組件"

      :message="messageForChild"

      v-on:increment="incrementTotal"

    ></child-event>

    <child-event

      my-message="第二個子組件"

      :message="messageForChild"

      v-on:increment="incrementTotal"

    ></child-event>



  </div>

</template>


<script>


  var Child = {

    template: '<div>A custom component! child' +

    '<div>' +

    '<p v-on:click="counter += 1">{{ counter }}</p>' +

    '</div>' +

    '</div>',

    data: function () {

      return {

        counter: 0

      }

    }

  }



  var ChildMessage = {

    template: '<div>' +

    '<div>' +

    '{{ message }}' +

    '</div>' +

    '<div>' +

    '{{ myMessage }}' +

    '</div>' +

    '</div>',

    props: ['message', 'myMessage'],

  }



  var ChildEvent = {

    template: '<div>' +

    '<button v-on:click="incrementCounter">{{ message }}{{ counter }}</button>' +

    '<div>' +

    '{{ myMessage }}' +

    '</div>' +

    '</div>',

    data: function () {

      return {

        counter: 0

      }

    },

    methods: {

      //在子組件定義事件然后 $emit 出自定義事件

      incrementCounter: function () {

        this.counter += 1

        this.$emit('increment')

      }

    },

    props: ['message', 'myMessage'],

  }



  export default {

    name: 'Test',

    components: {

      Child,

      ChildMessage,

      ChildEvent

    },

    data() {

      return {

        messageForChild: "父組件傳遞值綁定",

        message: 'Hello Vue!',

        total: 0


      }

    },

    computed: {},

    methods: {

      reverseMessage: function () {

        this.message = this.message.split('').reverse().join('')

      },

      incrementTotal: function () {

        this.total += 1

      }

    },


  }

</script>


5.異步請求(3分鐘)

先安裝一個異步請求模塊

npm install --save axios

然后看如下代碼

<template>

  <div>

    異步請求 {{ message }}

  </div>

</template>

<script>

  import axios from 'axios'

  export default {

    name: 'Ajax',

    components: {

    },

    data () {

      return {

        message: 'Hello Vue!',

      }

    },

    computed: {

    },

    methods: {

      getInfo () {

 /*

    配置文件config/index.js

    默認請求跟路徑是當前host,可以設置代理

    比如:api代理目錄 /static/mock

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

     '/api': {

        target: 'http://localhost:8080',

        pathRewrite:{

          '^/api':'/static/mock'

        }

      }

    },

      

*/

      

      

        axios.get('/api/index')

          .then(this.getInfoSucc)

          .catch(this.err)

      },

      getInfoSucc (res) {

        res = res.data;

        //請求結果

        console.log(res)

        this.message = "請求結果";

      },

      err(err){

        //請求錯誤

        console.log(err.response)

      }

    },

    mounted () {

      this.getInfo()

    },

  }

</script>

了解了這些,記住它,然后寫簡單的頁面,沒有問題了

至于打包,嘗試一下

npm run build

打包完成在dist目錄下

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 兼职网上彩票怎么赚钱 英雄杀官职表 海南飞鱼 北单比分直播体育有料 时时彩怎玩赚钱呢 北京快3 有空房能做什么赚钱 雷速体育球门闪现图片 单机捕鱼达人安卓 宁夏十一选五 炒黄金赚钱必须记住这几条 梦幻西游萌新五开赚钱 秒速飞艇 陕西麻将手机版下载安装 手机赚钱一块起投 竞彩足球比分