<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head> <script src="./vue.js"></script> <body><div id="app"><my-com></my-com> <!--直接写生组件名称就可以将template:‘<div> hello World </div>‘ 中的文字显示出来 --></div></body> </html> //创...
Vue.component使用 一：新建一个 component-moke1.vue 文件<template><div class="component-moke1">子组件 componentmoke1</div> </template><script> </script><style scoped lang="less"> .component-moke1{... } </style> 在 main.js 中全局引入// main.js文件 import Vue from ‘vue‘ // 路径引入组件componentmoke1 import componentmoke1 from "./moke/component-moke1.vue";// 注册组件 Vue.component(‘compon...
可以看到按理说<tr>该出现在<table>里面但是出现在外面原因在这里于是乎，把代码改成 、、就可以了 平级问题' ref='nofollow'>vue中使用组件，但是组件与 平级问题 原文：https://www.cnblogs.com/huifeidezhuzai/p/10168089.html
在vue开发中，我们经常需要在子组件使用父组件的数据，父组件使用子组件的数据，其实vue提供了这两个方法。1.子组件向父组件传值，在父组件内声明变量，子组件接受用props：例如.父组件： <template> <div> {{message }}{{num}} <br /> <hello :num="num"></hello> </div> </template> <script> import hello from "@/components/HelloWorld" export default { data(){ return{ message:"我是父组件我要传的值是：", num:10, } }, ...
模块化开发是保证每个文件都是独立的模块，不受外界干扰，提高性能，便于后期维护与团队开发。 可以引入官网的模块，也可以自定义模块。使用require()引入需要使用的模块，自定义的模块在使用之前需要通过module.exports 暴露出去。通过npm init -y 下载package.json文件管理维护模块，其中 main 为入口文件 ，dependencies 指定项目开发与上线需要的模块 ，devdependeciens 指定项目开发中需要而上线时不需要的模块。var as=requ...
一、组件间的通信 组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。如下图所示：二、 Prop — 父组件传递数据给子组件 ...
。。。啥也不说了，难受啊toggle-switch.vue<template><label role="checkbox" :class="[‘switch‘, { toggled }]"><input type="checkbox"class="switch-input"@change="toggle"/><div class="switch-core":style="{backgroundColor: toggled ? colorChecked : colorUnchecked}"><div class="switch-button":style="{transition: `transform ${speed}ms`,transform: toggled ? null: `translate3d(32px, 0px, 0px)`}"></div></d...
组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用 可以相对于理解成封装承一个小模块，能够重复方便使用.组件分为 根组件，全局组件，局部组件 根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件 全局组件： 不用注册，就可以称为任何一个组件的子组件 局部组件： 必须注册，才可以称为注册该局部组件的子组件 局部组件创建一个局部组件1.创...
实现样式 准备工作，先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" class="mytree"><el-tree:data="data"show-checkboxnode-key="id":default-expand-all="true":props="defaultProps"></el-tree></span> 接下来修改css ，注： 我使用的是 scss，less 也行 .mytree /deep/ {.el-tree > .el-tree-node:after {border-top: none;}.el-tree-node {position: relative;padding-left:...
1.子组件给父组件传递数据 <body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script> </body>通过v-bind动态绑...
<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div> </template> <script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}} </script> <...
我后端的，刚接触vue个星期，根据需求写了个上传控件，很灵活的。没有看element el-upload源码，样式用的element的。感觉vue确实好用。<!-- 单文件上传组件 --><template><div><input type="file" id="file" hidden @change="fileChange" :accept="accept"><div v-if="upMode==‘url‘" style="width: 100%;display:inline-flex;"><el-input :value="path" disabled></el-input><el-button size="small" type="primary" @click="bt...
适用于vue的城市选择组件仓库地址基本功能：支持全选、反选以及全部清空。支持按拼音筛选。勾选省份将会勾选省份下所有城市。返回数据可灵活处理。安装npm install cn-region-picker # 或者 yarn add cn-region-picker用法组件引入： // import包 import CnRegionPicker from 'cn-region-picker'// use Vue.use(CnRegionPicker)使用： v-model="pickCity"placeholder="城市" > </cn-region-picker><!-- 省略代码 --> data () {ret...
涉及的平台移动端一.公共样式常用变量 var.scss颜色模块主题色、状态色、文本色、灰度色（边框和分隔线）字体字体、大小、行间距 2.控件 3. 三大模块样式、有哪些控件原文：https://www.cnblogs.com/yuxina/p/10173644.html
<div id="app"> {{msg}} <logn v-bind:fuzujian="msg" ></logn> app控制的区域为父组件 logn为私有的子组件 </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"这是父组件的内容" }, methods: {}, components:{ data(){ return{ info:"<h1 >这是私有组件的data值</h1>", ...