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的场景. ...
随机推荐
- C#设计模式-外观模式（Facade Pattern）
引言 在软件测试中,一般都是在功能测试稳定的情况下再进行UI自动化测试.或者进行性能测试.如果一个一个进行太麻烦,此时可以使用对外提供一个简单接口,通过这个接口可以访问内部一群接口.例如进行UI自动化 ...
- SpringBoot整合MyBatis，HiKari、Druid连接池的使用
SpringBoot整合MyBatis 1.创建项目时勾选mybatis.数据库驱动. mysql驱动默认是8.x的版本,如果要使用5.x的版本,创建后到pom.xml中改. 也可以手动添加依赖 ...
- ABBYY FineReader添加盖章戳记
PDF编辑器允许您如同在纸质文档上盖章一样在 PDF 文档上添加戳记.您可以从可用的戳记列表中选择戳记或者创建自己的戳记,然后添加任何所需的文本.戳记日期和时间或者图像. 如果要在页面上加上戳记,可以 ...
- 怎么用CDR来批量导出图片
我们通过CorelDRAW上方菜单栏"布局"中的"插入页面"可以创建多个页面,同时编辑,适合比如书籍排版,杂志排版等等这些需要进行多页面编辑的工作. 图1:CD ...
- 我给 Apache 顶级项目提了个 Bug
这篇文章记录了给 Apache 顶级项目 - 分库分表中间件 ShardingSphere 提交 Bug 的历程. 说实话,这是一次比较曲折的 Bug 跟踪之旅.10月28日,我们在 GitHub 上 ...
- Mellanox 4036配置
1.前言 内置factory-default 会重置所有参数到出厂设置. 内置reboot.拔电源就是重启. 外置reset就是重置芯片中数据,不会恢复到出厂设置. 2.感受下恢复出厂过程 4036- ...
- Beta冲刺随笔——Day_Seven
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 今日事今日毕 林涛: ...
- python基本输入输出函数
python程序设计中有三个重要的基本输入.输出函数,用于输入.转换和输出,分别是input(),eval(),print() 1,input()函数 """ input ...
- 基于gRPC的注册发现与负载均衡的原理和实战
gRPC是一个现代的.高性能.开源的和语言无关的通用RPC框架,基于HTTP2协议设计,序列化使用PB(Protocol Buffer),PB是一种语言无关的高性能序列化框架,基于HTTP2+PB保证 ...
- celery使用-win10和linux
win10启动方式 celery -A celery_tasks.main worker -l debug -P eventlet linux启动方式 /usr/local/bin/celery ce ...