1.v-bind

可简写为":"

你看到的 v-bind 等被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。

我们可以使用 v-bind 来绑定元素特性!

在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

注:使用  v-*  属性绑定数据是不需要 {}  包裹的

 <!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="vue">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性,并设置了初始值
message: 'Hello Vue!'
}
});
</script>
</body>
</html>

2.v-if,v-else

条件判断语句

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<h1 v-if="ok">YES</h1>
<h1 v-else>NO</h1> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性,并设置了初始值
ok: true
}
});
</script>
</body>
</html>

3.v-else-if

  • v-if
  • v-else-if
  • v-else

注: ===  三个等号在 JS 中表示绝对等于(就是数据与类型都要相等)

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue"> <h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>who</h1> </div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性,并设置了初始值
// ok: true
type: 'A'
}
});
</script>
</body>
</html>

4.v-for

循环数据

格式说明:

 <div id="vue">
<li v-for="(item, index) in items">
{{item.message}}{{index}}
</li>
</div>

  注: items  是数组, item 是数组元素迭代的别名, index 是数组元素迭代的索引。我们之后学习的Thymeleaf模板引擎的语法和这个十分的相似!

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--view层模块-->
<div id="vue">
<li v-for="(item, index) in items">
{{item.message}}{{index}}
</li>
</div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性,并设置了初始值
// ok: true
// type: 'A'
items: [
{message:"编号为1,索引为"},
{message:"编号为2,索引为"},
{message:"编号为3,索引为"}
]
}
});
</script>
</body>
</html>

  测试 :在控制台输入 vm.items.push({message:"编号为4,索引为"}) ,尝试追加一条数据,你会发现浏览器中显示的内容会增加一条  编号为4,索引为3 .

5.v-on

可简写为“@”

事件监听

语法: v-on:需要监听的事件=”函数“

 <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--view层模块-->
<div id="vue">
<button v-on:click="sayHi">按钮</button>
</div> <!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#vue', //绑定元素的 ID
data: { //数据对象中有一个名为 message 的属性,并设置了初始值
message: "第一个Vue项目"
},
methods: { // 方法必须定义在Vue的Methods对象中,v-on:事件
sayHi: function (event) {
alert(this.message);
}
} });
</script>
</body>
</html>

6.Vue常用的7个属性,8个方法以及7个指令(787原则)

7.Vue其他属性,方法以及指令

3.Vue的基本语法的更多相关文章

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

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

  2. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  3. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  4. vue 的基本语法

    一 . Vue 的介绍 1 . 前端的三大框架 (可以去 GitHub 查看三个框架的 star 星) vue   :  作者尤雨溪, 渐进式的JavaScript 框架 react :  Faceb ...

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

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

  6. Vue.js 模板语法

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

  7. VUE:模板语法(小白自学)

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

  8. vue 的基本语法和常用指令

    什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  9. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  10. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

随机推荐

  1. 端口转发之 nc

    nc使用方法: Ncat 7.50 ( https://nmap.org/ncat ) Usage: ncat [options] [hostname] [port] Options taking a ...

  2. Ubuntu18.4编译pmon,缺少makedepend和pmoncfg

    提示makedepend找不到解决方法:$ apt-cache search makedependxutils-dev - X Window System utility programs for d ...

  3. 关于使用IDEA,使用Maven打包项目

    关于使用IDEA,使用Maven打包项目 在近期的一个接口项目中,使用的是SpringBoot + Maven的配置, 由于使用IDEA不久,不太熟悉使用Maven进行项目打包.记录一下. 由于使用的 ...

  4. SimdJsonSharp:每秒解析千兆字节的JSON

    SimdJsonSharp: Parsing gigabytes of JSON per second C# version of lemire/simdjson (by Daniel Lemire ...

  5. Pandas 学习 第9篇:DataFrame - 数据的输入输出

    常用的数据存储介质是数据库和csv文件,pandas模块包含了相应的API对数据进行输入和输出: 对于格式化的平面文件:read_table() 对于csv文件:read_csv().to_csv() ...

  6. Winform中设置ZedGraph的颜色填充使用Fill

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  7. Attract队作品简介

    湖南师范大学  Attract队 荣获“航天宏图杯”PIE遥感图像处理软件二次开发大赛二等奖 作品名称:基于深度学习的遥感影像分类系统-以长沙市居住区分类为例 团队简介:周亮(指导老师).张慧(组长) ...

  8. Linux帮助——获取帮助

    Linux帮助——获取帮助 摘要:本文主要学习了Linux众多命令中最基础的帮助命令. 介绍 作用 Linux的所有操作都可以通过命令行来完成,所以学习Linux最好从命令行开始.因为Linux的命令 ...

  9. Python基础24

    import 与 from import 知乎上说的简洁明了,zhihu.com/question/38857862 from import, 导入之后就能拿来用了,直接用!到处用!

  10. RT-Thread点亮led

    下载默认工程 https://www.rt-thread.org/ 配置rtconfig.h #define STM32F103RE //修改成自己的板子 #define RT_HSE_VALUE 8 ...