vue内容

1.vue的含义是什么？

Vue（发音为/vjuː/，类似于视图）是用于构建用户界面的渐进式框架。与其他单片框架不同，Vue是从头开始设计的，可逐步采用。核心库仅侧重于视图层，易于获取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue完全能够为复杂的单页应用程序提供动力。

2.引入的两种方法：

  script引入     

  git的安装，在Git Bash Here里面输入（$ npm install vue）;

3.js的三种框架：①vue ②angular ③react

    npm空格    install安装    vue安装指令

4.用vue输入hello vue

eg:

        {{msg}}

js/vue.js'>

        new Vue({    //element元素         Element对象表示HTML里的元素

            el:'#itany',   

            data:{      //写数据

                msg:'hello vue'

            }

        })

显示屏会显示：hello  vue

5.vue里面v-for的使用例子：

    {{msg}}

    {{num}}

    {{arr}}

    {{obj}}      //{}代表对象  {{}}会和下面的相联系

{{val}}

{{val}}

{{index}}=={{val}}

{{index}}=={{val}}

{{val.num}}--{{val.pname}}--{{val.price}}

js/vue.js">

    new Vue({//element元素

        el:'#itany',

        data:{//写数据

            msg:'Hello Vue',

            num:12,

            arr:[1,2,3,4,5,6,7,8,9],

            obj:{name:'jack',age:18},

            arrs:[

                {num:1,pname:"香蕉",price:3},

                {num:2,pname:"苹果",price:4},

                {num:3,pname:"西瓜",price:0.3}

            ]

        }

    })

显示屏显示的样子：

Hello Vue 12 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] { "name": "jack", "age": 18 }

1

2

3

4

5

6

7

8

9

jack

18

0==1

1==2

2==3

3==4

4==5

5==6

6==7

7==8

8==9

name==jack

age==18

1--香蕉--3

2--苹果--4

3--西瓜--0.3

6.vue中table的使用：

Title

        table{

            width:300px;

            text-align: center;

        }

编号

名称

价格

{{val.num}}

{{val.pname}}

{{val.price}}

---

编号

名称

价格

{{index+1}}

{{val.pname}}

{{val.price}}

js/vue.js">

    new Vue({//element元素

        el:'#itany',

        data:{//写数据

            arrs:[

                {num:1,pname:"香蕉",price:3},

                {num:2,pname:"苹果",price:4},

                {num:3,pname:"西瓜",price:0.3}

            ],

            ars:[

                {pname:"香蕉",price:3},

                {pname:"苹果",price:4},

                {pname:"西瓜",price:0.3}

            ]

        }

    })

显示：