m0_44974944-CSDN博客

转载 vue3+vant按需引入报错，Failed to resolve import “E:/code/baidu/node_mod在这里插入代码片ules/vant/lib/vant/es/nav-ba

vue3+vant按需引入报错，Failed to resolve import "E:/code/baidu/node_mod在这里插入代码片ules/vant/lib/vant/es/nav-bar/style" from "src\main.js".

2022-06-07 14:30:11 3494

原创模拟数据mockjs

模拟数据mockjs创建mockjs模拟数据需要三个步骤下载npm install mockjs在src包中创建mock文件夹，在文件夹中创建index.js和types文件夹，里面存放需要模拟的数据。在types文件中加入需要模拟的数据在mock文件的index.js中进行遍历获取import Vue from 'vue'import path from 'path'// 解析types目录下的文件const files = require.context(

2021-11-08 13:44:36 286

原创 v-for、v-model、v-show、v-on小黄记事本案例

v-for、v-model、v-show、v-on小黄记事本案例响应式数组方法：push()添加pop()删除数组最后一个元素shift()删除数组的第一个元素unshift()在数组最前面添加元素splice()的作用：删除元素，插入元素，替换元素。删除元素：第二个参数传入要删的几个元素（如果没有将删除后面所有元素）。替换元素：第二个参数，表示我们要替换几个元素，后面的用于替换前面的元素。插入元素：第二个参数，传入数据，并且后面要插入的元素。sort(

2020-09-25 19:40:35 223

原创 Vue插值指令4

Vue插值指令41.v-model v-model指令的作用是便捷设置和获取表单元素的值。绑定数据<<------->>修改表单（双向数据绑定） <body> <div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> &lt

2020-09-25 10:43:36 195

原创 Vue插值指令3

Vue插值指令31.v-if、v-else v-if条件为false时，不会有元素在dom中。（当只有一次切换时，使用v-if）<body> <div id="app"> <h2 v-if="scroce>=90">优秀</h2> <h2 v-else-if="scroce>=80">很好</h2> <h2 v-else="scroce>=70"&

2020-09-24 20:18:51 162

原创 Vue插值指令2

Vue插值指令21.v-bind 语法糖: : 可动态绑定事件元素属性，例如图片src、链接、title、:style样式。绑定图片src、链接。<body> <div id="app">  <img :src="imgUrl" alt=""> <a :href="aUrl">百度一下</a>

2020-09-24 19:38:47 93

原创 v-text和v-on计算器案例

v-text和v-on计算器案例计算器案例步骤：data中定义数据: nummethods中添加两个方法：add(添加) sub(递减)使用v-text将num设置给span标签使用v-on将add,sub分别绑定给+ - 按钮、累加的逻辑：小于10累加，否者提示递减逻辑：大于0递减，否则提示css样式*{ margin:0; padding: 0;}.input-num{ width: 330px; height: 100px;

2020-09-24 14:56:14 182

原创 Vue插值指令1

Vue插值指令1.v-once 只显示第一次{{xxx}}中渲染的数据，当{{xxx}}对应的值改变也不会跟着改变。<body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../js/vue.js"></script&

2020-09-23 20:46:12 143

原创 Vue中的MVVM

Vue中的MVVMView层：视图层在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。Model层：数据层数据可能是固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。VueModel层：视图模型层视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，

2020-09-23 10:57:20 136

原创体验vue的响应式

体验vue的响应式el: 挂载点用于挂载要管理的元素data:数据对象 vue中用到的对象数据定义在data中 data中可以写复杂的类型的数据渲染复杂类型的数据时，遵守js语法即可<body> <div id="app"> <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script&gt

2020-09-23 10:22:09 79

原创 vue.js的安装

vue.js的安装方式一：直接CDN引入可以选择开发环境版本还是生产环境版本 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue"></script&g

2020-09-23 09:53:24 113

m0_44974944的博客