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.resourcethis.$resource

           这两种方式本质上没有什么区别,阅读vue-resource的源码,你可以发现第2种方式是基于第1种方式实现的。

 重点:

 // 注意:在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名 来进行访问,这里的this,就表示 我们 new 出来的  VM 实例对象
 

 例子2:动态切换美元符号



Vue 初学的更多相关文章

  1. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  2. vue初学:基础概念

    一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...

  3. vue初学实践之路——vue简单日历组件(3)

    这一篇我们来实现管理员修改每一天剩余数量的功能. <div id="calendar"> <div id="left"> <spa ...

  4. vue初学实践之路——vue简单日历组件(2)

    上一篇我们已经实现了基本的日历显示功能,这一次我们要加上预定的功能 废话不多说,上代码 <div id="calendar"> <!-- 年份 月份 --> ...

  5. Vue 初学笔记

    1. 对 Vue 的理解 Vue.js 是一个以数据驱动和组件化的思想构建的 JavaScript MVVM 库,下载 Vue.js 后可以直接在html里引用,Vue 本身并不依赖 Node 运行. ...

  6. vue初学之node.js安装、cnpm安装、vue初体验

    1. 如果本机没有安装node运行环境,请下载node 安装包进行安装.地址:https://nodejs.org/en/ 2.装完,使用cmd命令行输入:node -v回车 如果输出版本号则成功. ...

  7. Vue初学跳坑

    1. uncaught TypeError: Cannot read property '0' of undefined <div class="home-module-wrap&qu ...

  8. .Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统

    项目名称:学生信息管理系统1.0 后台框架:.Net Core 3.1 + EF Core    yrjw.ORM.Chimp 前端框架:ASP.NET Core MVC  +  LayUI + Bo ...

  9. 初学vue出现空格警告的原因及其解决办法

    初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...

随机推荐

  1. [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现

    [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 目录 [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 0x00 摘要 0x01 概述 1.1 什么是GPip ...

  2. MySQL主从复制与Atlas读写分离

    配置主从复制 1. 增加主从配置 # 主库配置文件 server-id = 1 log-bin = /var/lib/mysql/mysql-bin expire_logs_days = 10 ski ...

  3. 【springboot】@Valid参数校验

    转自: https://blog.csdn.net/cp026la/article/details/86495659 扯淡: 刚开始写代码的时候对参数的校验要么不做.要么写很多类似 if( xx == ...

  4. ffmpeg 常用知识点收集

    ffmpeg 常用知识点收集 一.基础简介 FFmpeg是一个自由软件,可以运行音频和视频多种格式的录影.转换.流功能,包含了libavcodec ─这是一个用于多个项目中音频和视频的解码器库,以及l ...

  5. Go版本依赖--版本选择机制

    目录 1. 版本选择机制 2.依赖包版本约定 2.1 Go module 之前版本兼容性 2.2 Go module 之后版本兼容性 3. 版本选择机制 3.1 最新版本选择 3.2 最小版本选择 1 ...

  6. servlet处理跨域请求

    前言 我们要做的是让在一个不在当前项目文件夹的前端页面发送Ajax请求,由一个远程servlet处理 代码 创建一个web工程 导入所需的jar-> servlet-api.jar fastjs ...

  7. OKR工作法读后感

    <OKR工作法>把管理思想融入到一则创业故事中,故事细节经过了精心的设计,融入了管理智慧和踩坑填坑经验,每个细节都以小见大,耐人寻味.一千个读者,就有一千个哈姆雷特. 所以这次我不去点评大 ...

  8. MySQL双主多从+Keepalived配置

    原文转自:https://www.cnblogs.com/itzgr/p/10233932.html作者:木二 目录 一 基础环境 二 实际部署 2.1 MySQL双主+Keepalived高可用 2 ...

  9. sublime text 3 中文排序插件

    ST3 的排序不支持中文按拼音排序,所以需要搞一个插件来支持这一特性 pypinyin 这个库可以把中文转成拼音,可惜不支持 python3.3,而 ST3 内置的 python 就是 3.3 我系统 ...

  10. (一)羽夏看C语言——简述

    "羽夏看C语言"介绍什么   本系列从汇编的角度,比较翔实的介绍C语言.C++和C其实是一样的东西,C++的编译器只是更强大,更能帮助我们写代码,例如模板.没有特殊说明,本系列不会 ...