vue{{}}以html格式

Vue学习一：{{}}html模板使用方法

本文为博主原创,未经允许不得转载: 之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中各个指令的使用方法,只要掌握了vue的指令,就能熟练使用vue. 以下为HTML模板{{ }}的使用方法: <!DOCTYPE html> <html lang="zh"> <head> <script src="https://unpkg.com/vue@2.5.13/dis

Vue引入日期格式插件moment.js

因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究插件地址:http://momentjs.cn/ 因为没有使用过,所有就开始各种百度,参考各位大佬的总结,大概了解了怎么使用,然后记录下来当做个笔记,免得以后搞忘了 (1)首先在项目目录下安装 npm install moment --save (2)引入moment 在main.js中引入moment 用法一: import moment from 'moment' // 定义一个全局过滤

JS和vue中日期格式的转换

1.获取当前时间: var now=new Date(); //Tue Oct 17 2017 18:08:40 GMT+0800 (中国标准时间) 获取当前时间的日期 new Date().getDate() //17 new Date().toLocaleString() //2017/10/17 下午6:08:40 2.引用moment.js将标准时间转化成YYYY-MM-DD hh:mm:ss var time=moment(new Date()).format("YYYY-MM

Vue.js说说组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

vue调用Moment显示时间

1.下载 Moment 网站: http://momentjs.cn/ 2创建一个vue的文本格式 admin.vue 3.定义给值代码如下 <template> <div style="backgroundColor: black;"> <div> <div style="width: 40%; float: left"> <el-card class="box-card" st

vue的.vue文件是怎么run起来的(vue-loader)

vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.vue-loader做了什么? vue-loader是一个webpack加载器,这是vue组件的格式: <template> ... </template> <script> ... </script> <style> ... </style&g

前端框架VUE

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的

vue.js 作一个用户表添加页面----初级

使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄....还有很多,为了数据的简单明了,只举例部分数据即可在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄.而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在

vue组件介绍

https://www.cnblogs.com/Leo_wl/p/5863185.html vue.js说说组件什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: va

Vue 框架-09-初识组件的应用

Vue 框架-09-初识组件的应用今天的第一个小实例,初步使用组件: 在 app.js 中定义模板组件,在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块比如说,下面定义一个模板,提示我的 csdn 连接,可以这样使用: 源代码 app.js 文件: //定义模板,因为在 html 中对应一个自定义标签模板,所以内容也只能是一对标签内有多个标签的格式,而不能是两个标签并列的格式 Vue.component("tocsdn",{ template:'&l

Vue 框架-08-基础实战 demo

Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue 基础的简单应用. 来看截图: 源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi<

Vue 框架-07-循环指令 v-for，和模板的使用

Vue 框架-07-循环指令 v-for,和模板的使用本章主要是写一些小实例,记录代码,想要更详细的话,请查看官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF 第一个小实例: 使用 v-for 遍历 js 文件中定义的数组源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="

Vue 框架-06-条件语句 v-if 实现选项卡效果

Vue 框架-06-条件语句 v-if 实现选项卡效果本片介绍的是 Vue 中条件语句 v-if 第一个小实例是,通过 v-if="布尔值",通过布尔值的真假来决定,某元素是否显示源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> &l

Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式先看下面的第一个小实例: 源代码 html 文件: 请看注释

Vue 框架-04-计算属性

Vue 框架-04-计算属性计算属性是什么? 大家可以去看官网解释:计算属性和侦听器今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当点击第一个按钮[Add to A]的时候, Age + A = 这个方法执行了,大家可以看得到实际呢,下面的两个方法都会刷新,虽然 Age + B = 没有效果,是因为没有修改数据,后面会详细说明源代码 html 文件: <!DOCTYPE html> <html> <hea

Vue 框架-03-键盘事件、健值修饰符、双向数据绑定

Vue 框架-03-键盘时间及健值修饰符一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title>  <link rel="stylesheet" href=&q

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:element 需要获取的元素,一定是 html 中的根容器元素 el:"#vue-app", data:{ name:"肖朋伟", age:18 }, //存储自己的方法 methods:{ reduce: function(){ this.age--; } } }); 源

Vue 框架-01- 入门篇图文教程

Vue 框架-01- 入门篇图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用一.Vue 的安装与使用 1.在线引用:  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2.下载 js 文件(推荐): (1)在浏览器中打开下面链接:

Vue进阶篇

前引今天是2018年12月30,虽不是2018年的最后一天,但是却是自己在2018年写的最后一篇博客了,昨天下班在地铁上闲来无事,翻起了关注的一些公众号发的技术博文,里面就提到写博客的重要性,其实这样的内容看了N多了,但是,里面有一句感觉说的很对,现在的博客变了味了,因为我们可以Ctrl+c.Ctrl+v,短短几秒钟就是一遍几千字的博文,真正自己写出的博文需要花费很长的时间.说心里话,自己的博客中也有,大概有三分之一吧,突然莫名的恐慌,因为很可能就是这三分之一的博客,就会掩盖自己花费精力完成的

vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）

Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架脚手架通过webpack搭建开发环境使用ES6语法打包压缩js为一个文件项目文件在环境中编译,而不是浏览器实现页面自动刷新基于nodejs和npm,可以在控制台输入node -v 或node --version查看node.js是否安装好以及npm -v查看是否安装好,安装好则会有本版提示. 另外分享几个npm的常用命令 npm -v #显示版本,检查npm 是否正确安装

理解Vue.mixin，带你正确的偷懒

关于Vue.mixin在vue官方文档中是这么解释的: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项. 我们的理解:Vue.mixin给我们提供了一种混入Vue实例的方法,创建了混入对象之后,我们自定义的方法或者变量可以很轻松的挂载在Vue实例上,给我们的偷懒带来方便: Vue.mixin为我们提供了两种混入方式:局部混入和全局混入: 本文还是以dem

巴特西