Vue.js学习

1.什么是Vue.js?

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。


简单来说,Vue.js是一个基于JavaScript语言的前端框架,可以让我们更快捷的进行开发。

2.Vue.js如何使用?

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

使用时Vue.js是通过实例化的方式进行使用的;

<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello world!'
  }
})
</script>
</body>


下面说一些本人目前使用过的Vue.js中的一些功能:

 1.el

指向当前vue对象的作用域。也就是说,当前vue对象能够在哪些标签里使用它的功能。如果不在此作用域中,vue的功能将不会生效;


2.data

所有会使用到的属性。这个怎么理解呢?

例:你当前要在某个table中绑定自己从controller中得到的对象集合;

 那么,我们可以先在在data中先进行声明一个数组,暂时为空。然后通过Ajax去访问controller,拿到数据后对此数组重新赋值。

因为Vue.js是动态渲染页面的,所以当此数组的值改变时,数组渲染在页面上的数据也相应发生了改变,由此实现数据的动态绑定。


3.methods

所有要使用的函数。这个比较好理解,你可以把所有要用的函数全部写在这个属性中,在调用的时候直接通过当前的vue对象去进行调用。


楼主这里声明了一个getAll的函数,用于向controller发送得到所有数据的请求。

然后得到相应中的数据,直接赋值给data中的users数组,用于实现数据的动态渲染。


4.created

在此对象构建完成后调用的函数。

 例:有些界面需要在内容加载完成后直接将数据加载绑定到页面上,这个时候我们可以先在methods中编写一个函数,然后通过此属性去调用那个函数,达到加载时调用的效果。


注:此属性与methods等属性同级,并不属于methods中的一部分,请勿混淆。


********************************分割线**************************************


下面说下一些基本指令;


1.v-html

 用于绑定html代码;当你要绑定的数据是html代码时,可以使用v-html进行绑定。

它将自动将你的html代码进行识别并渲染。


2.v-bind

 用来响应地更新 HTML 属性;

3.v-if

 通过判断表达式的值来判断是否执行某些行为;

4.v-on

 一般用来监听某些事件,如点击事件等;

5.v-for

 一般用作循环遍历某些数组,采用“item in list"的形式;

例:


此处的users是data中的一个数组,使用v-for来进行遍历,将数组中的对象属性值全部绑定到一个tbody中。


以上是本人在学习Vue.js后一点理解,更多更详细的请参看菜鸟教程。


分享使人进步!

溜了溜了~






  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值