距离开始学Vue已经过去一个多月了，总想把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来，还实现了：标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周，14次commits,把心中的构想基本实现了。详情请看：这里整个过程下来，收获还是很多的，1.对mvvm有了进一步的理解，2.对css布局有了更多的了解。3.更进一步理解了Vue的事件和组件机制。...
入门篇vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。另外几个常见的工具库：react.js /angular.js官方网站：中文：https://cn.vuejs.org/英文：https://vuejs.org/官方文档：https://cn.vuejs.org/v2/guide/vue.js目前有1.x、2.x和3.x 版本，本篇使用2.x，原因是目前3.x还不成熟。vue.js库的下载可以在 官网 下载，有开发版本和生产版本，学习时使用开发版本就行。也可以在 GitHub 下载，js位于 dist 文件夹...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>[v-cloak]{display: none;}#app{width: 800px;margin: 20px auto;}#tb{width: 800px;border-collapse: collapse;margin: 20px auto;}#tb th{background-color: #0094ff;color:white;font-size: 16px;padding: 5px;text-align: center;border: 1px solid black;}#tb td{padding: 5px;text-align: center;border: 1px solid black;}</sty...
一 Vue框架简介 Vue是一个构建数据驱动的web界面的渐进式框架。 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件1 <div id="app">
2 <span>你的名字是{{name}}</span>
3 </div>
4 var app=new Vue({
5 el: ‘#app‘,
6 data:{
7 name:‘wdb‘8 }
9 })二 Vue指令 Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能， 它...
Vue的介绍渐进式的JavaScript框架vue react angualr作者:尤雨溪 facebook 谷歌公司文档:中文 建议:如果你想学好vue
1.看视频 初步的了解vue
2.学vue的课 时刻看官网文档 https://cn.vuejs.org/前端框架和库的区别功能上的不同jquery库：包含DOM(操作DOM)+请求，就是一块功能。art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板 跟python的模板类似)框架：大而全的概...
1、概念Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件，它包括State（数据源）、Getters（计算属性）、Modules（模块）、Mutations（事件）、Action（事件）。Action与Mutation的区别在于Mutation可以更改State，所以当Action要更改状态时通常是提交到Mutation中更改。2、安装2.1、安装完vue后就可安装vuex，本次示例建立在安装了vue-cli脚手架工具的基础上。安装vuex方法为在命令行输入：npm install vu...
<!DOCTYPE html>
<html lang="zh">
<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>vue dom</title><script src="https://unpkg.com/vue"></script>
</head>
<body><div id="app">{{message}}</div><div id="app-2"><span v-bind:title="message">鼠标悬停查看绑定信息</span></div><div id="app-3"><s...
v-html 不会把标签打印出来v-text 会把标签打印出来vue的循环不是放在父便签上，而是放在被循环的循环体上v-for="(value,key)in objList"v-for="(item,index)in ArrList"可以遍历数组和对象，组件引入组件先import a组件component{ a:a}v-bind:href 缩写 :href 绑定属性是动态属性变量属性组合的写法 classA和 hasError都是动态变量 :class=“[classA,{‘red-font‘:hasError}]”v-on:click 缩写 @click @keydown...
00.计算属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="app"><!-- 一般情况下写法:这种每次都会计算，效率低 --><h1>{{firstname+lastname}}</h1><!-- 计算属性 --><h1>{{fullname}}</h1></div><script type="text/javascript">var app=new Vue({el:...
ngnix 部署 vue项目-基础篇
标签（空格分隔）： docker ngnix vue Dockerfile目录基础知识主要知识点###1.基础知识 image containerdocker 命令 build run rm rmi execDockerfilenpm 打包vue项目###2.主要知识点Dockerfile image container 简单来讲，Dockerfile构建出Docker镜像，通过Docker镜像运行Docker容器。Dockerfile 包含构建image的指令#基于centos镜像
FROM centos #引用指定基础镜像#维护人的信息MAINTAINER The CentOS...
一.前端开发工具包node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。官网：https://nodejs.org/en/下载最新版本安装，疯狂点击下一步，就可以了！安装完成后，打开cmd控制台，输入命令node -v 查看版本：C:\Users\john>node -v
v10.7.0本质上还是JS，跑在V8引擎上的，让JS能够和操作系...
起步1.扎实的HTML/CSS/Javascript基本功，这是前置条件。2.不要用任何的构建项目工具，只用最简单的<script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。 什么是ECMAScript，以及es6的诞生？1997年 ECMAScript 1.0 诞生1999年12月 ECMAScript 3.0诞生，它 是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。直到今天，我们...
vue入门学习总结：vue的一个组件包括三部分：template、style、script。vue的数据在data中定义使用。数据渲染指令：v-text、v-html、{{}}。隐藏未编译的标签：v-cloak 。控制模块隐藏:v-if（值为false时不会渲染到dom上）、v-show（相当于display属性的show和hide）。事件绑定：v-on、@语法，一般方法写在methods里面，需要操作dom的方法写在mounted里面，此时dom渲染完毕。属性绑定:v-bind、:用法，例如:class= " {red:isRed}"。定...
我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个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>
</head>
<body><div ><input type="text" v-model="message">...
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 ...
