v-for与组件的结合使用

这个例子是vue官网上面一个较为基础的例子，由于刚刚接触vue。所以将例子中一些不懂的语法记录下来。1. 在vue组件开发过程中is的用法：一般在vue定义组件时，都会使用一些自定义的标签。is的含义就是将原生的html标签当做定义的组件使用。2. props的用法：组件实例的作用域是独立的。这意味子组件的模板内不能直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组

请不要让我脱发

7191人浏览 · 2017-05-16 11:32:53

请不要让我脱发 · 2017-05-16 11:32:53 发布

这个例子是vue官网上面一个较为基础的例子，由于刚刚接触vue。所以将例子中一些不懂的语法记录下来。

这里写图片描述

1. 在vue组件开发过程中is的用法：

一般在vue定义组件时，都会使用一些自定义的标签。is的含义就是将原生的html标签当做定义的组件使用。

2. props的用法：
组件实例的作用域是独立的。这意味子组件的模板内不能直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项声明

2.$emit的用法：
v-on:click定义的事件使用$emit触发

这个实例的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model="texts"@keyup.enter="add"/>
   <ul>
       <li v-for="(data,index) in message" style="list-style: none" is="my-component" v-bind:title="data" @remove=remove(index)>
 //v-bind:title="data"  在组件注册时通过  props:['title']可以出去title的值    
//@remove=remove(index) 父组件自定义事件，在子组件中通过$emit进行触发
       </li>
   </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.component('my-component',{  //组件定义的标签名在上面 is中使用该组件
        template:'<li>{{title}}<button v-on:click="$emit(\'remove\')">点击删除</button></li>',
        props:['title']
    });

    var app=new Vue({
        el:'#app',
        data:{
            texts:'',
            message:['foo','bar','aaa']
        },
        methods:{
            add:function(){
                    this.message.push(this.texts);
            },
            remove:function(idx){
                    this.message.splice(idx,1);
            }
        }
    })

</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^