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

时间  2020-09-10
标签 vue 简单 入门 组件 使用 繁體版
原文   原文链接

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

<!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://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></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.组件的使用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> 替换成组件-->
        <!--:comitem="item" 将for循环里面的itme传递到组件里面,并绑定到comitem上-->
        <item-one v-for="item in list" :comitem="item"></item-one>
    </ul>
</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></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>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程