vue学习资料一（入门、插值、双向绑定）

VUE

构建数据驱动的web界面的库，技术上重点在于MVVM的ViewModel层

    
    


{{msg}}
    
    

如果要改变显示内容

data.msg = 'world'
data.msg = '瑞源先生'

插值

语法： {{key}}
将数据中的数据同步到页面中的过程；

var data = {
        msg:'欧走不力大后天呢 色'
    }
    var demo = new Vue({
        el:'.my-app',
        data:data
    })

不仅仅可以还可以插在Dom节点内容中，还可以插入到属性中：

关注{{msg}}

• debounce

(1)限制： 需在@里面使用
(2)参数:{Number} [wait] - 默认值： 300
(3)功能：包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。

    点击我,我将10秒后消失

动态插值

• 在插入的过程中，动态的对值进行修改；
  语法：

    computed:{
        key:function(){
            return newKey
        }
    }

示例：

    
{{result}}
    
{{result | currency}}
 

var demo = new Vue({
    el:'.my-app',
    computed:{
        result:function(){
            return 40
        }
    }
})

页面渲染为
40
$40.00

• 我们来看看result这个函数内的作用域是什么，console.log(this)

var demo = new Vue({
    el:'.my-app',
    computed:{
        result:function(){
        console.log(this)
            return 40
        }
    }
})

• this就是Vue实例化对象，在里面能找到result，值为40，function就是在实例化对象上执行，可以访问Vue对象上的属性；
• 可以应用表达式过滤器；

来实现一个输入框的值显示的小例子：(非V-方法）

    
    {{result}}

此时在输入框输入数字就会在后面实时显示结果

数据的双向绑定

• vue提供了v-model="",属性值是与vue中绑定数据中的数据；
• 当视图中一些操作，会修改到vue中的数据，同样，vue的数据被修改时会映射到视图中

    
    {{result | currency}}

这样我们也实现了上面一个例子中的双向绑定；

• 以后我们会用到更多的v- 开头的属性；