08 2024 档案
摘要：当打包构建应用时，JavaScript包会变的很大，影响页面加载。如果我们把不同路由对应组件分割成不同的代码块， 然后当路由被访问的时候才加载对应组件，这样就会更加高效 vue Router支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入 将import Login from '@/vi
阅读全文
摘要：vue Cli是基于vue.js进行快速开发的完整系统 vue脚手架使用语法： vue init <模板名称> <项目名称> vue init webpack vue-spa2 安装完成就有项目目录，如下： cd vue-spa2 npm install 运行 npm run dev build 构
阅读全文
摘要：router.beforeEach表示全局前置守卫，即从一个组件跳到另外一个组件这个过程可以进行控制。 // 一打开页面的时候就会执行,访问任何一个组件都会触发 router.beforeEach((to, from, next) => { console.log('全局前置导航守卫执行了'); c
阅读全文
摘要：有query传参和params传参 query:通过路由传参进行拼接,如下： <router-link :to="{name:'login',query:{id:10110,username:'yansunda'}}">登录组件</router-link> 采用编程式导航使用query，使用$rou
阅读全文
摘要：编程式导航和上面说的声明式导航的区别在于，声明式导航是先写好便签，然后进行导航。 编程式导航通过代码直接进行了导航。 通过this.$router.push()这个方法来实现编程式导航， 当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。 <!DOCTYPE html> <html
阅读全文
摘要：实际生活中的应用界面，通常由多层组件构成，同样，URL中各段动态。路径也按某种结构对应嵌套的各层组件。 我们使用children属性来完成。 let routes = [ { path:'/user',component:User, children:[ { path:'userList', com
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：路由其实是一种映射关系，类似于key >value的键值对关系，其中key表示请求的路径path。 路由是根据不同的url地址展示不同的内容和页面。 路由分为前端路由和后端路由 前端路由：前端路由的value表示组件，一个path映射一个组件； 后端路由：后端路由的value表示处理请求的回调函数，
阅读全文
摘要：将来我们可能要定义非常多的组件，那么不可避免的是有些组件的数据、函数methods方法、监听，计算属性等都可能会重复。 那么如何提高这些（组件配置项）的复用，可以通过组件的复用mixin混入来实现vue组件配置项的复用，一个混入对象可以包含任意的组件选项 当组件中使用混入对象时，会把混入对象的配置混
阅读全文
摘要：如果向组件标签中输入内容，会被忽略掉 1、props接受父组件传递过来的数据 2、插槽，接受父组件向子组件传递的html文本 在组件中通过slot标签可以接收父组件传递过来的html文本,就是将slot标签添加到template标签中 如下：现在组件中添加标签 <sub-component :pms
阅读全文
摘要：如果想在子组件中使用父组件的数据，不能直接调用，但是可以进行组件传值 通过属性绑定的形式，把子组件需要的数据，传递到子组件内部，供子组件使用 1、传 父组件传值 v-bind:自定义属性名=父组件数据的变量名 2、自定义属性名就是子组件内部接受传递的数据变量名 如下我们定义了一个subCompone
阅读全文
摘要：需求：登录注册两个按钮，点击登录的时候登录显示，点击注册的时候注册显示，另外一个隐藏 如下图所示先定义两个template组件 <template id="login"> <div> <h2>用户登录</h2> <p> 用户名：<input type="text" v-model="username
阅读全文
摘要：组件可以有自己的data数据 组件的data和vue实例中的data有点不一样，实例中的data可以为一个对象，但是组件的data，必须是一个方法 组件中的data出了必须为一个方法以外，这个方法内部，还必须返回一个对象才行 组件中的data数据使用方式和实例中的data使用方式完全一样。 如下定义
阅读全文
摘要：通过component配置项来定义局部组件 <script> // 随着组件的配置项越来越多，那么VUE配置项的内容会非常多， // 推荐：把组件的配置以自变量的方式定义在外面 let pageHeader = { template:'<div>页面的头部内容</div>' } let pageBo
阅读全文
摘要：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不能的功能木块，将来需要什么样的功能，就可以去调用 组件和模块化的不同： 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块只能单一 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重
阅读全文
摘要：从vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件。而这些事件称为生命周期。 每个Vue实例在被创建的时候都要经过一系列的初始化过程，例如，需要数据监听，编译模板，实例挂载到dom并在数据变化 时更新Dom等，同时在这个过程中也会运行一系叫做生命周期钩子的函数，这给了用户在不同阶段添加自己
阅读全文
摘要：除了核心功能默认内置的指令v-model 和 v-show vue也允许注册自定义指令。 注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通Dom元素进行底层操作，这时候就会用到自定义指令。 有两种方式定义自定义指令，一：局部定义自定义指令 1、局部自定义指令
阅读全文
摘要：vue.js允许自定义过滤器，可被用于一些常见的文本格式化 功能：对要显示的数据进行特定格式化后再显示 需求：有一个日期对象，想按照年月日的方式展示 以前的代码需要自己先获取年月日，然后进行拼接，我们利用计算属性来做，如下所示： <div id="app"> <p> 当前日期:{{date}}</p
阅读全文
摘要：vue如果要更新v-for渲染出来的数据，它是不会操作dom元素的。 而是就地更新需要操作的元素，并且确保它们在每个索引位置正确渲染。 为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有的元素，你需要为每项 提供一个唯一Key attribute; <div v-for="(i
阅读全文
摘要：当model里面有多个数据需要再view中显示是，可以使用v-for指令来进行操作 可以使用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法 其中items是源数据数组，而item是被迭代的数组元素的别名 语法：<开始标签 v-for="自定义
阅读全文
摘要：v-show表示是否显示和v-if用法一样 但是v-if为false时，是不会加载div的。v-show为true是会加载div的，但是会加上display：none的属性。 <div id="app"> <!-- 用于根据条件展示元素的选项是v-show指令，用法和v-if一致. --> <!--
阅读全文
摘要：当我们挂载内部的绑定数据发生变化，如果我们向需要执行一些处理程序才处理业务逻辑 就可以使用vue的侦听器watch属性。这个需要添加watch配置项。 <div id="app"> <p>我的名字是：{{name}}</p> <input type="text" v-model="firstName
阅读全文
摘要：在插值表达式和指令中可以使用表达式，但是无论是指令还是插值表达式，设计的初衷都是为了数据渲染或者简单运算。 如果在插值表达式中过渡使用，则有以下缺点 1、模板中有大量运算，不推荐 2、无法复用计算 解决方法：引入计算属性配置项computed，计算得到的属性，这个属性也会成为data中的属性。 在计
阅读全文
摘要：对象语法由key和value key就是样式属性名，value就是样式值（可以使用动态值，也可以静态值） 样式属性名包含特殊字符号，要么驼峰写法，要么使用引号包裹 我们可以在js中控制值的改变 将colorValue的值和我们data中的数据进行绑定，当data中的colorValue发生改变时，c
阅读全文
摘要：.lazy 在默认情况下，vmodel在每次input事件触发后，输入框的值会与数据进行同步， 可以添加lazy修饰符，从而转化为在change事件之后进行同步，如下： <!-- 在change时而非input时更新 --> <input type="text" v-model.lazy="msg"
阅读全文
摘要：使用v-model指令实现双向数据绑定的集合 v-model是v-on和v-bind指令的语法糖（指令集合） 可以使用v-model指令在表单 input、textarea、select等元素上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素。 加上v-model后，只要视图的数据发生
阅读全文
摘要：事件的类型有以下四类： js事件分为四类： 鼠标事件：click、mouseover、dbclick、mousedown、mouseout... 键盘事件：keydown、keypress、keyup.. 窗体事件:load、reseize、scroll... 表单事件:blur、focus、inp
阅读全文
摘要：我们用vue中的事件修饰符来做上一篇中event.preventDefault() 阻止事件的默认行为和event.stopPropagation() 阻止事件冒泡、传播事件。 <div id="app"> <div @click="outer" id="outer"> <div @click="m
阅读全文
摘要：原来js中的事件 ： event.preventDefault() 阻止事件的默认行为 event.stopPropagation() 阻止事件冒泡、传播 事件流的定义： 浏览器对于事件触发的执行流程 有下面三个div，他们是嵌套关系。如果每个div都触发了点击事件，那么是从内向外触发还是从外向内触
阅读全文
摘要：点击按钮的时候，次数加一 第一种：在click里面直接写js的代码 需求：使用@click=“counter+=1”,代码如下： <button type="button" @click="counter+=1">按钮1</button> <p>按钮1被点击的次数:{{counter}}</p> 第
阅读全文
摘要：为元素添加属性命令：v-on:事件名=“方法名”， 而方法则需要再Vue配置里面的methods属性里定义。 主要的事件名有click、dbclick，mouseover，mouseout，keydown，keypress，blur，focus <button v-on:click="fn1">我是
阅读全文
摘要：第一：加法运算符{{变量+n}} <p> num参与运算{{num+12}} </p> let vm = new Vue({ el : "#app", data : { num: 101, isOK: true, message: '你好', lan: 'Java', id: '1001', } }
阅读全文
摘要：前面学习的插值表达式{{}}，并不能更改标签的属性。因此，以下的写法是错误的， <h1 titlle="{{title}}" >我是h1标签的内容</h1> 如果想要给标签的属性绑定动态值,需要借助v-bind 的指令 语法：v-bind:原生HTML标签的属性="data中定义的值"，可以在vsc
阅读全文
摘要：<p> <!-- v-text指令的写法 指令必须写在开始标签上，作为标签的属性存在 <开始标签 v-text="data中的变量名"></结束标签> --> <span v-text="msg"></span> <!-- v-html的用法和v-text用法一直， 只不过通过v-html引入的会被
阅读全文
摘要：数据绑定常用有4种方式:{{}}、v-text、v-html、template {{}}数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>message:{{msg}}</span> mustache标签会被替代为对应数据对象航msg property的值
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：组件实现了扩展html元素，封装可用的代码，页面上每个独立的可视/可交互区域视为一个组件； 每个组件对应一个工程目录，组建所需要的各种资源在这个目录下就近维护。 页面不过是组件的容器，组件可以嵌套形成完整的页面。
阅读全文
摘要：MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。 MVVM指的是Model、View、ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示： 在MVVM概念中： Model表示当前页面渲染时所依赖的数据源。 View表示当前页面所渲染的Dom结构。 ViewModel表示
阅读全文
