第四单元(初识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. yum安装no more mirrors to try

    先挂载:mount /dev/cdrom /mnt yum clean allyum makecacheyum -y update 后重试

  2. bash反弹shell检测

    1.进程 file descriptor 异常检测 检测 file descriptor 是否指向一个socket 以重定向+/dev/tcp Bash反弹Shell攻击方式为例,这类反弹shell的 ...

  3. Java蓝桥杯02——第二题集锦：生日蜡烛、星期一、方格计数、猴子分香蕉

    第二题 生日蜡烛(结果填空) 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛. 现在算起来,他一共吹熄了236根蜡烛. 请问,他从多少岁开始过生日party的? 请填 ...

  4. 从零开始了解多线程知识之开始篇目 -- jvm＆volatile

    CPU多核缓存存储结构图 电脑存储结构概念 多CPU 一个现代计算机通常由两个或者多个CPU,如果要运行多个程序(进程)的话,假如只有 一个CPU的话,就意味着要经常进行进程上下文切换 因为单CPU即 ...

  5. linux下安装python3.7.1

    一.安装依赖环境 输入命令:yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readlin ...

  6. 给集合null，filter结果空集合

  7. 05_Content Provider

    Content Provider是内容提供器,与内容(数据)的存取(存储.获取)有关,是Android应用程序的四大组成部分之一,是Android中的跨应用访问数据机制. 数据库在Android当中是 ...

  8. js预解析练习

    分析下面两段代码 console.log(num)//undefined var num = 10 f()//可以执行 //f2()不可以执行 console.log(f)//function con ...

  9. MySQL错误日志（Error Log）

    错误日志是一个文本文件,记录了 MySQL Server 每次启动和关闭的详细信息以及运行过程中所有较为严重的警告和错误信息.在遇到问题时,应该首先查看这个文件. 如何开启 使用命令 SHOW VAR ...

  10. 你想不到的win10快捷键

    1.虚拟桌面 1.1 创建 ctrl + win + d 1.2 切换 ctrl + win + 左/右箭头 1.3 关闭 ctrl + win + f4 2. 应用窗口 2.1 打开的全部最小化 w ...