第六篇:vue.js模板语法(,属性,指令,参数)
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。(看不懂,不管)
属性(不完全懂)
v-bind是什么东西:HTML 属性中的值应使用 v-bind 指令(我的理解:用html写的东西,就要用v-bind)
v-bind有缩写 v-bind:class 等价于:class (针不戳)
设计一个可以改变字体颜色和字体背景颜色的程序 html 基本组成单位 tag标签 名字 属性 文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
background: #444; //对class1的颜色和背景进行设定
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app">
<label for="r1">修改颜色</label> //label与"r1"绑定
<input type="checkbox" v-model="use" id="r1"> //设定一个选择器类型的输入框,双向数据绑定use,
<br><br> //这个东西存在是为了空一行,可还行 //然后对应id是:"r1"
<div v-bind:class="{'class1': use}"> //如果use是true就让<div>写的文本用class1的颜色
v-bind:class 指令 //否则,不用
</div>
</div> <script>
new Vue({
el: '#app',
data:{
use: false //设定初始状态,true或者false
}
});
</script>
</body>
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<div id="app">
<p v-if="seen">现在你看到我了</p> //这个我把它理解为if条件语句
</div> <script>
new Vue({
el: '#app', //id与上方对应
data: {
seen: true //seen是ture,"你现在看到我了"才会显示
}
})
</script>
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性(更新网页)：
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div> <script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com' //按钮跳转网页(针不戳),终于学了个实用的东西了
}
})
</script>
第六篇:vue.js模板语法(,属性,指令,参数)的更多相关文章
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- Vue.js模板语法介绍
Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 使 ...
- Vue.js模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- vue基础---模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- VUE：模板语法（小白自学）
VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...
随机推荐
- Python-安装lmdb失败-解决方法
使用pip install lmdb 时报错 ERROR: Command errored out with exit status 1: python setup.py egg_info Check ...
- OpenCloudOS使用snap安装.NET 6
开源操作系统社区 OpenCloudOS 由腾讯与合作伙伴共同倡议发起,是完全中立.全面开放.安全稳定.高性能的操作系统及生态.OpenCloudOS 沉淀了多家厂商在软件和开源生态的优势,继承了腾讯 ...
- LVGL库入门教程 - 颜色和图像
颜色 构造颜色 在 LVGL 中,颜色以结构 lv_color_t 表示.在最开始移植整个工程时,曾经在 lv_conf.h 中修改过颜色深度: /*Color depth: 1 (1 byte pe ...
- RabbitMD大揭秘
RabbitMD大揭秘 欢迎关注H寻梦人公众号 通过SpringBoot整合RabbitMQ的案例来说明,RabbitMQ相关的各个属性以及使用方式:并通过相关源码深刻理解. Queue(消息队列) ...
- python带你采集不可言说网站数据，并带你多重骚操作~
前言 嗨喽,大佬们好鸭!这里是小熊猫~ 今天我们采集国内知名的shipin弹幕网站! 这里有及时的动漫新番,活跃的ACG氛围,有创意的Up主. 大家可以在这里找到许多欢乐. 目录(可根据个人情况点击你 ...
- Day01 对前端的初步了解
了解了工作性质以及流程 产品经理+UI+前端程序员+后端程序员+测试人员 了解了工作会做到的项目 pc端项目,后台管理系统,APP,小程序,移动端网页 了解了后续需要学到的课程 HTML+CSS Ja ...
- HashMap源码深度剖析，手把手带你分析每一行代码，包会！！！
HashMap源码深度剖析,手把手带你分析每一行代码! 在前面的两篇文章哈希表的原理和200行代码带你写自己的HashMap(如果你阅读这篇文章感觉有点困难,可以先阅读这两篇文章)当中我们仔细谈到了哈 ...
- 【问题解决】Axios调用文件下载获取不到文件名
问题描述 自己开发了一个后端下载文件的接口,然后通过浏览器直接访问这个接口,浏览器能正确得到文件名并下载: 而使用Axios时发现获取不到,经过打印响应体发现响应头里没有文件名 而Java后端代码里是 ...
- 如何用空气质量查询API接口进行快速开发
空气质量的好坏反映了空气污染程度,它是依据空气中污染物浓度的高低来判断的.空气污染是一个复杂的现象,在特定时间和地点空气污染物浓度受到许多因素影响.来自固定和流动污染物的人为污染物排放大小是影响空 ...
- 小A的柱状图_via牛客网
题目 链接:https://ac.nowcoder.com/acm/contest/28537/Q 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语 ...