Vue、Vuejs从入门到精通 | 组件化开发

最新推荐文章于 2024-08-04 12:47:40 发布
最新推荐文章于 2024-08-04 12:47:40 发布
阅读量1.2k 收藏 8
点赞数 2
分类专栏： 视频学习笔记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guolianggsta/article/details/120966900
版权

学习视频来源：B站《Vue、Vuejs从入门到精通》

个人在视频学习过程中也同步完成课堂练习等，现将授课材料与个人笔记分享出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.修饰符：lazyload-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
<!--  2.修饰符：number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof(age)}}</h2>
<!--  3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字：{{name}}</h2>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
<script src = "../js/vue.js"></script>
<script>
  //1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈</p>
        <p>我是内容，呵呵呵呵</p>
      </div>`
  })
  //2.注册组件
  Vue.component('my-cpn', cpnC)
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<div id="app2">
  <cpn></cpn>
</div>
<script src = "../js/vue.js"></script>
<script>
  //1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈</p>
        <p>我是内容，呵呵呵呵</p>
      </div>`
  })
  //2.注册组件（全局组件）
  // Vue.component('my-cpn', cpnC)
  //疑问：怎么注册的组件才是局部组件？
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      //cpn使用组建时的标签名
      cpn: cpnC
    }
  })
  const app2 = new Vue({
    el: "#app2"
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <cpn1></cpn1>-->
  <cpn2></cpn2>
  <cpn1></cpn1>
</div>
<script src = "../js/vue.js"></script>
<script>
  //1.创建第一个组件构造器（子组件）
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    `
  })
  //2.创建第二个组件构造器（父组件）
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2</h2>
        <p>我是内容，呵呵呵</p>
        <cpn1></cpn1>
      </div>
    `,
    components: {
      cpn1: cpnC1
    }
  })
  //root组件
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊',
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>
<script src = "../js/vue.js"></script>
<script>
  //1.全局组件注册的语法糖
  //2.创建组件构造器
  // const cpn = Vue.extend()
  //3.注册组件
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    `
  })
  //2.注册局部组件的语法糖
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容，呵呵呵</p>
          </div>
        `
      }
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<!--1.script标签，注意：类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--  <h2>我是标题</h2>-->
<!--  <p>我是内容，哈哈哈</p>-->
<!--</div>-->
<!--</script>-->
<!--2.template标签-->
<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容，呵呵呵</p>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  //1.注册一个全局组件
  Vue.component('cpn', {
    template: "#cpn"
  })
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<!--1.script标签，注意：类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--  <h2>我是标题</h2>-->
<!--  <p>我是内容，哈哈哈</p>-->
<!--</div>-->
<!--</script>-->
<!--2.template标签-->
<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容，呵呵呵</p>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  //1.注册一个全局组件
  Vue.component('cpn', {
    template: "#cpn",
    data() {
      return {
        title: 'abc'
      }
    }
  })
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>
</html>
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  //1.注册组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        counter: 0
      }
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>
</html>
​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>-->
  <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  // 父传子：props
  const cpn = {
    template: '#cpn',
    // props: ['cmovies', 'cmessage'],
    props: {
      //1. 类型限制
      // cmovies: Array,
      // cmessage: String,
      //2.提供一些默认值，以及必传值
      cmessage: {
        type: String,
        default: 'aaaaa',
        required: true
      },
      //类型是对象或者数组时，默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
      }
    }
  }
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :c-info="info" :child-my-message="message"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{cInfo}}</h2>
    <h2>{{childMyMessage}}</h2>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: ''
      }
    }
  }
  const app = new Vue ({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      },
      message: 'aaaaaa'
    },
    components: {
      cpn
    }
  })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  //1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        //发射事件: 自定义事件
        this.$emit('item-click', item)
      }
    }
  }
  //2.父组件
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊',
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log('cpnClick', item);
      }
    }
  })
</script>
</body>
</html>

学员提出的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
<!--    <input type="text" v-model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="num1Input">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
<!--    <input type="text" v-model="dnumber2">-->
    <input type="text" :value="dnumber2" @input="num2Input">
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    methods: {
      num1change(value) {
        this.num1 = parseFloat(value)
      },
      num2change(value) {
        this.num2 = parseFloat(value)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number
        },
        data() {
          return {
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        methods: {
          num1Input(event) {
            // 1.将input中的vlaue赋值到dnumber中
            this.dnumber1 = event.target.value
            // 2.为了让父组件可以修改值，发出一个事件
            this.$emit('num1change', this.dnumber1)
            // 3.同时修改dnumber2的值
            this.dnumber2 = this.dnumber1 * 100;
            this.$emit('num2change', this.dnumber2)
          },
          num2Input(event) {
            this.dnumber2 = event.target.value
            this.$emit('num2change', this.dnumber2)
            // 同时修改dnumber1的值
            this.dnumber1 = this.dnumber2 / 100;
            this.$emit('num1change', this.dnumber1)
          }
        }
      }
    }
  })
</script>
</body>
</html>

watch方式实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn :number1="num1"
       :number2="num2"
       @num1change="num1change"
       @num2change="num2change"/>
