• 1、Vue.js框架是什么,为什么学习它?

    目前最火的三款前端框架:AngularJs、VueJs、ReactJs,各有个的社区和粉丝,很难说它们三个谁是最好用的,只能说各有各的使用场景、各有各的优势,比如AngularJs最大的优势是【依赖注入...

    阅读(17032) 2017-05-09
    1、Vue.js框架是什么,为什么学习它?
  • 2、简易安装快速入门VueJs

    一、安装VueJs 有很多方法可以将VueJs导入到自己的开发项目中,这里使用最简单粗暴的方法:通过script标签的src属性引入vue文件,直接使用。 点击下载:《 Vue.js2.2.6下载 》,打开之后直...

    阅读(1672) 2017-04-03
    2、简易安装快速入门VueJs
  • 3、自己创建一个Vue实例

    Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新。那么,它是怎么做到的,我们的代码要怎么写才能做...

    阅读(1644) 2017-04-03
  • 4、Vue过滤器的使用方法

    不管是在VueJs还是AngularJs中,过滤器的使用都是非常频繁的,它可以在表达式中对一些数据进行某些操作,知识两者在使用方法上有些差异,Vue过滤器使用方法如下: JS中的代码: Vue...

    阅读(1793) 2017-05-09
  • 5、VueJs的methods属性定义方法

    在VueJs中,所有的从后台获取到的数据是方法data属性中,所有的函数方法是放在methods属性中,这个和Angular是不一样的,Angular通过$scope这个服务可以同时定义变量和方法。下面看看Vue的...

    阅读(1652) 2017-04-03
  • 6、VueJs中的computed计算属性

    有时候,我们拿到一些数据,需要经过处理计算后得到的结果,才是我们要展示的内容。 比如:我们有三个数,但是需要展示的是三个数字之和。这种情况,就适合用我们的计算属性...

    阅读(684) 2017-04-03
  • 7、VueJs的watch属性监测数据变化

    VueJs实例中有一个属性watch是专门用来检测数据变化的,相关代码如下: JS代码如下: var app = new Vue({ el : #app, data : { message : www.zymseo.com/vue/ }, watch : { message : function(n, o){ console.log(n);//变...

    阅读(1825) 2017-04-03
  • 8、VueJs绑定css样式

    class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 一、class属性绑定 我们可以为 v-bind:class 设置一个对象,从而动态的切换 class,v-bind:class是一...

    阅读(2099) 2017-04-08
  • 9、VueJs事件处理器

    JS中的事件包括点击事件、鼠标滑过事件、各种键盘事件等等。vue封装成指令来实现各类事件,代码如下: 一、监听click事件: html部分: div id=wrap input type=text v-model=num / button v-on:clic...

    阅读(727) 2017-04-08
  • 10、VueJs处理表单内容

    本节介绍VueJs在表单元素上的应用。 html部分: p单个复选框:/pinput type=checkbox id=checkbox v-model=checkedp多个复选框:b全选/binput type=checkbox v-model=checkedNames //pinput type=checkbox id=runoob value=Ru...

    阅读(661) 2017-04-08
  • 11、VueJs的if、else判断语句

    在Vue中同样可以使用if、else判断语句来决定某些元素的显示、移除、css样式等。 代码如下: html部分: div id=wrap p input type=text v-model=num span v-if=num==11/span span v-else-if=num==22/span span v-else...

    阅读(456) 2017-04-08
  • 12、VueJs使用v-for循环输出语句

    用Vue构建前端页面,就不用使用后端语言的foreach来循环输出数据流,vue提供了v-for来实现同样的功能,代码如下: html部分: div id=wrapul li v-for=(v, k) in userList span{{v.id}}/span span{{v.uname}}...

    阅读(700) 2017-05-09
  • 13、Vue核心之组件

    组件是Vue的核心之一,组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。...

    阅读(679) 2017-04-08
    13、Vue核心之组件
  • 14、VueJs实例的生命周期

    Vue实例也跟动物一样,有自己的生命,实例也会经历出生至死亡的各个阶段。 Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些钩子让我们来做一些我们想...

    阅读(1163) 2018-01-08
    14、VueJs实例的生命周期
  • 15、Vue从后台获取数据插件vue-resource.js的使用方法

    使用Vue从后台获取数据的时候,官方提供了vue-resource.js插件,具体使用方法如下: 第一步:安装vue-resource.js插件 最简单粗暴的方法,用script标签引入:地址: http://www.zymseo.com/js/vue-r...

    阅读(3607) 2018-01-08
  • 16、VueJs的路由插件vue-router的使用方法

    使用前端框架构建的项目,页面之间的跳转也是根据框架指定的路由规则来的,今天来学习下Vue官方指定的路由插件vue-router的使用方法,测试代码如下: 用script标签引入vue-router.js文件...

    阅读(1193) 2017-04-11
  • 17、Vue通过设置单一事件管理组件通信的方法

    【组件】是Vue框架的最核心的概念,通过Vue构建的应用,每一个模块都可以看成是一个单独的组件,那么每个组件之间就避免不了要互相通信、传输数据,其中一种方法:通过设置监听...

    阅读(529) 2017-04-20
  • 18、Vue父组件和子组件之间通信传参的方法

    Vue父组件和子组件之间是可以互相通信并且传输数据的,方法有很多,代码如下: 方法一: html部分: template id=boxdivh1{{a}}/h1button v-on:click=change();按钮/button/div/templatediv id=wraph1父组件:...

    阅读(1190) 2017-05-01
  • 19、Vue使用use自定义组件的方法

    之前的博文《 Webpack集成Vue2.0打包部署项目实例 》中,我们在main.js中用到了Vue.use(VueRouter)等代码,这个VueRouter其实就是别人已经封装好的组件,我们使用use方法调用即可,那么我们也可...

    阅读(1044) 2017-05-01
    19、Vue使用use自定义组件的方法
  • 20、Vue状态管理工具VueX的使用方法

    vuex是vuejs的状态管理方案,因为vuex有些复杂,一般应用在较复杂的状态环境下,如果是比较简单的应用就不需要安装vuex了。 先来看下Vue单向数据流: 第一次接触Vuex,肯定会很蒙: 先...

    阅读(853) 2017-05-07
    20、Vue状态管理工具VueX的使用方法