第四单元(初识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. 如何调整MathType公式的字体大小

    作为一名理科生,想必大家都在为编辑公式而烦恼,在Word中要想完美插入公式,还真不是那么简单的.首先要使用专业的公式编辑器MathType,其次还要对公式的大小进行修改,这样才能看起来是相融合的文章. ...

  2. FL Studio 插件使用技巧——Fruity Reeverb 2(下)

    了解大教堂声场的特点 上节教程中我们说到,混响具有营造空间感的作用.当我们想要在FL Studio软件中用Fruity Reeverb 2 插件有目标地模仿一个特定空间的环境时,我们需要充分了解该空间 ...

  3. iMindMap组织结构视图在工作上的应用体现在哪些方面

    iMindMap的组织结构图视图,可以将信息.想法和流程整合起来.本文,我们将讲述iMindMap组织结构图视图的3个实例应用. iMindMap组织结构视图 简化您的工作流程 通过在工作中构建组织结 ...

  4. python 如何跳过异常继续执行

    使用try...except...语句,类似于if...else...,可以跳过异常继续执行程序,这是Python的优势 用法如下: 1 2 3 4 5 6 try:            # 可能会 ...

  5. Sysbench对Mysql进行基准测试

    前言 1.基准测试(benchmarking)是性能测试的一种类型,强调的是对一类测试对象的某些性能指标进行定量的.可复现.可对比的测试. 进一步来理解,基准测试是在某个时候通过基准测试建立一个已知的 ...

  6. 2016年第七届蓝桥杯【C++省赛B组】F、G、H、J 题解

    F. 方格填数 #深搜 题意 有\(10\)个格子,填入0~9的数字.要求:连续的两个数字不能相邻.(左右.上下.对角都算相邻),求可能的填数方案数. +--+--+--+ | | | | +--+- ...

  7. 蚂蚁上市员工人均一套大 House，阿里程序员身价和这匹配吗？

    作者 | 硬核云顶宫 责编 | 伍杏玲 出品 | CSDN(ID:CSDNnews) 上周,蚂蚁集团迎来IPO,其发行价格将达到68.8元,总市值将突破2万亿元.市场对蚂蚁的成长性有着充分的信心,为了 ...

  8. uni-app 封装接口request请求

    我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要,所以不管做什么项目我们拿到需求后一定要认真的分析一下,要和产品以及后台沟通好,其中尤为重要的一个环节莫过于封装接口请求了.因为前期封装 ...

  9. Django的路由分发与名称空间

    路由分发 django每一个app下面都可以有自己的urls.py路由层,templates文件夹,static文件夹 项目名下urls.py(总路由)不再做路由与视图函数的匹配关系而是做路由的分发 ...

  10. spring框架使用c3po链接数据库

    编辑工具:idea 1.配置pom.xml文件(创建模板时软件自动创建) 导入spring的核心架包 全部架包官网:https://mvnrepository.com/ 1 <dependenc ...