Vue (一）、創(chuàng)建組件

2020-2-13    seo達(dá)人

使用 vue-cli 創(chuàng)建 vue 項(xiàng)目：



cd 到指定的目錄下 命令行輸入：



vue init webpack-simple <項(xiàng)目名稱>



根據(jù)提示設(shè)置Project name



設(shè)置Project description



設(shè)置Author



設(shè)置License



設(shè)置Use sass?



cd到剛剛創(chuàng)建的項(xiàng)目名稱目錄



命令行輸入：npm install



等待安裝完成后 執(zhí)行 npm run dev 命令



注：以下部分練習(xí)是在https://jsfiddle.net 中進(jìn)行

創(chuàng)建組件：（創(chuàng)建全局組件）

Html 部分：

<div id="app">

<div>練習(xí)</div>

<!-- 這里的 inline-template 取代組件函數(shù)中的 template:'' -->

<my-cmp inline-template>

  <p>{{ status }}</p>

</my-cmp>

<hr>

<my-cmp inline-template>

  <p>第二次使用{{ status }}</p>

</my-cmp>

</div>



Js 部分：

Vue.component('my-cmp',{

data: function () {

  return {

    status:'Critical'

    }

  },

 methods: {}



});



var vm = new Vue({

  el: "#app"

})



如果將data提取成公共的部分，則多次使用同一個組件則這部分?jǐn)?shù)據(jù)在內(nèi)存中使用的是同一塊存儲 如下演示：

html部分：

<div id="app">

  <div>練習(xí)</div>

  <my-cmp></my-cmp>

  <hr>

  <my-cmp></my-cmp>

</div>



Js 部分

var data = {status:'Critical'};

Vue.component('my-cmp',{

data: function () {

  return data

  },

 template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

 methods: {

    changeStatus(){

    this.status = "Nomal"

    }  

 },



});

var vm = new Vue({

  el: "#app"

})



上面的js代碼當(dāng)點(diǎn)擊按鈕的時(shí)候兩個組件引用的數(shù)據(jù)均會發(fā)生變化

局部注冊組件：

html部分：

<div id="app">

  <div>局部注冊組件練習(xí)</div>

  <local-cmp></local-cmp>

  <hr>

  <local-cmp></local-cmp>

</div>



Js 部分：



var cmp = {

   data: function () {

        return {

          status:'Critical'

        }

    },

   template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',

   methods: {

      changeStatus(){

        this.status = "Nomal"

      }  

   },

};

var vm = new Vue({

  el: "#app",

  components:{'local-cmp':cmp}

})


日歷

鏈接

個人資料

存檔