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. Unreal Engine 4 系列教程 Part 6：动画教程

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. 【08月28日】A股滚动市盈率PE历史新低排名

    2010年01月01日 到 2019年08月28日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年08月28日市盈率在300以下的公司. 1 - 文山电力(SH600995) - 历史 ...

  3. Qt 编译配置相关总结

    MinGW 与 MSVC 编译的区别 我们可以从 Qt 下载页面看到两种版本编译器,如下图: 我们来对比一下这两个编译器的区别: MSVC 是指微软的 VC 编译器. MinGW 是 Minimali ...

  4. LeetCode28——实现strStr()

    6月中下旬辞职在家,7 月份无聊的度过了一个月.8 月份开始和朋友两个人写项目,一个后台和一个 APP ,APP 需要对接蓝牙打印机.APP 和蓝牙打印机都没有搞过,开始打算使用 MUI 开发 APP ...

  5. Vue.js 源码分析(十五) 指令篇 v-bind指令详解

    指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if.v-html.v-pre等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指 ...

  6. nginx代理tcp请求

    1.概述 ngx_stream_core_module 这个module在nginx1.90后开始支持.开启nginx的tcp代理支持--with-stream=dynamic --with-stre ...

  7. 【题解】Puzzle [Uva1399]

    [题解]Puzzle [Uva1399] 传送门:\(\text{Puzzle [Uva1399]}\) [题目描述] 给定 \(m\) 和 \(n\),表示有 \(m\) 种不同的字符(大写字母\( ...

  8. 2018-8-10-win10-uwp-拖动控件

    原文:2018-8-10-win10-uwp-拖动控件 title author date CreateTime categories win10 uwp 拖动控件 lindexi 2018-08-1 ...

  9. C#通过PInvoke调用c++函数的备忘录

    目前知道的情况被调用的C/C++函数只能是全局函数 不能调用类中的成员方法 被调用的C函数必须使用extern “C“包含,保证采用的导出函数名生成规则和.NET一致 函数调用约定通常使用WINAPI ...

  10. 如何将LNMP拆分为LNP+MySQL

    1.备份172.16.1.7上的数据库信息 [root@web01 ~]# mysqldump -uroot -p'oldxu.com' --all-databases > mysql-all. ...