Vue 初学
Vue 的基本代码:
概念简介:Vue.js 是目前最火的一个前端框架,只关注视图层,主要负责MVC中的V这一层
MVC 是后端的分层开发概念;
MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM (ViewModel)
MVVM 数据双向绑定,前后端分离开发模式,去中心化
——model (数据)
——view (html页面)
——viewmodel 数据(model)与视图 (view) 的绑定
1. v-cloak 与 v-text 的 区别
v-cloak 起到占位符的作用不会将整个元素的内容清空
v-text 会覆盖元素中原本的内容
2. v-html 与 v-text 的 区别
v-html会展示标签效果
3. v-bind 与v-on 的区别于联系
4. 事件的修饰符
1. @click.stop
2. @click.prevent
3. @click.capture 实现捕获触发机制
4. @click.self
5. @click.prevent.once
注意:只会阻止一次
6. .stop 与.self的 区别
只触发了btn 而 div1 div2 没有触发
7. self 只会阻止自己的冒泡行为的触发
8. v-mode 双向绑定
执行效果:
只要v-mode 属性绑定的参数带有users.就可以将事件绑定
select 标签中的v-model (1)
页面效果
select 标签中的v-model (2)
将multiple 去掉
执行效果:
3. computed 的使用:
执行结果:
4. v-bind 绑定可以改变事件原有属性
方式1:
先定义一个css样式:
执行效果:
注意: v-bind 可以有简写
原:<div v-bind:class="myClass"></div>
简写:<div :class="myClass"></div>
方式二:
<div :class="{one:a1,two:a2}"></div>
方式三:
<div :class="{one:a1,two:!a1}"></div>
方式四:
计算器的小练习 利用v-model
执行的效果:
9. Vue中的样式
10. vue 中的样式,这样使用
11. vue for 循环 普通数组
vue for 循环对象数组
vue for 循环对象
vue for 迭代数字
vue-for 循环中key属性的使用
12. v-if 和v-show 的使用
小结:
<!-- 1. MVC 和 MVVM 的区别 --> <!-- 2. 学习了Vue中最基本代码的结构 --> <!-- 3. 插值表达式 v-cloak v-text v-html v-bind(缩写是 :) v-on(缩写是 @) v-model v-for v-if v-show --> <!-- 4. 事件修饰符 : .stop .prevent .capture .self .once --> <!-- 5. el 指定要控制的区域 data 是个对象,指定了控制的区域内要用到的数据 methods 虽然带个s后缀,但是是个对象,这里可以自定义了方法 --> <!-- 6. 在 VM 实例中,如果要访问 data 上的数据,或者要访问 methods 中的方法, 必须带 this --> <!-- 7. 在 v-for 要会使用 key 属性 (只接受 string / number) --> <!-- 8. v-model 只能应用于表单元素 --> <!-- 9. 在vue中绑定样式两种方式 v-bind:class v-bind:style -->
13. 过滤器的基本使用
14. 生命周期函数演示
15. vue-resource 的基本使用
vue-resource
是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:
(1)使用Vue.http或this.$http
( 2)使用Vue.resource
或this.$resource
这两种方式本质上没有什么区别,阅读vue-resource
的源码,你可以发现第2种方式是基于第1种方式实现的。
重点:
// 注意:在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名 或 this.方法名 来进行访问,这里的this,就表示 我们 new 出来的 VM 实例对象
例子2:动态切换美元符号
Vue 初学的更多相关文章
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- vue初学:基础概念
一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...
- vue初学实践之路——vue简单日历组件(3)
这一篇我们来实现管理员修改每一天剩余数量的功能. <div id="calendar"> <div id="left"> <spa ...
- vue初学实践之路——vue简单日历组件(2)
上一篇我们已经实现了基本的日历显示功能,这一次我们要加上预定的功能 废话不多说,上代码 <div id="calendar"> <!-- 年份 月份 --> ...
- Vue 初学笔记
1. 对 Vue 的理解 Vue.js 是一个以数据驱动和组件化的思想构建的 JavaScript MVVM 库,下载 Vue.js 后可以直接在html里引用,Vue 本身并不依赖 Node 运行. ...
- vue初学之node.js安装、cnpm安装、vue初体验
1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. ...
- Vue初学跳坑
1. uncaught TypeError: Cannot read property '0' of undefined <div class="home-module-wrap&qu ...
- .Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统
项目名称:学生信息管理系统1.0 后台框架:.Net Core 3.1 + EF Core yrjw.ORM.Chimp 前端框架:ASP.NET Core MVC + LayUI + Bo ...
- 初学vue出现空格警告的原因及其解决办法
初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...
随机推荐
- [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现
[源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 目录 [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 0x00 摘要 0x01 概述 1.1 什么是GPip ...
- MySQL主从复制与Atlas读写分离
配置主从复制 1. 增加主从配置 # 主库配置文件 server-id = 1 log-bin = /var/lib/mysql/mysql-bin expire_logs_days = 10 ski ...
- 【springboot】@Valid参数校验
转自: https://blog.csdn.net/cp026la/article/details/86495659 扯淡: 刚开始写代码的时候对参数的校验要么不做.要么写很多类似 if( xx == ...
- ffmpeg 常用知识点收集
ffmpeg 常用知识点收集 一.基础简介 FFmpeg是一个自由软件,可以运行音频和视频多种格式的录影.转换.流功能,包含了libavcodec ─这是一个用于多个项目中音频和视频的解码器库,以及l ...
- Go版本依赖--版本选择机制
目录 1. 版本选择机制 2.依赖包版本约定 2.1 Go module 之前版本兼容性 2.2 Go module 之后版本兼容性 3. 版本选择机制 3.1 最新版本选择 3.2 最小版本选择 1 ...
- servlet处理跨域请求
前言 我们要做的是让在一个不在当前项目文件夹的前端页面发送Ajax请求,由一个远程servlet处理 代码 创建一个web工程 导入所需的jar-> servlet-api.jar fastjs ...
- OKR工作法读后感
<OKR工作法>把管理思想融入到一则创业故事中,故事细节经过了精心的设计,融入了管理智慧和踩坑填坑经验,每个细节都以小见大,耐人寻味.一千个读者,就有一千个哈姆雷特. 所以这次我不去点评大 ...
- MySQL双主多从+Keepalived配置
原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 基础环境 二 实际部署 2.1 MySQL双主+Keepalived高可用 2 ...
- sublime text 3 中文排序插件
ST3 的排序不支持中文按拼音排序,所以需要搞一个插件来支持这一特性 pypinyin 这个库可以把中文转成拼音,可惜不支持 python3.3,而 ST3 内置的 python 就是 3.3 我系统 ...
- (一)羽夏看C语言——简述
"羽夏看C语言"介绍什么 本系列从汇编的角度,比较翔实的介绍C语言.C++和C其实是一样的东西,C++的编译器只是更强大,更能帮助我们写代码,例如模板.没有特殊说明,本系列不会 ...