第四单元(初识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. 博客新域名www.tecchen.tech

    新年祝福 祝新的一年,大朋友实现所有梦想,小朋友健康成长- 新域名 https://www.tecchen.tech 有效期:10年 旧链接 之前的链接请自行替换为新链接地址,包括但不限于以下二级域名 ...

  2. 历时两年零三个月，从刚毕业的外包到现在的阿里P7offer，我只做了这几件事

    前言 最近,金九银十在即,很多人都在准备面试,特别给大家总结了 Java 程序员面试必备题,这份面试清单是我从 去年开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技 ...

  3. prometheus监控实战--基础

    1.简介 prometheus就是监控系统+TSDB(时间序列数据库),通过pull方式从exporter获取时间序列数据,存入本地TSDB,被监控端需安装exporter作为http端点暴露指标数据 ...

  4. 思维导图MindManager有新手引导功能吗

    无论是对于初次使用Mindmanager思维导图软件的新手来说,还是对于有一定软件使用基础的进阶者来说,Mindmanager思维导图软件的帮助功能都能给予用户很大的指导作用. Mindmanager ...

  5. H5系列之新input

    虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好.基本只有google浏览器能用.但是既然出了,那么就要了解他,知道有这么一个东西就好. input类型 ...

  6. jQuery 第一章 $()选择器

    jquery 是什么? jquery 其实就是一堆的js函数(js库),也是普通的js而已. 有点像我们封装一个函数,把他放到单独的js 文件,等待有需要的时候调用它. 那么使用它有啥好处呢? jqu ...

  7. AcWing 298. 围栏 (POJ1821)

    标签(空格分隔): dp 单调队列优化 题目描述 有N块木板从左到右排成一行,有M个工匠对这些木板进行粉刷,每块木板至多被粉刷一次. 第 i 个木匠要么不粉刷,要么粉刷包含木板 \(S_i\) 的,长 ...

  8. 年轻人不讲武德，竟然重构出这么优雅后台 API 接口

    Hello,早上好,我是楼下小黑哥~ 最近偶然间在看到 Spring 官方文档的时候,新学到一个注解 @ControllerAdvice,并且成功使用这个注解重构我们项目的对外 API 接口,去除繁琐 ...

  9. GoLang 自学系列（二）—— defer

    defer 关键字 首先来看官网的定义: A "defer" statement invokes a function whose execution is deferred to ...

  10. Beta冲刺——总结

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 团队GitHub地 ...