介绍
Vue.js 是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
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中的一部分,请勿混淆。
3.下面说下一些基本指令;
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中。