每篇一句

一场寂寞凭谁诉。算前言，总轻负。

Vue视图数据展示方式和彼此的区别:

{{插值表达式}}

  • {{}}插值表达式里面 只能写表达式,不能写语句
  • 文本输出,不会解析标签
  • 不能作用在标签的属性上,设置属性值,只能用于标签内部用于显示数据
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>入门案例</title>

    <!--引入vue-->

    <script src="js/vue.js"></script>

</head>

<body>

<!--view视图展示数据-->

<div id="app">

    <!--{{插值表达式}}  vue显示数据方式-->

    {{message}} ======{{number+1}}===={{flag ? "真":"假"}}

</div>

</body>

<!--模型-->

<script>

    var vue = new Vue({

        el:"#app", //将id为app的区域 交给vue管理

        data:{

            message:"hello vue .....", //声明初始化模型数据

            number:18,

            flag:false

        },

        methods:{

            //所有方法

        }

    })

</script>

</html>

v-text和v-html

  • v-text不会解析标签,只能解析文本
  • v-html会解析标签,之后显示
  • 两者只能作用域属性上,是一种属性修饰符,不能写在标签体内
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-text和v-html.html</title>

    <script src="../js/vuejs-2.5.16.js"></script>

</head>

<body>

<div id="app">

    插值表达式不会解析标签<br>

    {{message}}

    <hr>

    v-text:不会解析html,只能解析文本

    <div v-text="message"></div>

    <hr>

    v-html : 可以解析标签和文本

    <div v-html="message"></div>

     <hr>

	不能写在标签体内

 	<div> v-html="message"</div>

</div>

</body>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            message: "<h1>Hello VUE</h1>"

        }

    });

</script>

</html>

v-bind

  • 只能作用域属性上,是一种属性修饰符
  • 省略写法是:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-bind</title>

    <script src="../js/vuejs-2.5.16.js"></script>

</head>

<body>

<div id="app">

<h1 style="text-align: center">插值表达式不能作用在标签的属性上,遇到这种情况就要使用v-bing</h1>

    <font size="5" v-bind:color="ysl">坚持下去!</font>

    <font size="5" :color="ysl2">坚持下去!</font>

    <hr>

    <a v-bind={href:"http://www.baidu.com/"+info}>百度搜索java</a><br>

    <a :href="address">京东</a>

</div>

</body>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            ysl:"red",

            ysl2:"green",

            info:"s?wd=java",

            address:"http://www.jd.com"

        }

    });

</script>

</html>

还有一种特殊的:v-model数据双向绑定

  • 前面的都只能显示vue对象中数据, 页面数据的变化不会影响vue对象中的数据
  • 而v-model绑定的数据,页面数据的改变,vue对象中的数据也会跟着改变,这非常关键
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-model</title>

    <script src="../js/vuejs-2.5.16.js"></script>

</head>

<body>

<div id="app">

    <h1>需求:使用vue赋值json数据，并显示到页面的输入框中（表单回显）。

        点击提交按钮，改变json数据，验证同时输入框的内容也发生改变。

    </h1>

    插值表达式:  {{user.username}} ,{{user.password}}  <br>

    v-model 双向绑定,输入的值会改变模型的值:<input type="text" v-model="user.username"> <br>

    v-bind 单向绑定,输入的值不会改变模型的值:<input type="text" v-bind:value="user.username"> <br>

    v-model 密码:<input type="text" v-model="user.password"> <br>

    <input type="button" @click="fun()" value="按钮(改变模型的值)"> <br>

</div>

</body>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            user:{

                username:"路飞",

                password:"123456"

            }

        },

        methods:{

            fun:function () {

                alert(this.user.username+"   "+this.user.password);

                this.user.username="佐助";

                this.user.password="666666";

            }

        }

    });

</script>

</html>

