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教程