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. JavaScript中动态生成表格

    动态生成表格,首先需要输入并获取动态的数字,html中结构代码如下:行:<input type="text" id="row" value="5 ...

  2. Quick Pow: 如何快速求幂

    今天讲个有趣的算法:如何快速求 \(n^m\),其中 n 和 m 都是整数. 为方便起见,此处假设 m >= 0,对于 m < 0 的情况,求出 \(n^{|m|}\) 后再取倒数即可. ...

  3. C#.NET笔试题-高级

    1.说说什么是架构模式. 1,分层. 2,分割. 分层是对网站进行横向的切分,那么分割就是对网站进行纵向的切分.将网站按照不同业务分割成小应用,可以有效控制网站的复杂程度. 3,分布式. 在大型网站中 ...

  4. Throwable类中3个异常处理的方法和finally代码块

    /* Throwable类中定义了3个异常处理的方法 String getMessage() 返回此 throwable 的简短描述. String toString() 返回此 throwable ...

  5. 基于单层决策树的AdaBoost算法原理+python实现

    这里整理一下实验课实现的基于单层决策树的弱分类器的AdaBoost算法. 由于是初学,实验课在找资料的时候看到别人的代码中有太多英文的缩写,不容易看懂,而且还要同时看代码实现的细节.算法的原理什么的, ...

  6. Ubuntu出现视频无法正常播放的问题

    原因是没有安装相关的解码包,参考这个方法: ubuntu下B站(bilibili)视频无法播放 一条命令解决 sudo apt install ubuntu-restricted-extras 要是有 ...

  7. C#/VB.NET 添加多行文本水印到Word文档

    一般情况下,在Word中添加文字水印仅支持添加一个文本字样的水印,但在复杂的办公环境中,由于对不同文档的设计要求,需要在Word文档中添加平铺水印效果,即文档中的水印文字以多行多列分布的形式存在.本文 ...

  8. 聊聊 C++ 中的几种智能指针 （下）

    一:背景 上一篇我们聊到了C++ 的 auto_ptr ,有朋友说已经在 C++ 17 中被弃用了,感谢朋友提醒,今天我们来聊一下 C++ 11 中引入的几个智能指针. unique_ptr shar ...

  9. zabbix 6.2.0部署

    zabbix 6.2官方部署文档 https://www.zabbix.com/documentation/6.2/en/manual/installation/install下载zabbix6.2安 ...

  10. linux学习随笔

    date +%Y-%m-%d\ %H:%M:%S cal 10 2009 yum install bc //计算器 bc 安装thefuck yum install gcc gcc++ python ...