vue | 易学教程

从0开始探究vue-组件化-组件之间传值

阅读更多关于从0开始探究vue-组件化-组件之间传值

理解 Vue中有个非常重要的核心思想，就是组件化，组件化是为了代码复用什么是组件化组件化，就像一个电脑主机里的主板，有内存条的插口，有硬盘，光驱等等的插口，我们的项目，就像一个电脑主机，通过各种组件化的模块（硬盘、内存等），来拼合成一个完整的电脑。如图，每一个块都是一个组件，由许许多多的组件拼合而成，可以无限的嵌套下去组件化的好处模块复用，提高效率，让重复的代码只写一遍。预留个性化设置，可以保证模块，既通用，又可变。提高可维护性，如果一个项目多个页面使用了同一个组件（例如消息弹框），如果修改弹框样式，只需要修改这个模块即可。写法 cli模式组件部分 <template> <div></div> </template> <script> export default { name:"myAlert" }; <style></style> 使用者部分 <template> <div> <myAlert></myAlert>  </div> </template> <script> import myAlert from '@/components/alert.vue';//导入自己写的组件 export default { components:{myAlert}//在这个vue实例中注册组件 }; </script> <style><

Vue动态修改class

阅读更多关于 Vue动态修改class

#####对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class="{ 'active': isActive }" 1 判断是否绑定一个active :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 1 2 3 绑定并判断多个第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放在data里面） //也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样 :class="classObject" data() { return { classObject:{ active: true, sort:false } } } 第三种（使用computed属性） :class="classObject" data() { return { isActive: true, isSort: false } }, computed: { classObject: function () { return { active: this.isActive, sort:this.isSort } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

在vue中使用样式

阅读更多关于在vue中使用样式

1、使用class样式使用数组：<p :class="['italic']">随便输入一些文字内容</p> 数组中使用三元表达式：<p :class="['italic',flag? 'active':'']">内容</p 数组中嵌套对象：<p :class="['italic',{'active':flag}]">内容</p> 直接使用对象：<p :class="{italic:true,active:false}">内容</p> 2、使用内联样式直接在元素上通过:style的形式，书写样式对象将样式对象，定义到data中，并直接引用到:style中在：style 中通过数组，引用多个data上的样式对象来源： https://www.cnblogs.com/qijunjun/p/12391151.html

VUE环境搭建

阅读更多关于 VUE环境搭建

https://www.cnblogs.com/lq102855zm/p/7727310.html 一、先介绍一下我接下来要做的项目项目：ide可视化工具技术应用：　　Vue2.0（js框架）： https://cn.vuejs.org/ 　　ElementUi（饿了吗ui框架基于vue的）： http://element.eleme.io/#/zh-CN 　　Ecahrts（图表）： http://echarts.baidu.com/ 　　vue-power-drag（仿grister的vue拖拽插件）： https://xiongcaihu.github.io/#/ 项目介绍：ide要实现的是供企业或者个人编辑可视化图表，适应不同分辨率的屏幕，配置的基本默认样式达到客户要求，项目模块分为仪表盘、工作表、数据源、编辑图表等。二、项目环境搭建　　vue环境配置：　　首先安装node： http://www.runoob.com/nodejs/nodejs-install-setup.html 　　1、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 　　注：下面的npm可换成cnpm下载快　　2、安装webpack：npm install webpack -g 　　3

vue学习日记03

阅读更多关于 vue学习日记03

vue组件生命周期　　每个vue组件被创建的时候，都会经历一系列初始化过程。数据更新，组件销毁也都会触发一些钩子函数，让我们可以做一些操作。这一系列过程就是声明周期。生命周期主要分为3个阶段。具体如下：其中创建阶段和销毁阶段，都只会触发一次，更新阶段可以触发多次。每个阶段的钩子函数，所处理的事情如下　　　　　　　　写个计时器例子，刷新的页面的时候，触发创建的生命周期钩子函数，计时开始触发更新函数，返回主页，触发销毁。　　　　　　　来源： https://www.cnblogs.com/wangnothings/p/12390202.html

vue列表渲染

阅读更多关于 vue列表渲染

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="demo"> <p>v-for遍历数组</p> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}} ---{{p.age}} ---{{index}} ----- <button @click="del(index)">删除</button> <button @click="update(index,{name:'Cat',age:46})">更新</button> </li> </ul> <p>v-for遍历对象</p> <ui> <li v-for="(value,key) in persons[1]" :key="key"> {{key}}-----{{value}} </li> </ui> </div> <script type="text/javascript" src="lib/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: "#demo", data: { persons: [ //

