六：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. .git/info/refs not valid: is this a git repository?

    今天用idea git提交的时候遇到了这个神奇的问题.git/info/refs not valid: is this a git repository? 看了很多网上的都不靠谱,最后自己乱点着找, ...

  2. 活久见！Linux命令行居然也可以用来查看图像？

    在 Linux 中有很多 GUI 应用程序可以查看图像,但是这对经常使用命令行来工作的人可能会觉得很繁琐.今天要介绍的是 3 个实用的 CLI 图像查看器来在终端上查看图像,让那些使用 CLI 的朋友 ...

  3. 跟面试官侃半小时MySQL事务，说完原子性、一致性、持久性的实现

    提到MySQL的事务,我相信对MySQL有了解的同学都能聊上几句,无论是面试求职,还是日常开发,MySQL的事务都跟我们息息相关. 而事务的ACID(即原子性Atomicity.一致性Consiste ...

  4. ENVI 安装

    本文转自https://jingyan.baidu.com/article/2d5afd69d50e9585a2e28e37.html  但对该文有所补充,建议看本文,本文更详细. ENVI5.3安装 ...

  5. 中阶d03.1 JDBCDemo

    1. jdbc使用查看驱动的doc文档<connector-j.html> 2.代码实现:1. 注册驱动---2. 建立连接---3. 创建statement ,跟数据库打交道--- -- ...

  6. 用ASP.NET MVC5 +SQLSERVER2014搭建多层架构的数据库管理系统

    用http://ASP.NET MVC5 +SQLSERVER2014搭建多层架构的数据库管理系统 背景:前段时间,给一家公司做外包(就是图标是朵菊花那家).为了尽快实现交付,网上四处寻找适合中小型企 ...

  7. thymeleaf的特殊属性赋值

    在用thymeleaf时,遇到特殊属性不知道该怎么解决如下: 问题1:循环时,遇到特殊的属性,不知道怎么赋值 如:cate-id="" ,fid=""; 使用t ...

  8. Linux c++ vim环境搭建系列（0）——简介

    vim 学习 简介: 源码编译使用vim及其插件. 内容包含: vim的编译安装, llvm clang的编译安装, 插件youcompleteme的编译安装使用, 以及vim其他插件的使用. 搭建环 ...

  9. TensorFlow保存、加载模型参数 | 原理描述及踩坑经验总结

    写在前面 我之前使用的LSTM计算单元是根据其前向传播的计算公式手动实现的,这两天想要和TensorFlow自带的tf.nn.rnn_cell.BasicLSTMCell()比较一下,看看哪个训练速度 ...

  10. 2019-07-31【机器学习】无监督学习之聚类 K-Means算法实例 （图像分割）

    样本: 代码: import numpy as np import PIL.Image as image from sklearn.cluster import KMeans def loadData ...