最近倒腾了一会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...