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模板语法(,属性,指令,参数)的更多相关文章

  1. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  2. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

  3. Vue.js模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

  5. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  6. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  7. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  8. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. VUE：模板语法（小白自学）

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. 【Redis】字典

    Redis 字典 基本语法 字典是Redis中的一种数据结构,底层使用哈希表实现,一个哈希表中可以存储多个键值对,它的语法如下,其中KEY为键,field和value为值(也是一个键值对): HSET ...

  2. VMware 安装 Anolis OS

    安装时参考的以下文章 VMware Workstation Pro 虚拟机安装 VMware Workstation Pro 安装 龙蜥操作系统(Anolis OS) Anolis OS 8 安装指南 ...

  3. 【.NET 6】多线程的几种打开方式和代码演示

    前言: 多线程无处不在,平常的开发过程中,应该算是最常用的基础技术之一了.以下通过Thread.ThreadPool.再到Task.Parallel.线程锁.线程取消等方面,一步步进行演示多线程的一些 ...

  4. C语言学习之我见-strcat()字符拼接函数（有缺陷）

    strcat()函数,用于两个字符串的拼接. (1)函数原型: char * strcat(char *Dest,const char * Source); (2)头文件: #include < ...

  5. 高级web网页人脸识别tracking.js

    what?你没有看错,强大的JavaScript也可以实现人脸识别功能.小编精心整理了一个人脸识别的JavaScript库(tracking.js),通过这篇文章,你可以了解到如何在网页中实现一个人脸 ...

  6. c++(qt)播放wav文件的四种方式

    //方法一(要符合RIFF规范) 1 QSound::play("E:/Projects/报警声1-1.wav"); //方法二(要符合RIFF规范) 1 QSoundEffect ...

  7. React技巧之循环遍历对象

    原文链接:https://bobbyhadz.com/blog/react-loop-through-object 作者:Borislav Hadzhiev 正文从这开始~ 遍历对象的键 在React ...

  8. UiPath数据抓取Data Scraping的介绍和使用

    一.数据抓取(Data Scraping)的介绍 使用截据抓取使您可以将浏览器,应用程序或文档中的结构化数据提取到数据库,.csv文件甚至Excel电子表格中. 二.Data Scraping在UiP ...

  9. 016（剪花布条）（KMP）

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1465 题目思路:KMP模板题,该说的都在代码里 #include<bits/stdc++. ...

  10. 浅议.NET遗留应用改造

    浅议.NET遗留应用改造 TLDR:本文介绍了遗留应用改造中的一些常见问题,并对改造所能开展的目标.原则.策略进行了概述. 一.背景概述 1.概述 或许仅"遗留应用"这个标题就比较 ...