随笔分类 - 前端学习
自己看前端视频的一些基础学习，加油，颜孙达
摘要：我们用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表示
阅读全文
摘要：MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View、ViewModel，它把每个HTML页面都拆分成了这三个部分，如图所示： 在MVVM概念中： Model表示当前页面渲染时所依赖的数据源。 View表示当前页面所渲染的Dom结构。 ViewModel表示v
阅读全文
摘要：使用@的目的是不想用./ 。用./可读性很差，用@可以更好。
阅读全文
摘要：为了打包之前把dist底下的文件先删除了先，然后再进行打包，我们使用clean-webpack-plugin 安装 配置 将构造函数放入webpackPlugin中进行
阅读全文
摘要：运行npm run build后 出现了dist的目录 此目录里面存放的就是要发布的代码。 我们把dist打包，发给运维就可以进行发布了。
阅读全文
摘要：此时会报错，因为没有引入image相关的loader 安装 配置 如果图片比较小， 那么url-loader会自动给你转换为base64的图片，提升加载速度
阅读全文
摘要：loader的概述 在实际的开发过程中，webpack默认只能打包处理一.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack 默认处理不了。需要调用loader加载器才可以正常打包，否则会报错！ loader加载器的作用：协助webpack打包处理特定的文件模块。比如： css-lo
阅读全文
摘要：默认这两个文件都要有 不然的话 webpack打包的时候 是回报错的 使用npm install webpack-dev-server@3.11.2 -D 安装插件 增加serve参数 到此 我们修改index.js 可以实时刷新数据了，完美。 安装html-webpack-plugin npm i
阅读全文
摘要：学习目录 什么是webpack 1、webpack是一个工具，用来把前端工程化的。 2、它提供了友好的前端模块化开发支持，以及代码压缩混淆（能让文件体积更小）、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
阅读全文
浙公网安备 33010602011771号