- 博客(66)
- 收藏
- 关注
RSS订阅原创 Vue脚手架相关笔记（ref属性、props配置、mixin混入、scoped样式）
关于不同版本的Vue:1.vue.js 与vue.runtime.xxx .js的区别:(1).vue.js是完整版的Wue，包含:核心功能+模板解析器。(2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。...
2022-05-23 16:23:52
250
原创 如何配置Vue脚手架（Vue CLI）
第一步：用cmd打开命令提示符，输入命令行：npm config set registry https://registry.npm.taobao.org第二步：打开cmd，输入命令行：npm install -g @vue/cli ，中途可能会出现warn，但是不影响安装Vue CLI(要是进度条长时间无变化，可尝试敲回车键)第三步：一定要安装完再关闭当前的cmd页面，重新开一个新的cmd页面。第四步：切换到你要创建项目的目录，输入命令行：vue create xxxx
2022-05-23 11:28:44
1193
原创 Vue组件：非单文件组件及VueComponent
Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 三、使用组件(写组件标签) 一、如何定义一个组件？ 扩展(选项)使用创建，其中Options和New Vue(Options)时传入的那个Options几乎一样，但也有点区别； 区别如下： 1.el不要写，为什么？-最终所有的组件都要经过一个VM的管理，由VM中...
2022-05-22 14:24:57
196
原创 Vue中的生命周期
什么是生命周期？生命周期： 1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么： Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vml或组件实例对象。常用的生命周期钩子： 1. mounted：发送...
2022-05-21 12:45:45
156
原创 Vue中的自定义指令
自定义指令总结： 一、定义语法： (1).局部指令： new Vue({ new Vue({ directivesl {指令：配置对象} 或 directives(指令名：回调函数) }) ...
2022-05-21 12:45:14
1089
3
原创 Vue中的内置指令（汇总篇）
指令： v-bind:单向绑定解析表达式，可简写为：XXX v-model：双向数据绑定 v-for:遍历数组/对象/字符串 v-on：绑定事件监听，可简写为@ v-if:条件渲染(动态控制节点是否存存在) v-else：条件渲染(动态控制节点是否存存在) v-show:条件渲染(动态控制节点是否展示)v-text指令： 1.作用：向其所在的节点中...
2022-05-20 10:23:14
1513
原创 Vue中的过滤器
过滤器： 定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法： 1.注册过滤器： Vue.filter(name，callback)【全局】 或 new Vue{filters：{}}【局部】2.使用过滤器：{{xxx|过滤器名}}或 v-bind：属性="xxx|过滤器名"备注： 1.过滤器也可以接收额外参数、多个过滤器也可以串联 ...
2022-05-19 16:48:58
251
原创 Vue中关于收集表单数据
收集表单数据： 若： <input type="text"/>， 则v-model收集的是value值，用户输入的就是value值。 若： <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<input type="checkbox"/> 1.没有配置input的value属性，那么收集的就是check...
2022-05-19 14:26:21
903
1
原创 Vue中的列表渲染
v-for指令 1.用于展示列表数据 2.语法：v-for="(item,index) in xxx":key="yyy" 3.可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)面试题： react、vue中的key有什么作用?(key的内部原理) 1.虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时， Vue会根据【新数据】生成【新的虚 拟DOM】，随后Vue进行【新虚...
2022-05-19 11:25:59
215
原创 Vue中的条件渲染
条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可...
2022-05-19 11:17:36
626
原创 Vue中的绑定样式
绑定样式： 1.class样式 写法：class="xxx" xxx可以是字符串、对象、数组 字符串写法适用于：类名不确定，要动态获取 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 2.style样式 :s...
2022-05-19 11:13:48
443
原创 监视属性（侦听属性）的写法和深度监视
监视属性watch： 1.当被监视的属性发生变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视！ 3.监视的两种写法： (1).new Vue时传入watch配置watch:{ isHot:{ immediate:true,//初始化时让handler调用一下 // hand...
2022-05-17 10:33:22
415
原创 Vue计算属性实现及简写
计算属性 1.定义：要用的属性不存在，要通过已有的属性计算得来。 2.原理：底层借助了Object.defineproperty方法提供的getter和setter。 3.get函数什么时候执行？ (1).初次读取时会执行一次 (2).当依赖的数据发生改变时会被再次调用 4.优势：与methods实现相比，内部缓存机制(...
2022-05-16 11:42:40
439
原创 事件处理（修饰符&键盘事件）
事件的基本使用： 1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名 2.事件的回调需要配置在methods对象中，最终会在vm上 3.methods中配置的函数，不要使用箭头函数！否则this指向就不是vm了 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例 对象 ...
2022-05-15 23:35:09
186
原创 Vue中的数据代理
什么是数据代理 ？通过一个对象代理对另外一个对象中属性的值（读/写）Vue中的数据代理1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作(读/写)2.Vue中数据代理的好处： 更加方便的操作data中的数据3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上 为每一个添加到vm上的属性，都指定一个getter/s...
2022-05-15 00:18:41
186
原创 初始MVVM模型
<!-- 准备好一个容器 --> <div id="root"> <h1>学习名称：{{name}}</h1> <h1>学习地址：{{address}}</h1> <h1>测试一下1：{{1+1}}</h1> <h1>测试一下2：{{$options}}</h1> <h1>测试一下3：{{.
2022-05-14 16:06:06
154
原创 data与el的2种写法
<!-- 准备好一个容器 --> <div id="root"> <h1>你好，{{name}}</h1> </div><script> Vue.config.productionTip = false; // el的两种写法 // const v = new Vue({ // el:'#root',//第一种写法 // data:{ .
2022-05-13 16:28:35
290
原创 数据绑定：单向绑定（v-bind）和双向绑定（v-model）
<!-- 准备好一个容器 --> <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定：<input type="text" v-bind:value="name"> <br> 双向数据绑定：<input type="text" v-model:value="name"> --> <!-- 简写 --.
2022-05-13 12:19:47
1014
原创 Vue模板语法：插值语法和指令语法
<!-- 准备好一个容器 --> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <a v-bind:href="school.url.toUpperCase()" v-bind:x='hello'>点我去{{.
2022-05-13 11:46:02
263
原创 初识Vue
案例实现：用Vue写一个Hello World案例。<!-- 准备好一个容器 --> <div id="root"> <h1>Hello,{{name}}</h1> </div><script> Vue.config.productionTip = false;//阻止vue在启动时生成生产提示 // 创建Vue实例 const x = ne.
2022-05-12 17:54:12
145
原创 Vue简介
Vue的特点：采用组件化模式，提高代码复用率、且让代码更好维护。 声明式编码，让编码人员无需直接操作DOM，提高开发效率。 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
2022-05-12 16:25:54
98
原创 AJAX-nodemon自动重启工具安装及报错解决办法
电脑环境已安装node，未安装的可以先去node官网下载 VScode右键打开终端 输入命令行npm install -g nodemon 等待安装 输入命令行nodemon server.js 启动server.js文件，但是此时报错了： nodemon : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\nodemon.ps1，因为在此系 统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros...
2022-05-04 15:19:22
717
原创 利用函数来冒泡排序
代码块：<script> function sort(arr) { for(var i = 0;i <= arr.length - 1;i++){ for(var j = 0;j <= arr.length - i -1;j++){ if (arr[j + 1] > arr[j]) { var temp = arr[j];
2022-01-26 15:30:19
604
原创 利用函数 写一个翻转数组
代码块：function reserve(arr){ var newArr = []; for(var i = arr.length -1;i >= 0;i--){ newArr[newArr.length] = arr[i]; } return newArr; } var re = reserve([3,44,2]); console.log(re);
2022-01-26 14:57:27
841
原创 求输入1~50的数字但是只有5次的机会
<script> // 随堂笔记 // function getRadom(min,max){ // return Math.floor(Math.random() * (max - min)) + min; // } // var random = getRadom(1,10); // while(true){ // var num = prompt('猜数字，请输.
2022-01-26 14:43:11
379
原创 使用github生成在线前端项目链接
作为一个前端小白，一开始是想面试的时候可以让HR直观地看到我的前端项目（虽然也没什么好看的......），然后就在网上找方法可以怎么解决我的这个需求。直至昨天，参考各位大佬的笔记和博客，断断续续，摸索了好几天，总算有个自己的网址。看到的方法大致如下：一、使用花生壳软件进行远程连接，但是IP地址不固定，要想固定的ip地址话，得花钱（本人扣扣搜搜的）；二、买个阿里服务器（也要钱）；三、使用github进行远程仓库展示出来。第三个办法是今天的主题，但是从中也走了不少弯路，特此记下来一些比较有用的信息，供己
2021-10-12 16:05:04
5667
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人