Vue.js的学习1.0

最新推荐文章于 2024-06-12 08:41:10 发布

Srain13

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量355

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/srain13/article/details/79462247

版权

Vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue.js的学习1.0

有看过angular的话，再看vue的话是不陌生的，也是相对容易上手的。

那么vue和angular有什么区别呢？
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目
适合: 移动端项目,小巧

angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目

共同点: 不兼容低版本IE

1.hello vue
举个栗子：

1.引入vue.js
<script type="text/javascript" src="vue.js"></script>

<script>
  window.onload=function(){
     var c=new Vue({
        el:'#div1',//这是一个选择器，说明要把数据展示到div1里面
        data:{
                    msg:'welcome vue'
                }
            });
        };
</script>
<body>
    <div id="div1">
      {{msg}}
    </div>
</body>
</html>

2.vue循环（ v-for）
angular中用的是ng-repeat

    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    //循环数组
                    arr:['apple','banana','orange','pear'],
                    //循环json
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}   {{$index}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in json">
            //json 咱主要就是想拿到这个key
                {{value}}   {{$index}}  {{$key}}
            </li>
        </ul>

        <hr>
        <ul>
            <li v-for="(k,v) in json">
           //你要实在记不住这个key，也可以这样写 
                {{k}}   {{v}}   {{$index}}  {{$key}}
            </li>
        </ul>
    </div>
</body>
</html>

3.基础点击事件（v-on:click=“”）
v-on — 就相当于绑定一个事件
点击按钮后数组增加tomato

 script>
          window.onload=function(){
            new Vue({
                el:'#box',
                data:{ //数据
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                },
                methods:{
                    //放函数、方法...
                    add:function(){
                        this.arr.push('tomato');
                    }
                }
            });
        };
    </script>
</head>
<body>
       <div id="box">
        <input type="button" value="按钮" v-on:click="add()">
        <br>
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>