Vue.js学习笔记-属性绑定和事件绑定

属性绑定(数据绑定)

Vue提供了多个关键字,能快速将数据对象中的值绑定在视图层中

v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定

    
    
    




    

        输入的内容: {
    { title }} 

        
    

代码中input标签通过v-model绑定了Vue对象中的title属性值

当在改变input输入框的内容的时候,Vue中title的值也会随之改变

v-bind

因为插值表达式是不能卸载HTML的标签的属性中的

当一定要使用vue中的属性的值作为HTML标签中的属性的值的时候,可以通过v-bind进行属性绑定

    

        {
    {link}} 

        输入链接: 
    

在代码中,a标签的href属性的值会与Vue对象中data属性的link属性的值绑定

a标签的内容会与link的属性值一致

之后的输入框中通过v-model绑定了Vue对象中的data属性的link属性的值

当输入框中内容改变,a标签的href的属性的值也会改变,a标签的文字也会改变(插值表达式)

“v-bind"可以简写为”:"

    


        {
    {link}} 

        输入链接: 
    

事件绑定

关于事件,要把我好三个步骤: 设参 传参 接参

    

        sum = {
    { sum }} 

        {
    { sum > 10 ? '总数大于10' : '总数不大于10'}} 

        增加
        
    

设参

increase: function (s)

传参

增加

接参

this.sum += s

v-on

通过配合具体的事件名,来绑定Vue中定义的方法

代码中,点击输入框,会在控制台中输出change Major

v-on:可以简写为@

事件修饰符

可以使用Vue中定义好的事件修饰符,快速达到效果

    

        x:{
    {x}} 

        y:{
    {y}} 

        鼠标移动到此处停止
    

当鼠标经过P标签,会触发@mousemove,绑定mm方法,显示X和Y的坐标

如果经过了Span标签,会触发@mousemove.stop修饰器绑定的stopm方法,X和Y不再显示坐标

计算属性(computed)

计算属性即有计算能力的属性,将动态的东西静态化

能够将计算结果缓存起来的属性

    
    
调用当前时间的方法: {
    {currentTime1()}}
    
    
当前时间的计算属性: {
    {currentTime2}} 
    

methods:定义方法,调用时候需要带括号

computed:定义计算属性,调用不带括号,this.message为了让currentTime2观察到数据变化而变化

methods和computed里的方法和属性不能重名

调用方法时,每次都需要进行计算

如果这个结果不需要经常变化更新,就可以考虑将这个计算结果缓存起来,使用计算属性

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,节约系统占用