vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
#课程目标
- 了解 vue 框架的特点
- 掌握创建 vue 实例
- 掌握 data 用法及特点
- 掌握 vue 基本指令的用法
- 掌握 methods 用法
#知识点
直接用
<script>引入，Vue 会被注册为一个全局变量。
创建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>
运行结果如下： 
data对象中定义的属性是‘响应式’的，属性值发生改变页面也会改变， 演示效果1
指令： （1）双大括号{{}},插值语法。可以写js表达式和三目运算
（2）v-text\v-html
（2）条件渲染 v-show,根据表达式之真假值，切换元素的 display CSS 属性。
（4）绑定动态属性 v-bind，简写
：（6）在表单控件或者组件上创建双向绑定 v-model
（7）绑定事件监听器 v-on，简写
@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的区别
#授课思路
#案例和作业
用 vue 面向数据的编程思想实现下图，并且实现tab切换。
v-model 练习
vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)的更多相关文章
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
- 如何在VUE中使用leaflet地图框架
前言:在leaflet的官方文档只有静态的HTML演示并没有结合VUE的demo 虽然也有一些封装好的leaflet库例如Vue-Leaflet,但是总感觉用起来不是那么顺手,有些业务操作还是得用l ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- vue项目中引入第三方框架
element-ui npm install element-ui -- save; main.js中 import Element from 'element-ui'; import 'elemen ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- react第四单元(ref与DOM-findDomNode-unmountComponentAtNode)
第四单元(ref与DOM-findDomNode-unmountComponentAtNode) #课程目标 理解react的框架使用中,真实dom存在的意义. 使用真实dom和使用虚拟dom的场景. ...
随机推荐
- mysql 重要日志文件总结
作者:丁仪 来源:https://chengxuzhixin.com/blog/post/mysql_zhong_yao_ri_zhi_wen_jian_zong_jie.html 日志是所有应用的重 ...
- 一次看完28个关于ES的性能调优技巧，很赞，值得收藏！
因为总是看到很多同学在说Elasticsearch性能不够好.集群不够稳定,询问关于Elasticsearch的调优,但是每次都是一个个点的单独讲,很多时候都是case by case的解答,本文简单 ...
- php 上传图片，无刷新上传，支持多图上传,远程图片上传
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...
- 网络拓扑实例之交换机基于全局地址池作为DHCP服务器(七)
组网图形 DHCP服务器简介 通常用户希望网络中的每台终端能够动态获取IP地址.DNS服务器的IP地址.路由信息.网关信息等网络参数,不需要手动配置终端的IP地址等网络参数:另外,针对一些移动终端(手 ...
- flink：StreamExecutionEnvironment、DataStream和Transformation与StreamOperator
1.StreamExecutionEnvironment: StreamExecutionEnvironment是构建执行任务环境以及任务的启动的入口,主要具备以下几方面的职责: a.存储全局相关的参 ...
- 基于FPGA的VGA显示实验设计
基于FPGA的VGA显示实验设计 成果展示(优酷视频): 视频: 基于FPGA的VGA显示技术(手机控制) http://v.youku.com/v_show/id_XNjk4ODE3ODUy.htm ...
- JDK 15已发布，你所要知道的都在这里！
JDK 15已经在2020年9月15日发布!详情见 JDK 15 官方计划.下面是对 JDK 15 所有新特性的详细解析! 官方计划 2019/12/12 Rampdown Phase One (fo ...
- 最佳置换算法OPT
原文链接:https://www.jianshu.com/p/544ee20e307c
- 排序--HeapSort 堆排序
堆 排 序 堆排序.就是通过堆结构来排序.可以看之前写的http://www.cnblogs.com/robsann/p/7521812.html .关于堆的结构 堆排序先要使结构堆有序.所以要先使所 ...
- Java数据结构（十四）—— 平衡二叉树（AVL树）
平衡二叉树(AVL树) 二叉排序树问题分析 左子树全部为空,从形式上看更像一个单链表 插入速度没有影响 查询速度明显降低 解决方案:平衡二叉树 基本介绍 平衡二叉树也叫二叉搜索树,保证查询效率较高 它 ...