二、Vue实例中的数据、事件和方法（v-text、v-html、v-on）

二、Vue实例中的数据、事件和方法（v-text、v-html、v-on）

    
    
    


    

        
{{msg}}
    
    
    

上述例子中，data中的数据怎么表现到模板上：
上述的模板不仅仅可以写成

{{msg}}

，还可以写成

，
还有一种写法是v-html：

,对于数据是简单的字符串，v-text和v-html所表现出来的内容是一样的，都是hello world；但是两种还是有所区别的：当上述主要内容改成：

现在要绑定的事件为：点击显示的结果（hello），结果会变成其他内容（world）。
可以写成这样：

{{content}}

在模板的div标签中加入模板指令v-on：，v-on：的作用是向所在的标签中绑定所要绑定的事件，click为所要绑定的事件，事件触发时，会执行handleClick方法,
方法定义:在Vue实例中方法定义在methods属性中，可以写成：

methods:{
    handleClick:function(){
            this.content = "world"
    }
}

现在例子的主要内容变成：

    

        
{{content}}

    
    
    

点击hello，结果hello将变成world
另：模板指令v-on：可以写成@，所以v-on:click可以写成@click