Vue简单入门及组件的简单使用

时间:2020-9-10 作者:admin

1.第一个Vue程序
注意Vue的版本,不同版本的语法可能不同.

<!DOCTYPE html>
<html>
<head>
    <title>VUE第一个实例</title>
</head>
<body>
    <div id="app">{{msg}}
    <div>
        <!--v-model绑定到info变量上-->
        <input type="text" v-model="info">
        <!--@click绑定点击事件-->
        <button @click="handle">添加</button>
    </div>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
    <script src="https://www.geekschool.org/wp-content/uploads/2020/09/1599749247.89912.jpg"></script>
    <script>
        var app=new Vue({
            el: "#app", //挂载到id=app的元素节点上
            data() {
                return {
                    msg: "hello 入门小站",
                    info: '',
                    list: []
                }
            },
            methods: {
                handle(){
                    this.list.push(this.info);
                    this.info='';
                }
            }
        });
    </script>
</body>
</html>

2.组件的使用

<!DOCTYPE html>
<html>
<head>
    <title>VUE第一个实例</title>
</head>
<body>
    <div id="app">{{msg}}
    <div>
        <!--v-model绑定到info变量上-->
        <input type="text" v-model="info">
        <!--@click绑定点击事件-->
        <button @click="handle">添加</button>
    </div>
    <ul>
        <!--<li v-for="item in list">{{item}}</li> 替换成组件-->
        <!--:comitem="item" 将for循环里面的itme传递到组件里面,并绑定到comitem上-->
        <item-one v-for="item in list" :comitem="item"></item-one>
    </ul>
</div>
    <script src="https://www.geekschool.org/wp-content/uploads/2020/09/1599749247.89912.jpg"></script>
    <script>
        //定义一个名字叫item-one的组件
        Vue.component('item-one',{
            props:['comitem'], //声明变量
            template:'<li>{{comitem}}</li>'
        });
        var app=new Vue({
            el: "#app", //挂载到id=app的元素节点上
            data() {
                return {
                    msg: "hello 入门小站",
                    info: '',
                    list: []
                }
            },
            methods: {
                handle(){
                    //将input的值动态添加到list中
                    this.list.push(this.info);
                    this.info='';
                }
            }
        });
    </script>
</body>
</html>

Vue简单入门及组件的简单使用

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。