vue | 易学教程

vue购物车案列

阅读更多关于 vue购物车案列

<!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> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="payFor"> <div v-if="this.books.length"> <table> <thead> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(items,index) in books"> <td>{{items.id}}</td> <td>{{items.name}}</td> <td>{{items.date}}</td> <td>{{items.price|showPrice}}</td> <td> <button @click=

初学Vue(记事本)

阅读更多关于初学Vue(记事本)

增删同步，清空， v- for(item,index) v- model =“message” @click = “del” @keyup.enter = “add” v-show =“list.length!=0” < ! DOCTYPE html > < html > < head > < title > Vue < / title > < style > #app { margin : 0 auto ; /* border: 1px solid red; */ width : 300 px ; background - color : #fff ; } ul { padding : 0 ; margin : 0 ; } input { width : 200 px ; height : 35 px ; } li { list - style : none ; border : 1 px solid # 666 ; width : 200 px ; height : 30 px ; } button . del { margin - left : 115 px ; display : none ; } li : hover button { display : inline - block ; } . bottom { border : 1 px solid # 666 ;

Webpack学习二

阅读更多关于 Webpack学习二

Webpack 配置Vue //使用前先要导入 import Vue from 'vue' const app = new Vue({ el: '#app', data: { message: '你好', } }) 然后在webpack.config.js中进行配置： resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } el和template的关系：如果同时有el和template，后者会替换前者。 plugin: 通常用于对某个现有架构进行扩展，对webpack现有功能的各种扩展，比如打包优化，压缩文件等 loader和plugin的区别： loader主要用于转换某些类型的模块，它是一个转换器 plugin是插件，它是对webpack本身的扩展，是一个扩展器 plugin: [ //最简单的插件，打包后会在Js文件中增加一段注释 new webpack.BannerPlugin('版权所有，翻版必究'), //HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html new webpack.HtmlWebpackPlugin({ template: 'index.html' }) ] 来源： https://www.cnblogs.com

vue 引入wangeditor(轻量级富文本框)

阅读更多关于 vue 引入wangeditor(轻量级富文本框)

1 下载 //（注意 wangeditor 全部是小写字母） npm install wangeditor 2 项目中引用 import E from 'wangeditor' 3 在这里插入代码片 <div id="editor" class="editor"></div> <button v-on:click="getContent">查看内容</button> 4 js 代码 export default { name: 'editor', data () { return { editorContent: ''，//定义为全局变量 editor:'' //定义为全局变量 } }, methods: { getContent: function () { this.editor.txt.html('') //清空富文本框 alert(this.editorContent) this.editor.txt.html(“内容”); //富文本框设置内容 } }, mounted() { var editor = new E('#editorElem') editor.customConfig.onchange = (html) => { this.editorContent = html //内容复制 } editor.create() } } 来源： CSDN 作者： ——爱

VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

阅读更多关于 VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。开关控件（Switch）的实现效果：给组件取个好听的名字，叫RxSwitch吧。调用代码： <RxSwitch :onValue = "'on-value'" :offValue = "'off-value'" v-model = "inputValue" > </RxSwitch> 组件代码： <template> <div class="rx-switch" :class="onValue === inputValue? 'on' : ''" @click="click"> </div> </template> <script> export default { name: 'RxSwitch', props:{ value:{ default:'' }, onValue:{ default:'on' }, offValue:{ default:'off' }, }, computed:{ inputValue: { get:function() { return this.value; }

Vue中的scoped和scoped穿透

阅读更多关于 Vue中的scoped和scoped穿透

1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 2.scoped的实现原理 Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码: 1 <style scoped lang="less"> 2 .example{ 3 color:red; 4 } 5 </style> 6 <template> 7 <div class="example">scoped测试案例</div> 8 </template> 转译后: .example[data-v-5558831a] { color: red; } <template> <div class="example" data-v-5558831a>scoped测试案例</div> </template> 既:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。总结：scoped的渲染规则： 1

vue框架中实现今天昨天前天最近时间

阅读更多关于 vue框架中实现今天昨天前天最近时间

点击下拉出几个选项，根据日期不同来过滤数据。看图--（忽略小梨子，这是日常练手页面）（element ui）点击today-当天日期点击last three days 点击custom,并且实现右侧结束日期必须大于左侧（左边先选，右边无法选择比左边小的）首先呢--先弄它个按钮下拉玩玩，，下拉数据v-for遍历， @click.native="filterTime(menu)" 根据interval不同来判断不同时间段（在data--menus中） <el-dropdown size="small" trigger="click"> <el-button type="primary"> paid Time<i class="el-icon-arrow-down el-icon--right" /> </el-button> <el-dropdown-menu> <el-dropdown-item v-for="menu in menus" @click.native="filterTime(menu)"> {{ menu.title }} </el-dropdown-item> </el-dropdown-menu> </el-dropdown> 获取到的日期渲染到页面上-- <span v-if="timeData"> <el-tag color="white" style

vue调用Moment显示时间

阅读更多关于 vue调用Moment显示时间

1.下载 Moment 网站: http://momentjs.cn/ 2创建一个vue的文本格式 admin.vue 3.定义给值代码如下 <template> <div style="backgroundColor: black;"> <div> <div style="width: 40%; float: left"> <el-card class="box-card" style="margin: 50px; backgroundColor: black; color: PaleTurquoise;"> <div slot="header" class="clearfix"> <span style="font-size: 36px; color: PowderBlue; ">珠海猪场数据展视 <span>{{ now | dateformat('YYYY-MM-DD HH:mm:ss') }}</span></span> <el-button style="float: right; padding: 3px 0" type="text"></el-button> </div> <div style="font-size: 26px; color: LightGoldenrodYellow;"> <p>今日已入场 :<span id=""> 1000<

vue中同一个页面多次使用同一个组件的相互干扰问题

阅读更多关于 vue中同一个页面多次使用同一个组件的相互干扰问题

我们知道，vue有一个重要的理念就是组件化，即将重复使用的功能点抽提出来作为组件，需要使用的页面只需要引用该组件即可得到相应的功能点。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。但是当在同一个页面多次使用同一个组件的时候，如果只创建了一个实例，但是却对这个实例调用了两次，这两个调用就会造成相互干扰的问题，因为这时候这两个调用访问的是同一个作用域。比如有现在有一个yanggb组件，我引入到我的页面中（创建了一个组件实例），然后调用两次（在页面上调用组件实例两次），那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。 // 引用yanggb组件并创建一个实例 const yanggb = () => import('@/components/yanggb') // 注册该组件实例 components: { yanggb } // 在页面上两次调用该组件实例 <yanggb :value="100"></yanggb> <yanggb></yanggb> 这个时候，如果该组件是直接显示的

vue + elementUI动态生成表格，并实现内容可编辑

阅读更多关于 vue + elementUI动态生成表格，并实现内容可编辑

1. 首先最基本的，vue elementUI根据数据生成固定表项的表格从官网摘个Demo过来： < el - table : data = "tableData" style = "width: 100%" > < el - table - column prop = "date" label = "日期" width = "180" > < / el - table - column > < el - table - column prop = "name" label = "姓名" width = "180" > < / el - table - column > < el - table - column prop = "address" label = "地址" > < / el - table - column > < / el - table > // tableData: [ // {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'}, // {date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'}] 样式如下： 2. 如果表项也动态生成呢？ // 实际返回的数据一般是： testDatas : [ { 'No' : 1

订阅 vue