Vue的基础理解(六)

阅读更多关于 Vue的基础理解(六)

Vue中 v-html有什么作用？会导致什么问题？ v-html可以用来识别HTML标签并渲染出去。导致问题：在网站上动态渲染html,很容易导致xss攻击，所以只能在可信内容上使用v-html，且永远不能用于用户提交的内容上。 keep-alive在vue中的作用是什么？ keep-alive是Vue提供的抽象组件，用来对组件进行缓存，从而节省性能，当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处如何新增自定义指令？除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注册全局指令 //自定义全局指令 v-focus Vue.directive('focus',{ //当绑定元素插入到DOM中 inserted:function(el,binding,vnode){ } }) 注册局部自定义指令，组件中接受directives的选项。 var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives:

vue入门一

阅读更多关于 vue入门一

一、什么是vue？　　是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。二、什么是MVVM呢? 　　看上面的图也许就不难理解了，MVVM它是模型-视图-视图模型的原理。说的再简单一点我们开发者做好viewModel这一块问题就不大了，操作数据就是操作视图（这里就无需再操作DOM了），因为它是连接model（模型）和view（视图）之间的桥梁。当然在此之前我们得了解到MVC，这个我就不做过多的介绍了。三、ES6部分知识的了解　　首先我们必须要知道，es6的速写属性，在对象里面如果名称是相同的那么我们直接可以简写，只留一个名称在里面即可。　　　　　　其次是在对象里面可以直接速写方法　　　　　　还有字符串模板等等，当然还有更多的我就不做过多的介绍了。。。。。。四、安装vue 　　vue的安装，这里也可以使用直接引用的方式，还有webpack的方式，我们这里就使用vue-cli的方式去搭建vue项目　　1.下载安装nodejs，这个我就不多说了，能走到vue来学习的肯定很多都是理解了的　　2.使用在对应文件夹使用指令 vue init webpack 即可下载安装，也可以使用指令在生成文件夹进行安装，当然我觉得挺麻烦的

【原创】从零开始搭建Electron+Vue+Webpack项目框架（六）Electron打包，同时构建客户端和web端

阅读更多关于【原创】从零开始搭建Electron+Vue+Webpack项目框架（六）Electron打包，同时构建客户端和web端

导航：（一）Electron跑起来（二）从零搭建Vue全家桶+webpack项目框架（三）Electron+Vue+Webpack，联合调试整个项目（四）Electron配置润色（五）预加载及自动更新（六）构建、发布整个项目（包括client和web）摘要：整个项目就剩最后一哆嗦了，但仅仅是当作demo模版来说，实际项目的话，还有很多需要细化的地方。项目完整代码： https://github.com/luohao8023/electron-vue-template ，随博客更新。一、打包客户端首先是要改一下build.js，把上篇文章没做的事儿给做了。上篇文章已经构建出了可执行文件目录app，这次我们要做的就是使用electron-builder把app目录打包为安装包。在之前的基础上引入electron-builder，然后对app目录进行打包： const builder = require('electron-builder'); // 在所有的打包逻辑执行完成之后，确认已经正确生成了app目录 builder.build().then(() => { del(['./pack/*.yaml', './pack/*.blockmap']); // 为了方便，打包完成之后我们打开文件管理器 openFileManager(); }); function

关于在VUE中封装一个Swiper组件的方法-----详解

阅读更多关于关于在VUE中封装一个Swiper组件的方法-----详解

swiper官网: https://www.swiper.com.cn/ 1.打开项目的根目录，然后打开命令窗口，引入swiper组件 npm install swiper@4.4.1 (@后为指定版本号，可写可不写,下面同理) cnpm i swiper@3.4.2 -S 2.在src/components下创建一个Swiper.vue的文件夹,用来存储公共部件 3.书写公共样式 a.记得留好slot插槽 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> </div> </template> b.引入Swiper 和它的css文件插槽工作后要进行new Swiper,然后引入.swiper-container <template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> </div> </template> <script> import Swiper from 'swiper' import 'swiper/css/swiper.css' export default { mounted(){ new Swiper("

订阅 vue