随笔分类 -  Vue基础

和qmm学习的经历
vue中关于v-model和:model的理解
摘要：vue中关于v-model和:model的理解 v-model通常用于input的双向数据绑定 <input v-model=``"parentMsg"``>，也可以实现子组件到父组件数据的双向数据绑定 :model是v-bind:model的缩写``<child :model=``"msg"``> 阅读全文
posted @ 2021-09-10 11:50 ju-ruo 阅读(7190) 评论(0) 推荐(0)
VUE基础细节知识汇总
摘要：VUE基础细节知识汇总 1.v-model和：model的区别 v-model是vue.js中内置的双向数据绑定指令， 用于表单控件以外的标签是不起作用的 (即只对表单控件标签的数据双向绑定有效)。 :model相当于v-bind:model的缩写， v-bind动态绑定指令，默认情况下标签自带属性 阅读全文
posted @ 2021-07-23 16:03 ju-ruo 阅读(76) 评论(0) 推荐(0)
VUE组件注册，组件引用
摘要：全局定义 main.js//定义自定义组件 import earlyservice from './components/earlyservice' Vue.use(earlyservice) 使用 <earlyservice></earlyservice> 阅读全文
posted @ 2021-07-22 18:45 ju-ruo 阅读(101) 评论(0) 推荐(0)
搭建vue开发环境，创建第一个VUE项目，vue的版本环境主要分为2.x以及3.x
摘要：搭建vue开发环境，创建第一个VUE项目 vue的版本环境主要分为2.x以及3.x 搭建VUE环境 1、安装node.js环境 https://npm.taobao.org/mirrors/node （选择版本） 检查node.js的版本号 node -v npm -v (版本号) 2、安装cnpm 阅读全文
posted @ 2021-07-21 23:41 ju-ruo 阅读(351) 评论(0) 推荐(0)
vue_自定义表单验证
摘要：邮箱验证 var checkEmail=(rule,value,cb) => { //验证邮箱的正则表达式 const regEmail= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/ //另一种 const ds= /^([a-zA-Z0 阅读全文
posted @ 2021-06-18 01:39 ju-ruo 阅读(186) 评论(0) 推荐(0)
element-UI 表单校验规则
摘要：element-UI 表单校验规则 在form中 :rules=”校验数据对象“ <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> <!--用户名--> <el-form 阅读全文
posted @ 2021-06-13 11:41 ju-ruo 阅读(198) 评论(0) 推荐(0)
vue_表单作为一个数据对象
摘要：表单作为一个数据对象,里面的值作为数据对象的属性 <el-form :model="loginForm" label-width="0px" class="login_form"> ​ <!--用户名--> ​ <el-form-item> ​ <el-input v-model="loginFor 阅读全文
posted @ 2021-06-13 11:25 ju-ruo 阅读(448) 评论(0) 推荐(0)
VUEX
摘要：VUEX 1、安装 cnpm install vuex--save 2、导入，src下新建一个文件夹vuex，文件夹下新建一个store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); 3、state 相当于vue项目的 阅读全文
posted @ 2021-06-11 21:07 ju-ruo 阅读(70) 评论(0) 推荐(1)
vue_elementUI的全部引入
摘要：1、element UI的使用： 找方法：http://element.eleme.io/#/zh-CN/component/quickstart 2、安装 cnpm i element-ui -S -S表示 --save 3、在main.js中引入element UI的css和插件 import 阅读全文
posted @ 2021-06-11 20:27 ju-ruo 阅读(180) 评论(0) 推荐(0)
Vue_跳转页面的一些方法
摘要：1、 <router-link to="/home">首页</router-link> 2、 this.$router.push({path:'/content/495'}); this.$router.push({name:'news',params:{userId:123}}) 3、命名式路由 阅读全文
posted @ 2021-06-11 19:58 ju-ruo 阅读(134) 评论(0) 推荐(0)
Vue_动态路由两种方法
摘要：Vue_动态路由的配置以及使用 配置动态路由 routes:[ {path:'/user/:id',component:User} ] 在跳转页面放值 <router-link:to="'/user/'+key"><router-link> 在对应页面获取,一般写在生命周期函数中 console.l 阅读全文
posted @ 2021-06-09 16:41 ju-ruo 阅读(352) 评论(0) 推荐(0)
Vue_router
摘要：先介绍一个vue路由的官网 https://router.vuejs.org/ vue路由配置： 1，安装： npm install vue-router --save/npm install vue-router --save 2，引入并且Vue.use(VueRouter) 在main.js中· 阅读全文
posted @ 2021-06-09 15:57 ju-ruo 阅读(67) 评论(0) 推荐(0)
Vue中非父子组件之间进行传递数据
摘要：首先创建一个js类 VueEvent import Vue from 'vue' var VueEvent=new Vue(); export default VueEvent; 在传递数据的一方进行import <script> import VueEvent from '../model/vue 阅读全文
posted @ 2021-06-09 15:02 ju-ruo 阅读(110) 评论(0) 推荐(0)