数据获取 数据获取有2中方式 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。 导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。 下面我们做一个效果演示一下这个数据获取 首先我们要下载有个vue-resource...

滚动行为 什么是路由的滚动行为 当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样 注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务 我们用scrollBehavior 方法来做路由滚动 scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPositio...

在使用Vue.js的时候，我们通过组合组件来组成应用程序，现在我们要把vue-router添加进来，只需要将组件（components）映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码

在使用Vue.js的时候，我们通过组合组件来组成应用程序，现在我们要把vue-router添加进来，只需要将组件（components）映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 [链接] 这样指定 版本号 或者 Tag。

git clone [链接] node_modules/vue-router cd node_modules/vue-router npm install npm run build

路由高级 整体效果可见下面地址 [链接] 1、导航钩子 如果我的账户没有登录的情况下，就跳到登录页面 【案例】 效果 {代码...} 下面我们做一下登录状态 效果 {代码...} 如果我们让一个子级也判断是否登录要用到matched 【案例】 效果 {代码...} 2、路由元信息 定义路由的时候可以配置 meta 字段 点击登录让账户管理和密码...

路由基础 1、开始 什么是路由 路由就是将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们 定义（路由）组件。 {代码...} 定义路由 {代码...} 创建 router 实例，然后传 routes 配置 {代码...} 创建和挂载根实例。 {代码...} 【案例】 首先我们要引用一下两个js文件 {代码...} 效果图 {代码...}...

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合

百度地图插件 安装 CDN全局安装 {代码...} 插件的引入 {代码...} ak 是在百度地图开发者平台申请的密钥 详见 [链接] */ 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器 使用 Bmview 渲染一个地图实例： {代码...} 给地图添加一个缩放控件 {代码...} 把控件放到我们渲染的地图实例里就可以了 效果如下： 完整代...

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例如:

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

vue的复用性与组合 1、混合 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项 当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合 {代码...} 切记混合对象的 钩子将在组件自身钩子 之前 调...

事件处理 监听事件 (绑定) 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 {代码...} {代码...} 方法事件处理器 事件处理器可以放在方法里，也可以放在普通函数vm.method()里 {代码...} {代码...} 内联处理方法 除了直接绑定到一个方法，也可以用内联 JavaScript 语句： {代码...} 有时也需要在内联语句处...

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素.

vue — 事件处理 什么是事件 {代码...} 绑定（监听）事件 {代码...} {代码...} 方法处理器 可以用v-on指令监听DOM事件。 {代码...} 我们绑定了⼀个单击事件处理器到⼀个⽅法 greet。下⾯在 Vue 实例中定义这个⽅法： {代码...} 内联语句处理器 {代码...} {代码...} 有时也需要在内联语句处理器中访问原生 DOM 事件。可以...

组件在注册之后，便可以在父实例的模块中以自定义元素 < my-component >< /my-component > 的形式使用。要确保在初始化根实例之前注册了组件：

组件 组件的注册 全局注册 局部注册 局部注册 与全局注册 案例 {代码...} 其中<script type="text/x-template"><script>是引用模板data在component必须应用函数 格式为data：function(){ {代码...} } 父子通讯用.props来传递 [链接] 子夫传递用.emit [链接] 非父子传递 [链接] slot分发内容 *slot命名引用 ...

事件处理 ---事件源 ---事件 ---事件处理函数 方法事件处理 {代码...} 内联处理方法 {代码...} 函数值可以直接传进参数里 事件修饰符 stop 阻止单击事件冒泡 prevent组止默认行为 capture添加事件侦听器时使用事件捕获模式 self只当事件在该元素本身触发时触发回调 once只发生一次 例如冒泡行为 .stop时阻止自事件的行为...

使用 Slot 分发内容 使用slot分发内容我们要注意2点 <app> 组件不知道它会收到什么内容。这是由使用 <app> 的父组件决定的。 <app> 组件很可能有它自己的模板。 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。 【案例】 {代码...} 结果如下

组件在注册之后，便可以在父实例的模块中以自定义元素 < my-component >< /my-component > 的形式使用。要确保在初始化根实例之前注册了组件：

组件通信 1、父子通信 父组件给子组件通信是通过(porps)属性传递的 创建属性有2种方式 一种是静态创建属性 或叫静态prop传递数据 一种是动态创建属性 或叫动态prop传递数据 【案例】 {代码...} 2、子父通信 父组件定义事件,子组件触发这个事件，通过$emit来触发 【案例】 {代码...} 结果为下 3、非父子通信 触发组件 A ...

组件 1、什么是组件 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。 对于自定义标签名，Vue.js 不强制要求遵循 W3C 规则 (小写，并且包含一个短杠)，尽管遵循这个规则比较好。 myComponent驼峰式命名不能用 切记 组件在注册之后，便可以在父实例的模块...

表单输入绑定 1、基本语法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 1.1、文本 {代码...} 1.2、多行文本 {代码...} 1.3、复选框 {代码...} 1.4、单选按钮 {代码...} 1.5、选择列表 {代码...} 2、绑定value 对于单选按钮，勾选框及选择列表选项， v-model 绑...

我们可以利用 v-model 指令来实现数据与模版的双向绑定,它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

表单输入绑定 上一篇：Vue的事件处理方法：[链接]下一篇：Vue的组件：[链接] 基础用法 文本 {代码...} 多行文本 {代码...} 复选框 单个复选框 {代码...} 多个复选框，添加到数组里 {代码...} 单选按钮 {代码...} 选择列表 单选列表 {代码...} 如果 v-model 表达初始的值不匹配任何的选项，< select > 元素就会以”...

许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。