六：Vue的v-bind指令作用：绑定标签上的所有属性其简写 ":"

6.1：    例如：<p v-bind:id="test">Hello world</p>====><p :id="test">Hello world</p>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <script src="https://vuejs.org/js/vue.min.js"></script>

     <style>

         .p-style1 {

             background-color: aquamarine;

             color: red;

         }

         .bolder {

             font-weight: bolder;

         }

         .p-style2 {

             background-color: rgb(, , );

             color: blue;

         }

         [v-cloak] {

             background-color: burlywood;

         }

     </style>

 </head>

 <body>
<div id="app">

        <p v-bind:id="'pTest'"></p>

        <p :id="idName"></p>

</div>

<script>

        var vm = new Vue({

            el: "#app",

            data: {

                idName: "dataP",

            }

        });

    </script>
</body>

</html>

　　说明：<p v-bind:id=" 'pTest' "></p>   //这个p标签的id号是pTest

<p :id="idName"></p>           //这个p标签的id号是dataP

在ie浏览器上显示如下图

6.2:Vue的v-bind指令在：class=""等号右边的双引号可以使用js表达式：showStyle是data中的变量p-style1是顶部的css中的样式

<div id="app">

  <p :class="showStyle?'p-style1':''">ppppppp</p>

</div>

    <script>

        var vm = new Vue({

            el: document.getElementById("app"),

            data: {

                showStyle: true

            }

        });

    </script>
</body>

</html>

　　在ie浏览器中显示如图所示

6.3Vue中的：class也可以向下面这个样子写

<div id="app">

  <p :class="{'p-style1':showStyle}">pppppppp</div>

    <script>

        var vm = new Vue({

            el: document.getElementById("app"),

            data: {

                showStyle: true

            }

        });

    </script>

在ie浏览器中显示效果如图和6.2显示效果是一个样的

七、Vue的v-model双向数据绑定

1）v-model可以处理 input、textArea、select、radio、checkBox、button：该属性只能用在表达那标签，或有value属性的标签上。

2）v-cloak  vue中自带的指令，作用是当加载完成后移除该指令属性，即我们希望任何在没有加载完成之前呈现的样式都可以同过v-cloak来渲染

3）v-once使用该指令，页面视图只渲染一次

7.1刚开始msg=Hello 通过v-model指令实现了双向数据绑定即msg=Hello world

     <div id="app" v-cloak>

         {{msg}}

         <input type="text" v-model="msg">

     </div>

 <script>

         var vm = new Vue({

             el: "#app",

             data: {

                 msg: "Hello"

             }

         });

     </script>

如图所示

        

7.2Vue实现range范围扩大和缩小

<div id="app" v-cloak>

        {{msg}}

         <br>

        <input type="text" v-model="range">

        <input type="range" v-model="range">

</div>

  <script>

        var vm = new Vue({

            el: "#app",

            data: {

                msg: "Hello",

                range:

            }

        });

    </script>

在ie浏览器中显示的效果如图所示

        

二、Vue基础语法的更多相关文章

  1. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  3. 一、vue基础语法（轻松入门vue）

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  4. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

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

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

  6. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

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

  7. 零基础学习JavaSE（二）——基础语法

    二.Java 基础语法 2.1 Java 基础语法 java是一个面向对象的程序语言,及可把一切事物当做对象处理,而java的事物中最小的就是class (类),类中有方法,类可以创建对象,并且有一些 ...

  8. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  9. Bootstrap定制(二)less基础语法

    前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...

  10. java(二、基础语法和基本数据类型)

    Java 基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一 ...

随机推荐

  1. 实际开发中 dao、entity的代码怎样自动生成？一款工具送给你

    01 关注"一猿小讲"朋友,都知道以往的文章一直倡导拒绝 CRUD,那到底什么是 CRUD?今天咱们就聊聊 Java 妹子小猿与数据库老头交互的事儿. 产品小汪铿锵有力的说:小猿同 ...

  2. mysql物理结构

    MySQL是通过文件系统对数据和索引进行存储的. MySQL从物理结构上可以分为日志文件和数据索引文件. MySQL在Linux中的数据索引文件和日志文件都在/var/lib/mysql目录下. 日志 ...

  3. 浅谈Java接口(Interface)

    浅谈Java接口 先不谈接口,不妨设想一个问题? 如果你写了个Animal类,有许多类继承了他,包括Hippo(河马), Dog, Wolf, Cat, Tiger这几个类.你把这几个类拿给别人用,但 ...

  4. hadoop（学习）

                                                                                hadoop Hadoop是一个用于海量数据统计 ...

  5. Servlet 中文乱码问题解析及详细解决方法

    使用 servlet 向客户端浏览器回送中文时,经常出现中文乱码的问题,这里给大家完完全全地搞明白: 一.基本常识 中文系统默认是 GBK 编码(GBK是对GB2312的补充,包含它) 需要处理编码问 ...

  6. python 爬虫之 urllib 实践

    文章更新于:2020-03-19 注:本文参考官方文档进行 urllib 的讲解. 文章目录 一.urllib 模块介绍 1.urllib.request.py模块 (1)`urlopen`函数 (2 ...

  7. 关于TD信息树自己的体验和建议

    自己选择的是17级学长13组的TD消息树,通过对这个软件的使用,感觉整体上还是很好的,他的主要功能就相当于把微信的朋友圈还有qq的好友动态等功能集合到了一起.这个软件整体就相当于一个空间,可以加好友互 ...

  8. django发送邮件的坑

    django发送邮件的坑 配置django发邮件的时候本地发送时好好的,但是放到阿里云的服务器上却不能发送. 经过一系列的排查后终于发现是阿里云把25端口给封了. 后来改用smtps的方式发送,更改d ...

  9. Exercise 1测试

    此篇博客旨在测试Exercise 1,发现其中问题并解决. 首先,我们使用codeblocks对Exercise 1进行编译.结果如下: 可以发现经编译后的Exercise 1并无编译错误,只有两个w ...

  10. mysql 的CURDATE() 与 NOW() 的区别

    SELECT CURDATE() 查询出的是当前天的开始时间点,比如今天是 2015.02.03号,那不管我在今天什么时间点查询,结果都是今天的凌晨,即今天的开始的那个时间点,因为它只具体到年月日,没 ...