vue
关注
分享
扫一扫
科学的发展-只不过是读大自然写的代码
科学的发展-只不过是读大自然写的代码
展开
-
vue 简单实验 自定义组件 独立模块
vue 简单实验 自定义组件 独立模块原创 2023-08-25 11:01:45 · 358 阅读 · 0 评论 -
vue 简单实验 自定义组件 局部注册
vue 简单实验 自定义组件 局部注册原创 2023-08-25 10:22:34 · 793 阅读 · 0 评论 -
vue 简单实验 自定义组件 传参数 props
vue 简单实验 自定义组件 传参数 props原创 2023-08-23 13:07:47 · 813 阅读 · 0 评论 -
vue 简单实验 自定义组件 综合应用 传参数 循环
vue 简单实验 自定义组件 综合应用 传参数 循环原创 2023-08-23 11:18:18 · 374 阅读 · 0 评论 -
vue 简单实验 自定义组件 component
vue 简单实验 自定义组件 component原创 2023-08-23 10:58:13 · 349 阅读 · 0 评论 -
vue 简单实验 v-for 循环
vue 简单实验 v-for 循环原创 2023-08-23 10:38:51 · 346 阅读 · 0 评论 -
vue 简单实验 v-if 条件判定
vue 简单实验 v-if 条件判定原创 2023-08-23 10:36:32 · 301 阅读 · 0 评论 -
vue 简单实验 v-model 变量和htm值双向绑定
vue 简单实验 v-model 变量和htm值双向绑定原创 2023-08-23 10:32:50 · 316 阅读 · 0 评论 -
vue 简单实验 v-bind 变量与html属性绑定
vue 简单实验 v-bind 变量与html属性绑定原创 2023-08-23 10:16:06 · 1373 阅读 · 0 评论 -
vue 简单实验 数据更新
vue 简单实验 数据更新原创 2023-08-23 10:06:42 · 302 阅读 · 0 评论 -
vue-组件通信-发送接收-数据总线方式模拟
<!DOCTYPE html><html><head><meta charset="utf-8"><title>传参测试</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div id="app"> <my-a>.原创 2020-10-17 08:21:40 · 185 阅读 · 0 评论 -
vue-组件间传参实验-v-on+$emit
1.实验1代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>传参测试</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> <div id="app">原创 2020-10-17 07:59:21 · 349 阅读 · 0 评论 -
vue-传参测试
概述父亲控件通过参数将数据传递给子控件1.代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>传参测试</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> &.原创 2020-10-15 21:47:58 · 157 阅读 · 0 评论 -
vue-$mount实验
概述：$mount作用：把 html控件和vue对象绑定。举例：vm.$mount('#app');解释：vue对象.$mount('#html的id');1.代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1原创 2020-10-15 16:57:13 · 234 阅读 · 0 评论 -
vue-框架实验-ifarame动态加载
1.vue实验1.1 import1.2push应用举例import(path + componentName + '.js').then((component) => { this.dynamicComps.push({name: componentName}); });2.工程代码2.1 index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...原创 2020-10-12 21:58:33 · 356 阅读 · 0 评论 -
import/export实验-from origin ‘null‘ has been blocked by CORS policy:
1.问题Access to script at 'file:///D:/java/tomcat8-ac/webapps/web1/imt.js' 访问'file:///D:/java/tomcat8-ac/webapps/web1/imt.js'from origin 'null' has been blocked by CORS policy: 从原点“null”已被CORS策略阻止:Cross origin requests are only supported for protoc.原创 2020-10-11 17:15:32 · 5423 阅读 · 9 评论 -
vue组件间通信方式
1.父组件向子组件传值//App.vue父组件<template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名 </div></template><script>import Users from "./components/Users"export default { name.原创 2020-10-10 19:40:56 · 156 阅读 · 0 评论 -
element-ui中表单验证的三种方式
1.表单上加rules1.1代码<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable></.原创 2020-09-27 17:59:08 · 1533 阅读 · 0 评论 -
element-内置过渡动画-fade 淡入淡出
1.代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style type="text/css">.transition-box.原创 2020-06-21 21:02:53 · 5011 阅读 · 1 评论 -
vue-element-hello word
1.代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <div id="app"&g.原创 2020-06-21 20:52:51 · 513 阅读 · 1 评论 -
vue-记忆-Prop 验证
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD:.原创 2020-06-21 16:58:51 · 226 阅读 · 0 评论 -
vue-过滤器
1 代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><d.原创 2020-06-21 14:50:16 · 197 阅读 · 1 评论 -
vue-记忆-模板语法
1.语法概要1.1{{文本}}1.2 v-html 以html方式表示内容1.3 v-bind 用于属性的绑定，相当于给原有的html属性赋值。1.4 v-model 用于数据和控件的双向绑定。2.常用语法2.1文本<div id="app"> <p>{{ message }}</p></div>2.2v-Html<div id="app"> <div v-html="message"&.原创 2020-06-21 14:37:39 · 189 阅读 · 0 评论 -
Vue-监听属性
1代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Vue-监听属性</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>&.原创 2020-06-21 10:21:23 · 286 阅读 · 0 评论 -
vue-组件
1.简单组件<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Vue-简单组件试验</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>.原创 2020-06-20 22:15:59 · 133 阅读 · 0 评论 -
Vue-监听属性/双向数据绑定
1.代码 <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue-监听属性/双向数据绑定</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div id = "a..原创 2020-06-13 07:59:44 · 245 阅读 · 1 评论 -
vue-自定义事件
代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue-自定义事件</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <原创 2020-06-12 22:38:54 · 257 阅读 · 0 评论 -
vue-自定义指令
自定义指令1.代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue-自定义指令</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id="app".原创 2020-06-12 22:23:35 · 145 阅读 · 0 评论 -
vue-v-mode/v-bind
1.代码<html><head><title>v_bind</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><style>.class1{ background: #444; color: #eee;}</style><body><原创 2020-06-02 13:51:29 · 200 阅读 · 0 评论 -
Vue-vue的非自定义属性-$的作用
1.代码<html><head> <title>简单mvvm</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> <div id="vue_det"> 数据1:{{d1}} 数据2:{{d2}} </div>原创 2020-06-02 13:30:20 · 688 阅读 · 0 评论 -
vue-简介实践-mvvm理解
1.代码<html><head> <title>简单mvvm</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> <div id="vue_det"> 数据1:{{d1}} 数据2:{{d2}} </div>原创 2020-06-02 13:11:42 · 176 阅读 · 0 评论 -
vue-简介实践-函数
1.代码<html><head> <title>简单实例</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> <div id="vue_det"> {{fun()}} </div> <script type="text.原创 2020-06-02 13:10:06 · 130 阅读 · 0 评论 -
vue-最简单的实践-数据实验
代码<html><head> <title>简单实例</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body> <div id="vue_det"> {{site}} </div> <script type="text/jav原创 2020-06-02 13:08:34 · 200 阅读 · 0 评论