VUE 初学（1）

2021-07-23 09:31:02 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        var app = Vue.createApp({
            // 数据存储
            data() {
                return{
                    content: 'Hello World',
                    list: [],
                    inputVal: ''
                }
            },
			
			// 自定义方法
            methods: {
                addList(){
                    this.list.push(this.inputVal)
                    this.inputVal = ''
                }
            },
			
			// 组件或页面渲染完成后自动执行函数
            mounted() {

            },
			
			// 模板  作用在 id为root下
            template: `
                <div>
                    <input v-model="inputVal" />
                    <button v-on:click="addList" v-bind:title="inputVal">增加</button>
                    <ul>
                        <to_list v-for="(item, index) in list" v-bind:count="item" v-bind:index="index"></to_list>
                    </ul>
                </div>
            `
        })
		
		// 组件  to_list组件名称 props父页面的参数
        app.component('to_list',{
            props: ['count','index'],
            template: `
                <li>{{index}} -- {{count}}</li>
            `
        })
		// 挂载到 root
        app.mount("#root");
    </script>
</body>
</html>

标签：VUE,app,list,inputVal,初学,template,组件,root
来源： https://blog.csdn.net/weixin_45086113/article/details/118932259