Vue (一)、创建组件

2020-2-13    seo达人

使用 vue-cli 创建 vue 项目:



cd 到指定的目录下 命令行输入:



vue init webpack-simple <项目名称>



根据提示设置Project name



设置Project description



设置Author



设置License



设置Use sass?



cd到刚刚创建的项目名称目录



命令行输入:npm install



等待安装完成后 执行 npm run dev 命令



注:以下部分练习是在https://jsfiddle.net 中进行

创建组件:(创建全局组件)

Html 部分:

<div id="app">

<div>练习</div>

<!-- 这里的 inline-template 取代组件函数中的 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提取成公共的部分,则多次使用同一个组件则这部分数据在内存中使用的是同一块存储 如下演示:

html部分:

<div id="app">

  <div>练习</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代码当点击按钮的时候两个组件引用的数据均会发生变化

局部注册组件:

html部分:

<div id="app">

  <div>局部注册组件练习</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}

})


分享本文至:

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档