第四单元(初识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. 建议收藏！2020阿里面试题（JVM+Spring Cloud+微服务）上

    前言 对于大厂面试,我想要强调的一点就是心态真的很重要,是决定你在面试过程中发挥的关键,若不能正常发挥,很可能就因为一个小失误与offer失之交臂,所以一定要重视起来.另外提醒一点,充分复习,是消除你 ...

  2. 日常踩坑-------新手使用idea

    mybatis在idea的maven项目中的坑 今天遇到mybatis的报错,搞了好久才搞懂,在网上找了好久的相似案例,也没有搞定,先来看下网上常见的解决办法吧,相信也能解决大部分人的报错. 1.ma ...

  3. iPhone/iOS开启个人热点的相关位置调整小结

    冬至已到,圣诞将近,最近公司项目实在太多,三四个项目反复的切换真的让人焦头烂额,趁今天有点空,把维护的三个项目顺利送出,刚好可以缕缕思路,记录一下最近遇到的问题.说不着急那是假的,客户一天天的催的确实 ...

  4. P2592 [ZJOI2008]生日聚会

    容易发现已经结束掉的一个子串只要合法就对后面没有影响,所以可以令 \(f_{i,j,p,q}\) 表示前 \(i+j\) 个人有 \(i\) 个男孩,\(j\) 个女孩,所有后缀中男孩最多比女孩多 \ ...

  5. 知识解析：C语言函数有一些什么？为你呈现最全函数大全

    大家双节快乐呀~国庆节过去了一半,大家放了几天假呀?玩的开心吗? 如果假日没有其他安排,不要宅在家虚度光阴哦~看看我的文章或者视频学习一些知识吧~   今天为大家分享C语言库函数知识. 以下图片以字母 ...

  6. git的使用以及git和码云的连接

    什么是git? ​ Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.可以保存许多的历史版本,并且可以多人同时进行开发. 分布式版本控制系统 ​ 每个人拥有该项目 ...

  7. B. Irreducible Anagrams【CF 1290B】

    思路: 设tx为t类别字符的个数. ①对于长度小于2的t明显是"YES"②对于字符类别只有1个的t明显是"YES"③对于字符类别有2个的t,如左上图:如果str ...

  8. web网络漏洞扫描器编写

    这两天看了很多web漏洞扫描器编写的文章,比如W12scan以及其前身W8scan,还有猪猪侠的自动化攻击背景下的过去.现在与未来,以及网上很多优秀的扫描器和博客,除了之前写了一部分的静湖ABC段扫描 ...

  9. Kubernetes-21：Apiserver等证书修改使用年限

    Kubernetes证书使用年限修改方法   Kubernetes的apiservice.crt证书默认只有一年的使用期限,查看方法: cd /etc/kubernetes/pki [root@Cen ...

  10. 抖音CK备份上号原理

    抖音CK备份和上号是点赞跳频繁上号的最好方式,不会的可以访问网站:rz3w.com,下面介绍备份还原的原理:public void run() { MainActivity.a(this.c); ne ...