vue-表单操作-循环操作

框架：mvvm 数据

mvc思想

angular---大 pc端来用

vue：小巧 容易上手 （国人开发的） 移动端

vue兼容性：IE9+ chrome FF

官网：http://cn.vuejs.org/

手册：http://cn.vuejs.org/v2/api/

—————————————————————————————————————
vue使用流程：

1.引入vue.js 文件

new Vue({
                el:'#box',
                data:{
                    myData:'hello Vue'
                }
            });

            {{myData}}
        

---

表单元素：
数据双向绑定

        
{{d}}
        加个*数据就不跟着变了
        
{{*d}}
展示数据：
    {{d}}->会随着数据的更新而更新
    {{*d}}->数据更新，模板不会更新
    {{d+'a'}} 字符串拼接
    {{d.split(' ')}} 字符串方法
    {{}} 里面可以放表达式

操作arr,json

    v-for="val in 数据名"
    {{val}}  {{$index}}
    v-for="(key,value) in 数据名"
    {{key}}  {{value}}  {{$index}}
    添加时显示重复数据：
        track-by="$index"

---

操作arr

{{fruit}}

操作json：

       


          {{value}} {{key}}

       

事件:
v-on:click="add()"
@click="add()" 事件的简写方式
事件例子：

{{val}} {{$index}}





{{fruit}}

—————————————————————————————————
综合例子（简易留言板）

              内容：

                

                

              


                        


                                {{val}}

                        删除

                      

             

模板：
{{d}}
{{*d}}
{{{d}}} //能展示标签

              

              

                  
{{d}}

                      {{{d}}}

---