Vue (一)、创建组件 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Vue (一)、创建组件

2020-2-14 释然 前端及开发文章及欣赏

使用 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}
})

标签: VUE (一)、创建组件

Powered by sitemap
大象彩票登入 状元彩票开奖 广西快3 大象彩票登入 桔子彩票开奖 迪士尼彩乐园娱乐 吉利彩票登陆 江苏11选5平台 盛通彩票 百胜彩票投注