第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

#课程目标

  1. 了解 vue 框架的特点
  2. 掌握创建 vue 实例
  3. 掌握 data 用法及特点
  4. 掌握 vue 基本指令的用法
  5. 掌握 methods 用法

#知识点

  1. 直接用 <script> 引入，Vue 会被注册为一个全局变量。 

  2. 创建vue实例，并将实例挂载到window上。

    1. <body>
    2.     <div id='app'>
    3.         <h1>{{msg}}</h1>
    4.     </div>
    5.     <script>
    6.         // console.log(Vue)
    7.         window.vm=new Vue({
    8.             el:'#app',
    9.             data:{
    10.                 msg:'hello world!'
    11.             }
    12.         })
    13.     </script>
    14. </body>
     

运行结果如下： 

  1. data对象中定义的属性是‘响应式’的，属性值发生改变页面也会改变， 演示效果1 

  2. 指令： （1）双大括号{{}},插值语法。可以写js表达式和三目运算

    （2）v-text\v-html

    （2）条件渲染 v-show,根据表达式之真假值，切换元素的 display CSS 属性。

    （4）绑定动态属性 v-bind，简写：

    （6）在表单控件或者组件上创建双向绑定 v-model

    （7）绑定事件监听器 v-on，简写@

  3. methods 定义方法

    1. <body>
    2.     <div id='app'>
    3.         <h1>{{msg}}</h1>
    4.         <button @click='changeMsg'>改变</button>
    5.     </div>
    6.     <script>
    7.         // console.log(Vue)
    8.         window.vm=new Vue({
    9.             el:'#app',
    10.             data:{
    11.                 msg:'hello world!'
    12.             },
    13.             methods: {
    14.                 changeMsg(){
    15.                 this.msg='八维'
    16.                 }
    17.             },
    18.         })
    19.     </script>
    20. </body>
     

效果展示 

思考：vue操作数据与传统的操作dom的区别

#授课思路

#案例和作业

  1. 用 vue 面向数据的编程思想实现下图，并且实现tab切换。

  2. v-model 练习

vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)的更多相关文章

  1. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  2. 将页面中表格数据导出excel格式的文件（vue）

    近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...

  3. 如何在VUE中使用leaflet地图框架

    前言:在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo  虽然也有一些封装好的leaflet库例如Vue-Leaflet,但是总感觉用起来不是那么顺手,有些业务操作还是得用l ...

  4. 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  5. vue项目中引入第三方框架

    element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...

  6. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  7. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  8. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  9. react第四单元(ref与DOM-findDomNode-unmountComponentAtNode)

    第四单元(ref与DOM-findDomNode-unmountComponentAtNode) #课程目标 理解react的框架使用中,真实dom存在的意义. 使用真实dom和使用虚拟dom的场景. ...

随机推荐

  1. Earmaster——音乐爱好者必备软件

    有很多喜爱音乐但是却由于一些"不可抗力"而没能学习到音乐基础的小伙伴,相信你们在自学乐器或是声乐的时候总会因为基础不扎实而看不懂一些复杂的乐谱,换别的曲子练习之后发现依旧看不懂,由 ...

  2. Jenkins中如何自定义构造结果

    jenkis中的触发邮件机制是根据构建成功与否来发邮件,实际上我们在jenkis上定时执行脚本时是需要根据用例的执行结果来触发邮件预警 本文讲叙如何根据用例的执行结果来触发邮件预警 1.在任务配置的b ...

  3. Flink-1-状态化流处理概述

    第1章 状态化流处理概述 参考书籍 Stream Processing with Apache Flinkhttps://www.oreilly.com/library/view/stream-pro ...

  4. mongodb 副本集之入门篇

    作者: 凹凸曼-军军 前言:mongodb 因为高性能.高可用性.支持分片等特性,作为非关系型数据库被大家广泛使用.其高可用性主要是体现在 mongodb 的副本集上面(可以简单理解为一主多从的集群) ...

  5. 基于Vue、Springboot网站实现第三方登录之QQ登录，以及邮件发送

    基于Vue.Springboot实现第三方登录之QQ登录 前言 一.前提(准备) 二.QQ登录实现 1.前端 2.后端 1.application.yml 和工具类QQHttpClient 2.QQL ...

  6. Java中的接口与抽象类的区别

    由于随着jdk版本的更新,在jdk1.8时,接口也增强了,所以我们分别来说明一下. (1)jdk1.8之前 在jdk1.8之前,接口里面只能定义抽象方法和常量:而抽象类比普通类有一点不同,就是抽象类里 ...

  7. 牛客练习赛71 数学考试 题解(dp)

    题目链接 题目大意 要你求出有多少个长度为n的排列满足m个限制条件 第i个限制条件 p[i]表示前 p[i]个数不能是1-p[i]的排列 题目思路 这个感觉是dp但是不知道怎么dp 首先就是要明白如果 ...

  8. 2020.11最新JAVA环境安装配置

    Windows10下java环境配置 更新:2020年11月25日 电脑环境: windows10 64位 一.下载jdk 首先到Oracle网站下载对应操作系统的jdk安装包. https://ww ...

  9. LeetCode 047 Permutations II

    题目要求:Permutations II Given a collection of numbers that might contain duplicates, return all possibl ...

  10. sql注入绕过安全狗实战

    =绕过 like regexp(匹配)> < (测试安全狗 ><不可以绕过) 注释+换行(%0a作为垃圾数据填充) 联合查询绕过 探测出当union select 出现时会拦截 ...