<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><script src="../lib/vue.min.js"></script><link rel="stylesheet" href="../lib/bootstrap.min.css"><!--https://files.cnblogs.com/files/cgy-home/bootstrap.min.css--> </head> <body> <div id="app"><div class="panel panel-primary"><d...
工程结构 启动工程npm run devTodoList.vue<!--模板--><template><div><div><input class="item" v-model="inputValue"/><button @click="submit">提交</button><ul><todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="mydelete"></todo-item></ul></div></div></template><script> import TodoItem from ‘./components/TodoItem‘// 此处用来写逻辑,必须空出一行去写export defaul...
1.fetchfetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。fetch的优点：1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里2.更好更方便的写法具体的用法是：fetch(‘http://localhost:8181/messageBoard/messages...
声明式渲染：vue的核心是一个允许你才用一个简洁的模板语法来声明式的将数据渲染进行DOM的系统html部分：<div id="app"> {{message}}</div>vue部分：var app=new Vue({ el:‘#app‘, data:{ message:‘Hello Vue!‘ }}) 除了绑定插入文本的内容，我们还可以才用这样的方式绑定DOM元素属性：<div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my...
实例的生命周期函数（官方11个）：beforeCreate：在实例部分（事件/生命周期）初始化完成之后调用。created：在完成外部的注入/双向的绑定等的初始化之后调用。beforeMount：在页面渲染之前执行。mounted：dom 元素在挂载到页面之后执行。首次加载页面时，不会走这两个钩子，只有当数据发生改变时才会执行：beforeUpdate：数据改变，还没重新渲染之前执行。updated：渲染数据完成之后执行。执行销毁需要调用：vm.$destroy()beforeD...
vue.js学习vue 不支持ie8及以下的浏览器因为vue采用了ECMAScript 5的特性。安装vue采用js引入的方式使用vue <script src="https://cdn.jsdelivr.net/npm/vue"></script> 安装vue-clinpm install vue 初始化一个vue项目可以使用webstom初始化项目，也可以通过官方给与的vue-cli来创建vue init webpack 项目名 上面这种方式是通过官方的vue-cli创建，创建中会出现一些推荐的依赖包用于安装。esLine 是一种代码检查方式，在练习的时候...
第六节 地址列表过滤和展开所有的地址html：<li v-for="(item,index) in filterAddress">js：new Vue({ el:‘.container‘, data:{ limitNum:3, addressList:[], }, mounted:function () { this.$nextTick(function () { this.getAddressList(); }); }, computed:{ filterAddress:function () { return this.addressList.slice(0,this.limitNum); /*re...
Vue指令1、v-once指令 单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title></title> </head> <body><div id="app"><input type="text" v-model="msg"><input type="text" v-model="msg"v-once> #因为是输入框，一旦赋值，只可主动更改<p>{{msg}}</p><p v-once>{{msg}}</p> #一旦赋值，便不可更改</div> </body> <script sr...
原文： 简书原文：https://www.jianshu.com/p/1af9b72cf86e大纲 1、安装NodeJs 2、安装vue-cli 3、创建项目 4、启动项目 5、打包项目 6、项目实例1、安装NodeJs NodeJs安装好之后会连带着安装一个npm，nodeJs的安装流程很简单，按着步骤一步一步下来即可。 安装完成之后在控制台上输入npm -v 以及 node -v若成功则会输出对应版本，并且已经将npm和node部署到了全局的环境变量。2、安装vue-cli 安装完...
Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。组件的注册// html 代码 <div id="app"><my-component></my-component> </div> // js 代码 Vue.component(‘my-component‘, {template: ‘<div>A component!</div>‘ }) var app = new Vue({el: ‘#app‘,data: {} });全局注册// html 代码 <div id="app"><my-component></my-component> </div> // js 代码 ...
#### 在写vue项目时，所用的过滤器很多时，把所有的过滤器方法封装在一个文件中，然后导出，并绑定在vue实例上1.在src下创建filters文件夹，并新建index.js文件2. index.js里面的代码import moment from 'moment' const dateFormat = (input, fmtstring) => {// 使用momentjs这个日期格式化类库实现日期的格式化功能return moment(input).format(fmtstring); }const moneyFormat = value => {if (!value) return '0.00';/原来用的是...
1.css样式操作<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.classA {background-color: hotpink;}.classB {color: lawngreen;}.classC {font-size: 80px;}/* 1、类的操作2、style的操作*/</style></head><body><div id="root"><!-- 操作类 --><!-- 当我不知道这个标签类到底是谁，那么就得动态获取 --><p ...
一、准备工作： 程序员必备环境：Node.js和Git node.js地址 https://nodejs.org/en/download/ git地址 https://git-scm.com/downloads https://git-for-windows.github.io/二、开始工作： 1.执行命令 $ npm install -g vue-cli 注：-g为全局安装，如果是mac按如下写法：sudo npm install -g vue-cli vue-cli提供了几种模板，如下三种模式： Simple（太简单，就一个index.html文件）、we...
一、vue-draggable 安装使用npm地址：https://www.npmjs.com/package/vuedraggable二、表格拖拽使用， 举例： <table ><thead><tr><th>视频ID</th><th>名称</th><th>作者</th><th>创建时间</th><th>时长</th><th>操作</th></tr></thead><draggable element="tbody" v-model="tableData"><tr v-for="(item,index) in tableData" :key="‘item‘+index"><td>{{item.videoId}}</td><td>{{item.name}}</td><td>{{item.author.na...
1:在public文件夹新建config.js 2在vue.config.js 3：在index.html中通过script标签引入 4在项目中使用import gConf from ‘gConf‘原文：https://www.cnblogs.com/binglove/p/11669642.html