Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的，所以和前者的语法特别相似，却又使用简洁了很多。 那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码...
v-bind可以简写成 ： <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button>v-if实例 可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <...
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。1，$route.params 类型: Object一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。path: /detail/:id 动态路径参...
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 router.push(location)想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。 声明式：<router-l...
导航钩子 vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => {// do something next(); });router.afterEach((to, from, next) => {console.log(to.path); });每个钩子方法接收三个参数： to: Route : 即将要进入的目标 [路由对象]from: R...
前言 Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router 2.0的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、基础用法： <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -...
前言 最近这段时间里不停的做着Vue的技术分享，虽然不是什么深层次的代码底能架构，如果底层架构真说出来，我就不会做Vue.js 2.0从基础到组件了，就会分享Vue从底层到还是到底层。我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题。此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难，大错特错！ 对Vue 2.0的介绍 我对Vue 2.0认知，能it前端框架的认知，在我们不算底层原理的情况下，什么才...
最近公司的H5项目准备重构，部门老大说前端使用vue2.0来开发，所以就准备把整个项目的开发过程记录下来，一方面是为了记录开发过程中遇到的坑，另一方面也加强自己写作的能力。 什么是 Vue？ 简要介绍一下vue，vue就是一个前端框架，特点是 数据双向绑定，比如说改变input输入框里的内容，就会自动同步更新到页面上绑定该输入框的组件的值。 看一下官方对vue的介绍： Vue.js，读音 /vju?/，和view发音几乎一样，可见重心是在视图（...
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究，相比前一篇的 demo，本次内容多了各种样式在里面，变得稍微花哨了些，话不多说，直接上代码吧： <html> <head><meta charset="utf-8"><title>Vue test</title><style type="text/css">body {font-family: Verdana;}p { font-family: Times, "Times New Roman", serif;}.static.active {color: green; font-size: 35px;}div.text-danger {color: red;font-size: 25px;}div.act...
本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下 模板语法（文本插值、属性绑定、JS表达式、过滤器、指令）Vue实例（viewModal(属性+函数)、生命周期）计算属性和监听器 (computed(get,set) 与 watch)样式绑定（对象绑定、数组绑定、内联绑定）条件绑定（v-if v-show）列表渲染 (v-for、:key、数组监测、过滤/排序)事件处理 (监听、修饰符、key修饰符)表单输入绑定（text、checkbox、radio、select）一、模板语法 文...
数据绑定 1.单向绑定 <div id="app">{{massage}} </div> var app = new Vue({ el:"#app", data:{ message:"Hello,vue.js!" } 2.双向绑定 <div id="app"><p>{{message}}</p> <input v-model="message" /> </div> var app = new Vue({ el:"#app", data:{ message:"Hello,vue.js!" } 3.v-for列表渲染 <div id="app"><ul><li v-for="todo in todos">{{ todo.text }}</li></ul> </div> new Vue({el:"#app",data:{todos:[{text:"abcdef"}...
本篇将简单介绍一下Vue.js，并在Node.js环境下搭建一个简单的Demo。 一、简介 我个人理解，Vue.js是一套前端视图层的框架，它只关心视图展示和数据绑定，它的一些语法与Angular 1非常相似，如果有Angular 1相关的使用经验，上手会非常快。 相比较其他的React、Angular 2等MVVM框架，它更加的轻量，效率也更高，也能更好的与其他库集成。 它拥有以下几个出色的特性： 数据双向绑定指令模板组件当前最新的版本为2.1.4。后续也会在这个...
前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实挺火，各种入门博文眼花缭乱，博主也不敢说写得多好，就当是个学习笔记，有兴趣的可以看看。 一、MVVM大比拼 关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的...
介绍前段时间接触到一个库叫做Vue.js, 个人感觉很棒，所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 可以去 这里下载 。自己整理了一个Vue.js的demo， https://github.com/chenhao-ch/demo-vue 快速入门 以下代码是Vue.js最简单的例子， 当input中的内容变化时，p节点的内容会跟着变化。 <!-- html --> <div id="dem...
前言 Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子， 当 input 中的内容变化时，p 节点的内容会跟着变化。 <!-- html --> <div id="demo"><p>{{message}}</p><input v-model="message"> </div> new Vue({el: #demo,data: {message: Hello Vue.js!} })vue.js的基础语法 插入文本<span>Message: {{ text }}</span>插入html格式的文本，在页...