v-bind和v-model的本质区别和作用域的更多相关文章

  1. 启动服务报错：nested exception is java.lang.NoSuchMethodError: org.apache.cxf.common.jaxb.JAXBUtils.closeUnmarshaller(Ljavax/xml/bind/Unmarshaller;)V

    1.启动tomcat时报错:Error creating bean with name 'payInfService': Invocation of init method failed; neste ...

  2. What is the difference between Reactjs and Rxjs?--React is the V (View) in MVC (Model/View/Controller).

    This is really different, React is view library; and Rxjs is reactive programming library for javasc ...

  3. 【转】HTTP POST GET 本质区别详解

    一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本的 ...

  4. HTTP POST GET 本质区别详解

    HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...

  5. 转-HTTP POST GET SOAP本质区别详解

    原文链接:HTTP POST GET SOAP本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认 ...

  6. httpServeltRequest和Model传值的区别

    需要将请求发过来的数据(或者说参数)传递到重定向的页面/转发的页面的时候,就要用到>>model.addAttribute("mine", UserUtils.getC ...

  7. 【转载】HTTP POST GET SOAP本质区别详解

    一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Http定义了与服务器交互的不同方法,最基本的 ...

  8. 转：oracle几组重要的常见视图-v$latch，v$latch_children，v$lock，v$locked_object

    v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...

  9. oracle 入门笔记--v$sql和v$sqlarea视图（转载）

    转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...

随机推荐

  1. 区块链之Hyperledger（超级账本）Fabric v1.0 的环境搭建（超详细教程）

    https://blog.csdn.net/so5418418/article/details/78355868

  2. 史上最全的excel读写技术分享

    目录 简介 导出excel常用的几种方法 POI CSV jxl jxls easyexcel 快速入门 代码解读 总结 常用API 单元格样式 合并单元格 数据样式 多sheet设置 单元格添加超链 ...

  3. 「NOIP模拟赛」数位和乘积（dp，高精）

    统计方案数,要么组合数,要么递推(dp)了. 这是有模拟赛历史以来爆炸最狠的一次 T1写了正解,也想到开long long,但是开错了地方然后数组开大了结果100->0 T3看错题本来简单模拟又 ...

  4. day3（数论）

    总得来说,这是可怕的一天,极其可怕的一天(完) 一.数论 阴影啊! 首先,设ab为两个整数,则存在唯一的q和r,使得a=qb+r 若r=0,则b整除a,记作b|a. (1)同余 若a/m和b/m的余数 ...

  5. 「分治」-cdq分治

    cdq分治是一种分治算法: 一种分治思想,必须离线,可以用来处理序列上的问题(比如偏序问题),还可以优化1D/1D类型的DP.• 算法的大体思路我们可以用点对来描述.假定我们有一个长度为n的序列,要处 ...

  6. 基于代码生成器的快速开发平台 JEECG

    JEECG是一款基于代码生成器的J2EE快速开发平台,开源界“小普元”超越传统商业企业级开发平台.引领新的开发模式(Online Coding模式(在线开发)->代码生成器模式->手工ME ...

  7. 最新JetBrains PyCharm 使用教程--创建或导入项目（二）

    Python简介 Python是一种非常流行的开源编程语言.得益于无尽的模块选项,Python今天广泛用于脚本语言.Web开发.移动和桌面在许多领域.随着人工智能的复兴,数据科学的崛起,Python更 ...

  8. Linux系统重启Oracle-12c步骤

    Linux系统重启Oracle-12c步骤 1. 使用oracle用户登录: [root@Oracle-12c /]# su – oracle 2. 登录oracle登陆管理员账号: [oracle@ ...

  9. C语言程序设计100例之（10）：最大公约数

    例10        最大公约数 问题描述 有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. 输入数据 第 ...

  10. ubuntu18 拨号连接宽带网络方法

    1.打开终端查看以太网网卡编号 2.打开/usr/share/applications/ 3.点击network connections 4.点击左下角的+号 5.连接类型选择DSL/PPPoE 6. ...