</div>
<template id="cpn">
  <div>
    <h2>props:{{number1}}</h2>
    <h2>data:{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>props:{{number2}}</h2>
    <h2>data:{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1: 1,
      num2: 0
    },
    methods: {
      num1change(value) {
        this.num1 = parseFloat(value)
      },
      num2change(value) {
        this.num2 = parseFloat(value)
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number
        },
        data() {
          return {
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        watch: {
          dnumber1(newValue) {
            this.dnumber2 = newValue * 100;
            this.$emit('num1change', newValue);
          },
          dnumber2(newValue) {
            this.dnumber1 = newValue / 100;
            this.$emit('num2change', newValue);
          }
        }
      }
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>我是子组件</div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick() {
        // 1.$children
        // console.log(this.$children);
        // for (let c of this.$children) {
        //   console.log(c.name);
        //   c.showMessage();
        // }
        // console.log(this.$children[3].name);
        // 2.$refs => 对象类型，默认是一个空的对象 ref='bbb'
        console.log(this.$refs.aaa.name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是子组件的name'
          }
        },
        methods: {
          showMessage() {
            console.log('showMessage');
          }
        }
      }
    }
  })
</script>
</body>
</html>

$parent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是cpn组件</h2>
    <ccpn></ccpn>
  </div>
</template>
<template id="ccpn">
  <div>
    <h2>我是子组件</h2>
    <button @click="btnClick">按钮</button>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: '我是cpn组件的name'
          }
        },
        components: {
          ccpn: {
            template: '#ccpn',
            methods: {
              btnClick() {
                // 1.访问父组件 $parent
                console.log(this.$parent);
                console.log(this.$parent.name);
                // 2.访问根组件$root
                console.log(this.$root);
              }
            },
          }
        }
      }
    }
  })
</script>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默认值 <slot>button</slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app">
  <cpn></cpn>
  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件，哈哈哈</p>
    <slot><button>按钮</button></slot>
<!--    <button>按钮</button>-->
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
  <cpn><span slot="center">标题</span></cpn>
</div>
<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><sapn>中间</sapn></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <p>我是内容，哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>
<script src = "../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
      message: '你好啊',
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      }
    }
  })
</script>
</body>
</html>

 

热爱编程的通信人
关注
专栏目录
Vue.js从入门到精通
weixin_56580267的博客
12-14 2059
.stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件监听器使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时回调 .once 事件只触发一次
尚硅谷Vue2.0教程 Part1丨vuejs从入门到精通笔记 | Vue_Basic
mh200966的博客
12-04 665
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通笔记
vue.js从入门到精通
03-27
vue.js从入门到精通，想要学习vue的可以下载看看，视频资源，真实可靠
Vue.js 入门到精通
前端漫漫兮
08-03 1670
命令行安装： 全局安装 vue-cli npm install -g vue-cli 创建一个基于 “webpack” 模板的新项目 vue init webpack my-project 安装依赖，走你 cd my-project npm install npm run dev 2.代理的属性，才会在修改全局变量时候，反应到视图上。 var data = { a: 1 } var
Vue从入门到精通全网最强保姆级教程(持续更新中)
最新发布
2301_81007211的博客
08-04 1153
Vue是前端优秀框架， 是一套用于构建用户界面的渐进式框架。
Vue.js从入门到精通（全），爆肝十一万字，“建议收藏”，国庆福利！！！
陈新科的博客
09-29 4888
内容很饱满，过程可能会枯燥，愿你经过风雨，过后能成为不一样的烟火????，为了奖励看到最后的小伙伴，博主为你们准备了礼物哦 目录 开始使用Vue el $mount data 插值表达式 vue的响应式-1 vm.$el vm.$nextTick & Vue.nextTick vue的响应式-2 扩展_剖析Vue响应式原理 Vue相关指令 v-pre v-cloak v-once v-text v-html 条件渲染 v-if v-else v-else-i
Vue从入门到精通
qq_46555046的博客
06-07 1376
Vue学习入门
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
这个压缩包“Vue.js 3.0从入门到实战【配套资源】.zip”包含了两个重要的子文件：书配套代码.zip和视频配套代码.zip，它们分别对应于学习Vue.js 3.0理论知识的书籍和实践操作的视频教程的源代码。 1. **Vue.js 3.0...
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
mh200966的博客
03-02 375
尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test
尚硅谷Vue2.0 教程 Part3丨vuejs从入门到精通笔记 | Vue_Test
mh200966的博客
03-02 586
尚硅谷Vue2.0 教程 Part3丨vuejs从入门到精通笔记 | Vue_Test
3.Vue从入门到精通 （第三章 使用Vue脚手架）
cjhxydream的博客
07-21 1280
Vue从入门到精通 第三章 使用Vue脚手架
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
VUEjs从入门到精通
fanfangyu的博客
02-01 610
编码，让编码人员无需直接操作DOM，提高开发效率。模式，提高代码复用率、且让代码更好维护。Vue可以自底向上逐层的应用。JavaScript框架。，尽量复用DOM节点。
vue入门到精通
epeaktop的专栏
07-11 562
vue开发环境的搭建 开发工具 vscode | pycharm | WebStorm git clone https://github.com/vuejs/vue-devtools cd vue-devtools npm install npm run build # cd .. git cl...
Vue从入门到精通(一)
小超人日常码字
10-30 237
1.1 Vue简单使用 目标 元素内容区域 元素属性 元素绑定事件 v-model双向数据绑定 遍历指令 步骤 创建div容器 引入vue.js文件 实例化对象 注意： Vue需要有目标操作容器，可以是div、p、span等等许多标签，一般推荐用div {{}}等vue的内容要放到div容器里 {{}}双花括号是vue的语法 el、data是vue内部固定的标志名称 data内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值