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

#课程目标

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

#知识点

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

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

    <body>
    
    <div id='app'>
    
        <h1>{{msg}}</h1>
    
    </div>
    
    <script>
    
        // console.log(Vue)
    
        window.vm=new Vue({
    
            el:'#app',
    
            data:{
    
                msg:'hello world!'
    
            }
    
        })
    
    </script>
    
</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 定义方法

    <body>
    
    <div id='app'>
    
        <h1>{{msg}}</h1>
    
        <button @click='changeMsg'>改变</button>
    
    </div>
    
    <script>
    
        // console.log(Vue)
    
        window.vm=new Vue({
    
            el:'#app',
    
            data:{
    
                msg:'hello world!'
    
            },
    
            methods: {
    
                changeMsg(){
    
                this.msg='八维'
    
                }
    
            },
    
        })
    
    </script>
    
</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. Camtasia中对录制视频进行编辑——行为

    小视频的逐渐兴起,让我们的生活变得多姿多彩,同时,也造就了一批新媒体的创业者还有越来越多的网红,这不禁使我们也想加入他们的行列.但是问题来了,拍摄视频后最重要的是对视频进行剪辑,没有一款经济适用的软件 ...

  2. CF453C Little Pony and Summer Sun Celebration

    如果一个点需要经过奇数次我们就称其为奇点,偶数次称其为偶点. 考虑不合法的情况,有任意两个奇点不连通(自己想想为什么). 那么需要处理的部分就是包含奇点的唯一一个连通块.先随意撸出一棵生成树,然后正常 ...

  3. Mybatis【2.2】-- Mybatis关于创建SqlSession源码分析的几点疑问？

    代码直接放在Github仓库[https://github.com/Damaer/Mybatis-Learning ],可直接运行,就不占篇幅了. 目录 1.为什么我们使用SQLSessionFact ...

  4. 配置Nginx 扩展实现图片剪裁

    在此之前需要安装ngx_http_image_filter_module,如果是采用的Docker的话可以看看我历史文章. 然后修改配置文件,增加几个location模块,配置如下,仅供参考 serv ...

  5. windowsAPI函数操作注册表实现软件开机自启

    注册表的结构 注册表是一个数据库,它的结构同逻辑磁盘类似.注册表包含键(Key),它类似磁盘中的目录,注册表还包含键值(Value),它类似磁盘中的文件.一个键可以包含多个子健和键值,其中键值用于存储 ...

  6. cookie 与session

    Django 操作cookie,session HTTP协议四大特性: 1.基于TCP.IP作用与应用层的协议 2.基于请求响应 3.无连接 4.无状态 无状态的意思是每次请求都是独立的,它的执行情况 ...

  7. AndroidStudio新导入项目，无法编译，rebuild、clean都无效

    此按钮,可以用gradle重新编译

  8. Mac下打开DDMS(AndroidDeviceMonitor)白屏

    mac打开AndroidStudio下的ddms(也就是AndroidDeviceMontor)白屏,是由于jdk版本号较高不兼容导致的,因此需要将jdk降为jdk1.8.0_144就可以来了,但是要 ...

  9. JZOJ2020年8月7日提高组反思

    JZOJ2020年8月7日提高组反思 T1 暴力枚举 枚举起点和\(p\) 然后就 过了?! 根据本人不严谨的推算 时间复杂度\(O(\dfrac{n^7}{4})\) 数据太水就过去了QAQ T2 ...

  10. 20200322_【转载】关于C#中使用SQLite自适应Any CPU程序的说明

    本文转载, 原文链接: http://luyutao.com/2016/09/14/csharp-sqlite-any-cpu.html 在C#中如果要使程序自适应32位和64位系统,只需要将项目的& ...