最近倒腾了一会vue，有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo，(好土掩面逃~）;1. methodsmethods类似react中组件的方法，不同的是vue采用的与html绑定事件。给个例子/*html*/<input type="button" value="点击" v-on:click=handlClick id="app">/*js*/var app = new Vue({el:#app,methods:{handlClick:function(){alert(succeed!);},}}) 通过在input标签中的vue命令 v-on命令绑定handlClick事...
这几天新项目用vue2.0开发，由于之前没用过vue，拿到项目框架看到都是.vue文件，本文主要和大家介绍vue2.0开发入门笔记之.vue文件的生成和使用 ,非常具有实用价值，需要的朋友可以参考下，希望能帮助到大家。不知道怎么用，以下是关于.vue文件的发现：1、一个.vue文件是一个封装的组件，在.vue文件里可以写 html, css, js其中template 中写html 代码，其实就是定义模板。2、各个.vue之间样式不是独立的，同一选择器在不同的.vue里只...
由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。 这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。 所以理论上有2种方法解决： 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞，而且没啥资料，放弃。2 的话比较可行。 部分禁止 pjax 打开 publi...
1.组件是什么 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织； 1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#a...
废话少说，代码如下所述： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue实例中的数据,事件和方法</title> </head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="root"><h1 v-text="number"></h1></div><script type="text/javascript">new Vue({ el:"#root",data:{msg: "world",number:123}})</script> </body> </html>显示123 <!DOCTYPE html> <html lang=...
首先安装better-scroll npm i better-scroll -S goods页面模板 <template><div class="goods"><div class="menu-wrapper" ref="menuWrapper"><ul><li v-for="item in goods" class="menu-item"><span class="text border-1px"><span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span></li></ul></div><div class="foods-wrapper" ref="foodsWrapper"><ul><li v-for="item in goods" ><...
Vue —$set 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () {return {student: {name: ,sex: }} } mounted () { // ——钩子函数，实例挂载之后this.student.age = 24 }原因是：受 ES5 ...
提前申明 注意：自己对vue脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方 webpack 一种项目构建工具，可以将css和js压缩成一个文件。此外，可以提供测试用服务器。使用webpack时，可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出，其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用，但是在导入时，必须知道导入导出对象的名字...
1.路径：http://localhost:8081/#/test?name=1 <router-link :to="{path:/test,query: {name: id}}">跳转</router-link>(id是参数) 使用：this.$route.query.id 2.路径：http://localhost:8081/#/test/1 <router-link :to="/test/+id">跳转</router-link>(id是参数) 路由：使用：this.$route.params.id（这个id给上图路由的配置有关） this.$route是一个数组，里面包含路由的所有信息 注意：router-link中链接如果是‘/开始就是从根...
本文介绍了vue引入swiper插件，分享给大家，希望对大家有帮助步骤一：安装vue， $ npm install vue 步骤二：创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目，最主要的就是下面的步骤 步骤三：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。 步骤四： 安装runtime： 终端命令：npm install babel-runtime 步...
之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。当然，使用就安装 npm install cropperjs接着再引入 import Cropper from 'cropperjs'下面是源码<template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img id="image" :src="url" alt="Picture"> </div> <button type="button" id="button" @click="crop">确定</button> </div> <div style=...
昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件，由于个人有比较喜欢音乐，所以就拿过来玩一玩，感觉还是比较实用的，界面美观。首先，我们先安装 npm install vue-aplayer --save ，之后在组件中引入 import VueAplayer from vue-aplayer，下面就是源码，可供参考： <template> <div> <div style="padding:10px 0;"> <a-player :music="songList" :showlrc="3" :narrow="false" theme="#b7daff" mode="circulation" v-if...
1.在很多的项目中，我们都会用到日期插件，然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了，bootstrap datetimepicker修改的日期不会同步到data中，下面看我的解决方案： <template><div id="time"><span class="select-box-title">选择发送时间：</span><input class="form-control select-box-input" v-model="time" type="text"id="messageSendTime"></div></div> </template><script>import $ from jqu...
之前一直接触都是原始的前端模型，jquery+bootstrap，冗杂的dom操作，繁琐的更新绑定。接触vue后，对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建，由于之前的工作主要是基于java的服务端开发工作，对前端框架和组件的理解，不够深入，借此来记录在前端框架使用和构建中的点点滴滴。此分页组件参照于bootstrap-datatable底部分页开发完成，相关参数增加自定义功能。最终使用展现效果图如下，数据来源于cnodejs【https:/...
index.jsimport Vue from vue; import Vuex from vuex; import base from ./modules/base; import user from ./modules/user;Vue.use(Vuex);// store创建工厂 class storeFactory {static getInstance = () => {const store = new Vuex.Store({modules: {base,user},});return store;} }export default storeFactory.getInstance(); user.js文件：import storage from storejs; import userAPI from ../../api/user;/* eslint-di...