vue 基础学习

vue的挂载点，模版，实例之间的关系

<div id="root"> 
    <h1>hello{{msg}}</h1>  //模版内容 1
</div>
<script>
new Vue({
    el:"#root",  //挂载点
    template: '<h1>hello{{msg}}</h1>'  //模版内容 2
    data:{
        msg: "hello wolld"
    }
})
</script>

vue的属性绑定/数据双向绑定

<div id="root">
        <!-- vue的属性绑定 -->
        <div :title="title"> hello world</div> 
        <!-- 数据双向绑定 -->
        <input v-model="content">
        <div>{{content}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                title: "this is hello world",
                content: "this is content",
            }
        })
    </script>

vue中的计算属性/侦听器

<div id="root">
        <!-- vue计算属性 -->
        姓：<input v-model="fristName">
        名：<input v-model="lastName">
        <div>{{fullName}}</div> 
        <!-- vue侦听器 -->
        <div>{{count}}</div>    
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                fristName: "姓名",
                lastName: "姓名",
                count: 0
            },
            //vue计算属性
            computed: {
                fullName: function(){
                    return this.fristName+''+this.lastName;
                }
            },
            // 侦听器
            watch:{
                fullName: function(){
                    this.count ++
                }
            }
        })
    </script>

todolist 功能实例

<div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item, index) of list"
                :key="index"
                :content="item"
                :index="index"  
                @delete = "handleDelete"  
            >
            </todo-item>
        </ul>
    </div>
    <script>
        //父组件向子组件传值/数据：是通过属性的方式传递
        //子组件向父组件传递数据：通过发布订阅的方式，this.$emit('delete', this.index)  
        //子组件
        Vue.component('todo-item',{
            props:['content', 'index'], //接收数据，下标
            template: '<li @click="handleClick">{{index}}-{{content}}</li>',
            methods: {
                handleClick: function(){
                    this.$emit('delete', this.index)  //通知父组件删除对应的值，delete事件
                }
            }
        })

        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function(){
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleDelete: function(index){  
                    this.list.splice(index, 1)  //删除 1项
                }
            }

        })
    </script>