第六十篇：Vue的基本使用
好家伙，要来了，经典“hello world”
试用一下vue
① 导入 vue.js的 script 脚本文件
② 在页面中声明一个将要被vue所控制的DOM区域
③ 创建vm实例对象（vue实例对象）
试一试 :随便开一个.html文件
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Great</title> </head> <body> <div id="app">{{ username }}</div> <!-- 1.导入Vue的库文件,在window全局就有了Vue这个构造函数--> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <!--2.创建Vue的实例对象--> <script>
//vm 就是viewmodel
const vm = new Vue({
//el属性是固定的写法,表示当前的vm实例要控制页面上的那个区域,接受的值是一个选择器
el:'#app',
//data对象就是要渲染到页面上的数据
data:{ username:'zhangsan'
} }) </script>
</body> </html>
效果如下:
看着没什么问题
2.vue的指令
2.1.内容指令v-text
特性:会覆盖标签内部原本的内容
2.2.{{}}插值语法
如这个
<div id="app">{{ username }}</div>
2.3.v-html指令
用于标签的插入
1．内容渲染指令
1．v-text 指令的缺点：会覆盖元素内部原有的内容！
2．{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3．v-html指令的作用：可以把带有标签的字符串，渲染成真正的HTML内容！
2．属性绑定指令
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
·在vue中，可以使用v-bind：指令，为元素的属性动态绑定值；
·简写是英文的：
·在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
属性绑定v-bind
(v-bind:src 与 :src是等效的 ":"是"v-bind"的简写)
为元素的属性动态绑定
<div :title=＂'box'＋index＂>这是一个 div</div>
用法如下:
效果如下:
第六十篇：Vue的基本使用的更多相关文章
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- 第四十篇:Vue的生命周期(一)
好家伙,军训结束了,回归 Vue实例的生命周期 1.什么是生命周期? 从Vue实例创建,运行到销毁期间总是伴随着各种各样的事件,这些事件,统称为生命周期. 2.什么是生命周期钩子? 生命周期函数的别称 ...
- 第六十篇、音视频采集硬编码（H264+ACC）
使用 AVCaptureSession进行实时采集音视频(YUV.),编码 通过AVCaptureVideoDataOutputSampleBufferDelegate获取到音视频buffer- 数据 ...
- FastAPI（六十二）实战开发《在线课程学习系统》需求分析
前言 基础的分享我们已经分享了六十篇,那么我们这次分享开始将用一系列的文章分享实战课程.我们分享的系统是在线学习系统.我们会分成不同的模块进行分享.我们的目的是带着大家去用fastapi去实战一次,开 ...
- 《手把手教你》系列技巧篇（六十）-java+ selenium自动化测试 - 截图三剑客 -中篇（详细教程）
1.简介 前面我们介绍了Selenium中TakeScreenshot类来截图,得到的图片是浏览器窗口内的截图.有时候,只截浏览器窗口内的图是不够的,而且TakeScreenshot截图只针对浏览器的 ...
- 《手把手教你》系列技巧篇（六十五）-java+ selenium自动化测试 - cookie -下篇（详细教程）
1.简介 今天这一篇,宏哥主要讲解:利用WebDriver 提供可以读取.添加和删除cookie 信息的相关操作方法.验证浏览器中是否存在某个cookie.原因是:因为基于真实的cookie 的测试是 ...
- 《手把手教你》系列技巧篇（六十六）-java+ selenium自动化测试 - 读写excel文件 - 上篇（详细教程）
1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...
- 《手把手教你》系列技巧篇（六十八）-java+ selenium自动化测试 - 读写excel文件 - 下篇（详细教程）
1.简介 今天继续操作Excle,小伙伴或者童鞋们是不是觉得宏哥会介绍第三种工具操作Excle,今天不介绍了,有两种就够用了,其实一种就够用了,今天主要是来介绍如何使用不同的数据类型读取Excel文件 ...
- 《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）
1.简介 在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...
随机推荐
- 一、shell编程与变量
目录 命令是什么 命令是如何运行的: 基本语法 解释器 注释 如何执行 输入.输出流 重定向 管道符 | 变量 常见Shell变量的类型包括: 变量命名原则 单引号和双引号 反引号 变量作用范围 查看 ...
- BUUCTF-[BJDCTF2020]你猜我是个啥
[BJDCTF2020]你猜我是个啥 下载压缩包提示打不开,16进制直接拉最下方可以查看到flag flag{i_am_fl@g}
- CVE-2021-3156漏洞复现
CVE-2021-3156linux sudo 权限提升 版本ubantu18.04 使用这个命令可以是普通用户直接提升至管理员权限. 手动测试终端输入 sudoedit -s / 不知道什么原因ub ...
- 好用到爆！GitHub 星标 32.5k+的命令行软件管理神器，功能真心强大！
前言(废话) 本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合 MongoDB 的文章,结果在通过 brew 安装 MongoDB 的时候竟然报错了.原因很简单,公司这台 Mac 上的 homebr ...
- nginx源码层面探究request_time、upstream_response_time、upstream_connect_time与upstream_header_time指标具体含义
背景概述 最近计划着重分析一下线上各api的HTTP响应耗时情况,检查是否有接口平均耗时.99分位耗时等相关指标过大的情况,了解到nginx统计请求耗时有四个指标:request_time.upstr ...
- arcgis创建postgre企业级数据库
什么是企业级地理数据库? 企业级地理数据库(ArcSD Enterprise,sde)是和 arcGIS 套件集成程度最高的地理数据库:创建时需要用到安装 arcGIS Server 时的 [ecp ...
- jfinal中如何使用过滤器监控Druid监听SQL执行？
摘要:最开始我想做的是通过拦截器拦截SQL执行,但是经过测试发现,过滤器至少可以监听每一个SQL的执行与返回结果.因此,将这一次探索过程记录下来. 本文分享自华为云社区<jfinal中使用过滤器 ...
- Tapdata肖贝贝：实时数据引擎系列(三) - 流处理引擎对比
摘要:本文将选取市面上一些流计算框架包括 Flink .Spark .Hazelcast,从场景需求出发,在核心功能.资源与性能.用户体验.框架完整性.维护性等方面展开分析和测评,剖析实时数据框架 ...
- 2022-7-14 java_2 第七组 刘昀航
@ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...
- System类的常用方法
java.lang...System类中提供了大量的静态方法,可以获取与系统相关的信息或系统级操作,在System类的API文档中,常用的方法有: public static long current ...