Vue--组件

1. Vue--组件

组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板


1.1 第一个Vue组件

注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建,vue模板文件的方式开发,以下方法只是为了让大家理解什么是组件。


1.1.1 代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <pan>pan>
div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script type="text/javascript">
    //先注册组件
    Vue.component("pan", {
      

        template: '
  • Hello
  • '
    }); //再实例化Vue var vm = new Vue({ el: "#app", });
    script> body> html>

    1.1.2 运行结果

    Vue--组件_第1张图片


    1.1.3 小结

    • Vue.component():注册组件
    • pan:自定义组件的名字
    • template:组件的模板

    1.2 使用props属性传递参数

    像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用props属性了
      注意:默认规则下props属性里的值不能为大写;


    1.2.1 代码

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    
    <div id="app">
        
        <pan v-for="item in items" v-bind:panh="item">pan>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
    <script type="text/javascript">
        //定义组件
        Vue.component("pan", {
          
            props: ['panh'],
            template: '
  • { {panh}}
  • '
    }); var vm = new Vue({ el: "#app", data: { items: ["java", "Linux", "前端"] } });
    script> body> html>

    1.2.2 运行结果

    Vue--组件_第2张图片


    1.2.3 小结

    • v-for="item in items":遍历Vue实例中定义的名为items的数组。
    • v-bind:panh="item":将遍历的item项绑定到组件中props定义名为item属性上;= 号左边的panh为props定义的属性名,右边的为item in items 中遍历的item项的值


    你可能感兴趣的:(Vue,vue)