Vue教程
文章平均质量分 77
Vue基础教程
Dormiveglia-flx
我陪你走的路,你不能忘~
因为那是我,最快乐的时光
展开
-
vue教程——13 Vuex
说白了,就是多个页面共同维护一组数据的状态。比如有一组数据dataS;A页面改变了这组数据B页面此时也需要监听到这组数据的变化随之做出自己的处理。例如,A页面修改了用户名,B页面这个时候也需要监听到用户名的修改并渲染到页面上。A页面改变数据B页面拿到数据并监听数据,其实这些就是vuex的操作。原创 2023-04-16 22:15:19 · 409 阅读 · 0 评论 -
vue教程——12 ref获取DOM元素和组件与watch-监听路由地址的改变
vue教程——12 ref获取DOM元素和组件与watch-监听路由地址的改变一 ref获取DOM元素和组件二 watch-监听路由地址的改变一看就会系列,在这不多做解释一 ref获取DOM元素和组件<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <!-- 引入vue.js原创 2021-05-14 15:48:20 · 542 阅读 · 0 评论 -
vue教程——12 vue动画
vue教程——12 vue动画一 vue动画入门 ``二 使用第三方动画库2.1 下载第三方动画库,举例使用的是animate.css2.2 ``一 vue动画入门 <transition>vue动画的用法:<transition>+元素的删除或者添加元素的添加或删除操作有:v-if(条件渲染)v-show(条件展示)动态组件在组建的根节点上,并且被vue实例DOM方法触发,如appendTo方法把组件添加到某个根节点上具体操作的原理是:vue监听到原创 2021-05-14 15:28:08 · 143 阅读 · 0 评论 -
vue教程——11 webpack
vue教程——11 webpack一 webpack介绍二 webpack的第一个小demo三 webpack的配置四 webpack的loader4.1 什么是loader4.2 webpack处理css文件五 小例子: webpack的less文件处理六 各种常用loader用法七 webpack的plugin八 webpack 构建本地服务器一 webpack介绍webpack是一个JavaScript应用的静态模块打包工具。webpack可以将模块资源打包成一个或者多个包原创 2021-05-12 22:13:57 · 203 阅读 · 0 评论 -
vue教程——10 前端模块化
vue教程——10 前端模块化一 为什么要模块化二 模块化分类CommonJS 模块化ES6 模块化一 为什么要模块化aaa.jsfunction sum(num1, num2) { return num1 + num2}var flag = true // 全局变量bbb.jsfunction sum(num1, num2) { return num1 + num2}var flag = false // 全局变量index.html原创 2021-05-12 22:46:07 · 125 阅读 · 0 评论 -
vue教程——09 组件化进阶
vue笔记——09 组件化进阶一 slot-插槽的基本使用。二 插槽的具体用法三 组件的作用域四 作用域插槽案例 v-slot一 slot-插槽的基本使用。插槽的具体作用:在组件内部,定制化自己喜欢的内容。二 插槽的具体用法具名插槽可以让插槽按指定的顺序填充,而没有具名的插槽是按照你填充的顺序排列的,而具名插槽可以自定义排列<!-- 父组件 --> <div id="app"> <cpn> <span原创 2021-04-20 21:17:46 · 166 阅读 · 0 评论 -
vue教程——08 组件化开发
vue笔记——08 组件化开发一 组件化开发的概念。二 全局组件和局部组件一 组件化开发的概念。所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,如果项目比较复杂,可以极大简化代码量,并且对后期的需求变更和维护也更加友好。二 全局组件和局部组件组件的注册方式有两种,一种是全局组件一种是局部组件。全局注册,通过 Vue.component。局部注册,通过原创 2021-04-20 13:46:03 · 142 阅读 · 0 评论 -
vue教程——07 Vue生命周期和路由
vue教程——08 Vue生命周期和路由一 vue生命周期二 vue路由一 vue生命周期大白话:beforeCreate( 创建前 ):此时vue刚实例化完,数据观测和事件配置还有被调用。此时组件的选项对象还未创建,el更没挂在。因此,这个时候无法访问methods, data, computed等上的方法和数据。created ( 创建后 ):在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el依然没有挂载。因此原创 2021-12-23 00:05:20 · 1592 阅读 · 2 评论 -
vue教程——06 计算属性与Watch监听
vue笔记——06 计算属性与Waatch监听一 计算属性的基本使用。二 计算属性的get与 set方法三 计算属性的缓存四 Watch监听五 watch使用举例一 计算属性的基本使用。计算属性的两点通俗易懂理解:1 computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;2 computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了原创 2021-04-19 22:17:46 · 200 阅读 · 0 评论 -
vue教程——05 v-model 双向绑定
vue笔记——05 v-model 双向绑定一 v-model的基本使用。二 v-model结合radio类型使用三 v-model结合checkbox类型四 v-model结合select类型一 v-model的基本使用。v-model双向绑定,既输入框的value改变,对应的message对象值也会改变,修改message的值,input的value也会随之改变。无论改变那个值,另外一个值都会变化。 <div id="app"> <!-- 输入框内容修改,me原创 2021-04-09 14:11:08 · 182 阅读 · 0 评论 -
vue教程——04 动态绑定属性
vue笔记——04 动态绑定属性一 v-bind的基本使用二 v-bind动态绑定class(对象语法)三 v-bind动态绑定class(数组用法)四 v-bind动态绑定style(对象语法)五 v-bind动态绑定style(数组语法)一 v-bind的基本使用v-bind用于动态的绑定数据和元素属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-04-08 17:11:40 · 217 阅读 · 0 评论 -
vue教程——03 插值操作
vue笔记——03 插值操作一 Mustache语法二 v-once三 v-html四 v-text五 v-cloak一 Mustache语法在vue对象挂载的dom元素中,{{}}不仅可以直接写变量,还可以写简单表达式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2021-04-08 16:01:46 · 226 阅读 · 3 评论 -
vue教程——02 初识Vue
vue笔记——02 初识Vue一 vue是声明式编程,区别于JS的命令式编程。1.1 原生js做法(命令式编程)1.2 声明式编程二 Vue列表的展示(v-for)一 vue是声明式编程,区别于JS的命令式编程。1.1 原生js做法(命令式编程)创建div元素,设置id属性定义一个变量叫message将message变量放在div元素中显示修改message数据将修改的元素替换到div1.2 声明式编程 vue写法(声明式)创建一个div元素,设置id属性定义一个vue原创 2021-04-07 15:37:26 · 192 阅读 · 3 评论 -
vue教程——01 ES6补充
vue笔记——01 ES6补充一 JS 变量的全局作用域、局部作用域、ES6块级作用域的区别二 let与const的用在哪?三 箭头函数语法四 ES6 中部分高阶函数的用法一 JS 变量的全局作用域、局部作用域、ES6块级作用域的区别1.1 全局作用域:用 var 在全局(函数外)声明的所有变量,都具有全局作用域,即: 网页中所有脚本和函数均可使用。var carName = " bwm"; // 此处可调用 carName 变量function myFunction() {原创 2021-04-07 15:15:11 · 215 阅读 · 2 评论