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的场景. ...
随机推荐
- 推荐一个适用于SpringBoot项目的轻量级HTTP客户端框架，快来试试它!
在SpringBoot项目直接使用okhttp.httpClient或者RestTemplate发起HTTP请求,既繁琐又不方便统一管理.因此,在这里推荐一个适用于SpringBoot项目的轻量级HT ...
- 对于线程池ThreadPool的学习总结
线程池:就是一个管理线程的池子. 优点: 它帮我们管理线程,避免增加创建线程和销毁线程的资源损耗.因为线程其实也是一个对象,创建一个对象,需要经过类加载过程,销毁一个对象,需要走GC垃圾回收流程,都是 ...
- Hadoop大数据平台节点的动态增删
环境:CentOS 7.4 (1708 DVD) 工具:MobaXterm 一. 节点的动态增加 1. 为新增加的节点(主机)配置免密码登录.使用ssh-keygen和ssh-copy-id命令(详 ...
- MathType总结编辑括号的类型（中）
MathType中的符号模板多种多样,能够满足各类用户的使用需求.即使是一些不常用的符号也有相应的模板,因为在工作学习中我们都需要他们,只是有的用的多有的用的少而已,下面我们就一起来看看公式编辑器编辑 ...
- 如何使用iMazing编辑iOS设备的备份
乍一看,编辑iPhone或iPad的备份似乎是一个奇怪的命题,但实际上这样做的原因有很多,例如在备份数据损坏时进行修复,又如合并来自不同设备的数据. iMazing对备份文件编辑的支持非常全面,即使备 ...
- 关于Boom 3D预设音效的妙用，如何鉴赏音乐流派
音乐流派,亦可理解为音乐的曲风.类型.不同的音乐流派表达的音乐形式也更不相同.例如民族音乐.古典音乐等这种传统乐器的应用,流行音乐则更注重节奏.韵律的变化.带给我们的音乐感受也不尽相同. Boom 3 ...
- Python生成随机测试数据
前言 安装 pip install Faker 使用 from faker import Faker fake = Faker() name = fake.name() address = fake. ...
- python ddt实现数据驱动
首先安装ddt模块,命令:pip install ddt 通常情况下,data中的数据按照一个参数传递给测试用例,如果data中含有多个数据,以元组,列表,字典等数据,需要自行在脚本中对数据进行分解或 ...
- 上位机学习技巧——c#（原创）
(一直更新.......) 一.扫描可用串口 二.捕获鼠标移到控件(上升沿)/离开控件(下降沿) 在窗体生成代码中,找到对应按钮(这里使用butten1)区域,在区域内添加两个事件,分别是: 鼠标移到 ...
- 关于Linux虚拟机连接不上网络的问题
前阵子自学Linux(版本是CentOS6 -VMware ),因为连不上网的问题搁置了一段时间,昨天又重新拾起来,花了一下午时间终于搞定.下面说几点,给自己学习历程一个记录,也希望能帮到其他初学者. ...