vue学习之hello world

依赖引入

Hello world 实现

    
        
    


    
        

        
{{msg}}
        
    

• 给节点定义id，这样组件可以和指定节点进行绑定
• Vue对象中的data节点，是对此实例数据的说明
• 其中div中获取对象实例中定义的msg的值通过{{}}来获取，这个叫做插值表达式

效果展示

按钮、todo列表

通过点击按钮获取输入框中的值，添加到todo列表中

• 定义按钮、绑定方法

     
     添加

input为输入框，需要通过获取输入框中的内容添加到todo列表中，通过参数绑定：v-model="info"进行绑定，在Vue对象中定义info属性，用来接收输入框的值
button绑定方法：@click = "handleClick"，在Vue对象中定义方法列表，其中定义 handleClick 方法

	
{{item}}

为将输入框的数据动态添加到todo列表中，使用v-for="item in list"， 使用{{item}}获取值，其中数据是从list中取的，所以需要在对象内定义list属性，是数组类型

new Vue({
                el: '#app',
                data() {
                    return {
                        msg: "hello geek!",
                        info: '',
                        list: []
                    }
                },
                methods: {
                    handleClick() {
                        console.log(this.info)
                        this.list.push(this.info)
                    }
                }
            })

完整body如下：

        

        
{{msg}}
            

                
                添加
            
            

                
{{item}}
            
        


        
    

在点击方法内，将获取到的输入框的值添加到数组中

todo列表添加完成后清空

handleClick() {
    if (this.info != '') {
        this.list.push(this.info)
        this.info = ''
    }
}

组件定义

如果

{{item}}

这种遍历场景很多的话，我们为了不希望每个地方都写一遍，所以将此进行封装和定义：

Vue.component('todo-item', {
    props: ['item'],
    template: '
{{item}}
'
})

// 在使用时

Vue.component是注册一个名为todo-item的组件，props是用来接收参数的，这个参数是让template中使用的
:item="item"是将for遍历中的item进行绑定的，和props中定义的参数一致，如果props中定义的参数为：value，要给组件传值的话，就需要使用:value=""来进行传值

总结

• 插值表达式
• vue对象实例化，我们的数据都是在对象中定义，以及方法也是在其中定义
• 属性绑定：v-model、循环遍历：v-for、参数绑定:参数名称

以上写法我们每次都要刷新页面，没有热刷新，下面我们即将使用热更新的方式进行开发和学习