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的场景. ...
随机推荐
- Hadoop大数据平台节点的动态增删
环境:CentOS 7.4 (1708 DVD) 工具:MobaXterm 一. 节点的动态增加 1. 为新增加的节点(主机)配置免密码登录.使用ssh-keygen和ssh-copy-id命令(详 ...
- java后端开发三年！你还不了解Spring 依赖注入，凭什么给你涨薪
前言 前两天和一个同学吃饭的时候同学跟我说了一件事,说他公司有个做了两年的人向他提出要涨薪资,他就顺口问了一个问题关于spring依赖注入的,那个要求涨薪的同学居然被问懵了...事后回家想了想这一块确 ...
- IDM下载器的队列功能有什么用？
使用IDM下载器中的队列功能,可以帮助大家快速分类下载任务,这样,就可以统一管理有同样下载需求的内容. 一.队列的添加及设置 打开IDM下载器,单击菜单中的"队列",可以看到在左侧 ...
- Jmeter （三）变量、参数化、函数
一.参数化 1.在参数中定义变量:${变量名称} 变量定义:2种 2.在用户自定义变量User Defined Variable 或者 用户参数User Parameters中,设置key.value ...
- 目前工作中用到的linux命令
crontab -e 查看并且编辑定时脚本命令 每一分钟执行一次脚本,并且写入log */1 * * * * php /var/www/api/cron/Mission/setMeetingDone ...
- python 如何跳过异常继续执行
使用try...except...语句,类似于if...else...,可以跳过异常继续执行程序,这是Python的优势 用法如下: 1 2 3 4 5 6 try: # 可能会 ...
- Python爬虫实现翻译功能
前言 学了这么久的python理论知识,需要开始实战来练手巩固了. 准备 首先安装爬虫urllib库 pip install urllib 获取有道翻译的链接url 需要发送的参数在form data ...
- Appium上下文和H5测试(二)
坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 文章总览图 一.往期回顾 loc='new UiSelector().text("全程班&q ...
- 最新小样本学习综述 A Survey on Few-Shot Learning | 四大模型Multitask Learning、Embedding Learning、External Memory…
目录 原文链接: 小样本学习与智能前沿 01 Multitask Learning 01.1 Parameter Sharing 01.2 Parameter Tying. 02 Embedding ...
- IAR编译错误Error[e16]: Segment ISTACK (size: 0xc0 align: 0) is too long for segment definition. At least 0x8 more bytes needed. The problem occurred while processing the segment
问题:个人使用的是IARV9.10编译CC2541的工程,没有做任何修改,直接编译出现如下错误 Error[e16]: Segment ISTACK (size: 0xc0 align: 0) is ...