Vue尝鲜

演示效果1

将 data 中的数据渲染到页面上。

预览 https://huanghe1993.github.io/chapter01/02Vue-demo2.html

示例代码1：

 

        {{message}}
        

        {{msg2}}
        

        {{msg}}
        

        {{arr}}
        

        {{json}}
    
    
    

演示效果2

实现数据双向绑定。

预览 https://huanghe1993.github.io/chapter01/02Vue-demo3.html

示例代码2：

    
    
    
    
    
    
    



    

        
        

            {{msg}}
        
    

将message绑定到文本框，当更改文本框的值时，

{{ message }}

中的内容也会被更新。

上面用到的v-model是Vue.js常用的一个指令，那么指令是什么呢？

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js具有良好的扩展性，我们也可以开发一些自定义的指令，后面的文章会介绍自定义指令。

演示效果3

渲染json数据。

预览：https://huanghe1993.github.io/chapter01/02Vue-demo4.html

代码示例3

    
    
    
    



    

        

            

                {{list.name}}
                {{list.age}}
                {{list.addr}}
            
        

    
    
    

121331