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的场景. ...
随机推荐
- 算法学习笔记：Kosaraju算法
Kosaraju算法一看这个名字很奇怪就可以猜到它也是一个根据人名起的算法,它的发明人是S. Rao Kosaraju,这是一个在图论当中非常著名的算法,可以用来拆分有向图当中的强连通分量. 背景知识 ...
- 公司新来的小姐姐不懂java中的static关键字，这样给她描述不香吗？
前言 static关键字是摆在刚入行编程语言的小白们面前的一道难题,为什么要用static?使用它有什么好处?修饰方法和修饰变量有什么区别?本文将就java中static关键字的使用方法及注意事项进行 ...
- 给PDF批量添加文本链接
为了进一步补充说明文件中的一些重要内容,PDF文件的创建者会为一些文本创建链接,方便阅读者访问相关的网站,获取更多的信息. 我们可以通过使用pdfFactory文本链接功能来实现以上需求,另外,我们还 ...
- Ayoa：麻雀虽小、五脏俱全的思维导图工具
Ayoa是一款简单好用的思维导图软件,在PC端可以使用Ayoa网页版,也就是不用下载即可使用,十分轻便省力.但麻雀虽小,五脏可十分俱全,同类的其他大型软件有的东西它可一点不少,甚至还有更多的特殊功能. ...
- 【CF607B】Zuma——区间dp（记忆化搜索/递推）
以下是从中文翻译成人话的题面: 给定一个长度小于等于500的序列,每个数字代表一个颜色,每次可以消掉一个回文串,问最多消几次可以消完? (7.16) 这个题从洛谷pend回来以后显示有103个测试点( ...
- JS指定音频audio在某个时间点进行播放，获取当前音频audio的长度，音频时长格式转化
前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio ...
- Java反射——java.lang.Class和类的加载
反射的基础: java.lang.Class Class类的实例对象,用于记录类描述信息. 源码说:represent classes and interfaces in a running Java ...
- moviepy音视频剪辑：TextClip不支持中文字符以及OSError: magick.exe: unable to read font 仿宋_GB2312.ttf的解决办法
☞ ░ 前往老猿Python博文目录 ░ 一.引言 moviepy对中文和多语言环境的支持做得并不好,包括中文文件名以及用于显示文字的TextClip就是典型的中文支持方面存在问题的.对于编解码的问题 ...
- 图像处理gamma修正（伽马γ校正）的原理和实现算法
☞ ░ 前往老猿Python博文目录 ░ 本文转自博客园:淇淇宝贝的文章<图像处理之gamma校正>,原文链接:https://www.cnblogs.com/qiqibaby/p/532 ...
- moviepy音视频剪辑：使用fl_time进行时间特效处理报错ValueError: Attribute duration not set
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在使 ...