Vue框架入门笔记（4）

<html>
    <head>
        <meta charset="utf-8" />
        <script src="vue.js"></script>
    </head>
    <body>
        <!-- app1展示了组件自身改变，不影响其他组建，也跟着改变
        app2展示了组建的模板元素设置好自定义监听事件，模板里的元素设置好触发该自定义事件的函数，改变属性值后相关的与父元素绑定的效果改变
        简单说就是模板组建之间的传值与事件触发
        模板用反引号括起来
         -->
        <div id="app1">
            <button-counter></button-counter>
            <button-counter></button-counter>
            <button-counter></button-counter>
        </div>

        <!-- 绑定style属性，再改变postFontSize的大小后，整个子元素的文字大小改变 -->
        <!-- <div id="app2" v-bind:style="{fontSize:postFontSize+'em'}"> -->
        <div id="app2" v-bind:style="{fontSize:postFontSize+'em'}">
            <!-- 注册一个名为enlarge的监听器 -->
            <!-- 第一种方法：用$event传递$emit中的数给模板元素
            <blog-post v-for="item in items" v-bind:item="item" v-bind:key="item.id" v-on:enlarge="postFontSize += $event"></blog-post> -->
            <!-- 第二种方法：依靠函数 -->
            <blog-post v-for="item in items" v-bind:item="item" v-bind:key="item.id" 
                v-on:enlarge="onEnlargeText" v-bind:style="{fontSize:postFontSize+'em'}"></blog-post>
        </div>

        <div id="app3">
            <p>{{searchText}}</p>
            <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
        </div>
        <br>
        <div id="app4">
            <input
                v-model="newTodoText" 
                v-on:keyup.enter="addNewTodo"
                placeholder="Add a todo"
            >
            <ul>
                <li
                    is="todo-item"
                    v-for="(todo,index) in todos"
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:remove="todos.splice(index,1)">

                </li>
            </ul>
        </div>
        <script>
            Vue.component("todo-item",{
                props:["title"],
                template:`
                    <li>
                        {{title}}
                        <button v-on:click="$emit('remove')">X</button>
                    </li>
                `
            })


            Vue.component("button-counter", {
                //如果data里的数据不用函数来返回
                //那么所有的模板事例都会是相同地点数据
                data:function(){
                    return {
                        count:0,
                    }
                },
                template:`
                    <button v-on:click="count++">
                        click me! {{count}} times.
                    </button>
                `
            })

            Vue.component("blog-post",{
                data:function(){
                    return {
                        
                    }
                },
                props:['item'],
                //每个组建必须只有一个根元素
                //解决办法：模板内容包裹在一个父元素里
                //注意此处字符串拼接的技巧，通过$emit传递父元素的事件名
                //template:'<div><h3>{{item.text}}</h3><button v-on:click="$emit('+"'"+'enlarge'+"'"+',0.1)">Enlarge text</button><div v-html="item.content"></div></div>',
                template:`
                    <div>
                        <h3>{{item.text}}</h3>
                        <button v-on:click='$emit("enlarge",0.1)'>Enlarge text</button>
                        <div v-html="item.content"></div>
                    </div>
                `
            })

            Vue.component("custom-input",{
                data:function(){
                    return{
                        props:['value'],
                    }
                },
                template:"<input v-on:input='$emit("+'"'+"input"+'"'+",$event.target.value)' />"    
            })

            Vue.component({

            })

            var app1=new Vue({
                el:"#app1",
            })

            var app2=new Vue({
                el:"#app2",
                data:{
                    items:[
                        {text:"My journey with Vue",id:1,content:"<p>第一文章</p>"},
                        {text:"Blogging with Vue",id:2,content:"<p>第二文章</p>"},
                        {text:"Why Vue is so fun",id:3,content:"<p>第三文章</P>"},
                    ],
                    postFontSize:1,
                    enlargeAmount:0.1,
                },
                methods:{
                    onEnlargeText:function(enlargeAmount){
                        this.postFontSize += enlargeAmount;
                    }
                }
            })

            var app3=new Vue({
                el:"#app3",
                data:{
                    searchText:"",
                },

            })

            var app4=new Vue({
                el:"#app4",
                data:{
                    newTodoText:"",
                    todos:[
                        {id:1,title:"Do the dishes"},
                        {id:2,title:"Take out the trash"},
                        {id:3,title:"Mow the lawn"},
                    ],
                    nextTodoId:4,
                },
                methods:{
                    addNewTodo:function(){
                        this.todos.push({
                            id:this.nextTodoId++,
                            title:this.newTodoText,
                        });
                        this.newTodoText="";
                    }
                }
            })
        </script>
    </body>
</html>
Vue框架入门笔记（4）

猜你喜欢
