之前的文章我们说了一下 vue 中组件的原生事件绑定，本章我们来所以下 vue 中的插槽使用。 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>vue</title> 6<script src="https://cdn.jsdelivr.net/npm/vue"></script> 7</head> 8<body> 9<div id="app">10<child title="<p>你好 世界</p>"></child>11</div>12<script>13 Vue.component("child", { 14 props: [‘title‘], 15 templat...
一、路由的模式 第一种用history方式实现，HTML5使用window.history.pushState()实现路由的切换而不刷新页面。 第二种使用hash值的方式来实现。 vue2.0两种都可以使用只需要在配置路由时加上 mode:‘history/mode‘ vue2.0默认为hash模式。需要切换为history模式时使用 const router = new VueRouter({ // mode:‘history‘, routes:routes }) 两种模式的区别： hash:支持所有浏览器，包...
vue-router 进阶1.动态路由? url中路由是改变的，但是改变路由公用一个组件举例：http://localhost:8080/category/detail/001?a=1&b=1http://localhost:8080/category/detail/002?a=2&b=2http://localhost:8080/category/detail/003?a=3&b=3页面中的配置：<router-link class="nav-link " active-class='active' href="#" :to="{name:'detail',params:{id:'001'},query:{a:1,b:1}}" //在router-link标签里面设置>数码</router-link...
1、插槽（1）插槽内容像 HTML 元素一样，我们常常需要给组件传递内容比如在下面的例子中，我们给自定义组件 prompt-info 传入 出错啦 的文本<!DOCTYPE html> <html><head><title>Demo</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head><body><div id="app"><prompt-info>出错啦</prompt-info></div><script>Vue.component('prompt-info', {template: `<div><h3>提示信息</h3></div>`})new Vue({el: '#app'...
组件（Component）是 Vue.js 最强大的功能之一，之前的文章都只是用到了基本的封装功能，这次将介绍一些更强大的扩展。 一、基本用法在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 <template> 中写好 HTML 代码，一个简单的组件就完成了 一个完整的组件，除了 <template> 以外，还有 <script> 和 <style>需要注意的是，<script> 中的 data 必须是函数 然后在其他文件的 js 里面引入并注册，...
一、listeners2.4.0 新增这两个是不常用属性,但是高级用法很常见;1.场景如果父传子有很多值那么在子组件需要定义多个解决attrs获取子传父中未在 props 定义的值// 父组件<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>// 子组件mounted() { console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}},相对应的如果子组件定义了 props,打印的值就是剔除定义的属性props: ...
一.什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。二.注册组件全局注册html代码：<div id="example"><my-...
获取数据的两种方式导航完成之后获取数据：先完成导航，然后在接下来的组件生命周期钩子created中获取数据。在数据获取期间展示一个loading加载中的状态提示。导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。导航完成之后获取数据(可展示loading)在组件的created钩子中获取数据。在获取数据期间展示一个loading状态，可以在不同视图间展示不同的loading状态。<template><div class="post">...
这次给大家带来怎样对vuex进阶使用，对vuex进阶使用的注意事项有哪些，下面就是实战案例，一起来看一下。一、 Getter我们先回忆一下上一篇的代码computed:{getName(){return this.$store.state.name} }这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份.vuex 给我们提供了 getter,请看代码 (文件位置 /src/sto...
这次给大家带来vue 组件高级进阶使用，vue 组件高级进阶使用的注意事项有哪些，下面就是实战案例，一起来看一下。一、递归组件组件在它的模板内可以递归地调用自己， 只要给组件设置name 的选项就可以了。示例如下： <p id="app19"><my-component19 :count="1"></my-component19></p> Vue.component(my-component19,{name: my-component19, //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。...
本章我们将深入了解一下组件，并实现父子组件间的传值。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"><counter :count="count1"></counter><counter :count="count2"></counter> </div> <script>Vue.component("counter", {props:[count],data(){return{number: this.count,}},template: `<p>{{coun...
之前的文章我们已经对 vue 有了初步认识，这篇文章我们通过一个例子说一下 vue 的方法 methods，计算属性 compited 和监听器 watch。 现在我们有一个需求，变量 firstName = "hello"，变量 lastName = "world"，我们需要将这两个变量拼接到在前端展示，最基本的我们可以想到的就是： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> <...
一、 Getter 我们先回忆一下上一篇的代码 computed:{getName(){return this.$store.state.name} }这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份. vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js) import Vue from vue import Vuex from vuexVue.use(Vuex)export default new Vuex.Stor...
对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。 第一招：化繁为简的Watchers场景还原： created(){this.fetchPostList() }, watch: {searchInputValue(){this.fetchPostList()} }组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取一次筛选后的列表这个场景很常见，有没...
前置条件: 熟悉使用 Javascript + HTML5 + css3。理解 ES2015 Module 模块(export、import、export-default)。了解 nodejs 基础知识，npm 常用命令，以及 npm script 使用 (vue 项目中使用 npm 进行包管理)。了解 webpack 打包工具 (常用配置选项以及 loader 概念)。(webpack webpack.github.io/ 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。webpack 的使用也...