在第一天的学习中主要了解到了什么是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>