vueJS第一天学习总结

739 阅读2分钟

在第一天的学习中主要了解到了什么是VUE, VUE有什么作用以及VUE的一些基本语法等。

VUE是什么,有什么作用?

我从网上搜到的官方解释是 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 看完之后完全懵逼...但是通过一天的视频学习下来,我感觉VUE更像是JavaWeb开发中的Controller(完全是自己的感觉,也有可能是错误的),它发挥的作用就是给View层传值,响应View层中的操作。

VUE基本语法

首先是VUE的初始化,要在HTML页面的window.onload事件中来初始化VUE对象。

<script>
    window.onload=function () {
     new Vue({
            el:'#box', //选择器
            data:{     //数据
                msg:'你好,vue',
                int:12,
                bool:true,
                arr:['my','name','is'],
                json:{a:'my',b:'name',c:'is'}
            },
            methods:{  //事件绑定方法
                show:function(){
                    alert(this.msg);//设置弹出消息为当前msg对象
                }
            }
        });
    };
</script>

在Vue对象初始化中需要几个参数:el是绑定选择器,若绑定的是页面中元素的id则使用#加上元素的id的值,若绑定的是页面元素中的class则使用.加上元素class的值; data是View层需要调取的数据,可以是sting int boolean array json也就是Object; methods是View层中需要调用的事件方法。

注意事项

1 vue.js 2.0版本后在遍历数组或者是json时,$index数组内置下标变量被废除,需要在遍历的时候声明该变量

<!--2.0以前版写法-->
    <li v-for="value in arr">
        {{value}}  {{$index}}
    </li>
<!--2.0以后版本弃用了{{$index}}-->
    <li v-for="(value,index) in arr">
        {{value}}  {{index}}
    </li>

2 事件绑定方法 注意方法名称最好避开一元运算符,例如delete等,否则会报avoid using JavaScript unary operator as property name错误