1.标签内容绑定

  • 双括号语法：使用 {{}} 将变量包裹起来，vue会将变量的值解析为普通文本，而非 HTML 代码
<div>{{msg}}</div>

<div>{{html}}</div>


data() {

  return {

    msg:"good day",

    html:"<h2>我是h2</h2>"

  }

}

渲染结果：

  • v-html/v-text指令:相当于对当前标签元素中的innerHTML/innerText属性进行赋值
<div v-text="msg"></div>

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


data() {

  return {

    msg:"good day",

    html:"<h2>我是h2</h2>"

  }

}

渲染结果：

2.标签属性绑定

  • 属性值绑定：在标签属性前加上":",即可将属性值当作变量进行解析
<!-- 不使用v-bind -->

<div title="msg">不使用v-bind:</div>

<!-- msg值为good day -->

<div v-bind:title="msg">使用v-bind:</div>

<!-- 简写 -->

<div :title="msg">使用v-bind:简写</div>

渲染结果：

<div title="msg">不使用v-bind:</div>

<div title="good day">使用v-bind:</div>

<div title="good day">使用v-bind:简写</div>
  • 属性名绑定：属性名使用变量进行渲染
<body>

    <div id="app">

        <h2 :[attr]="value">{{msg}}</h2>

    </div>

</body>

</html>

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

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"Vue.js 2.x",

                attr:"title",

                value:"我是参数值"

            }

        },

    })

</script>

渲染结果：

<h2 title="我是参数值">Vue.js 2.x</h2>

3.双向数据绑定

  • 使用v-model指令将数据与表单元素的值进行双向绑定，表单的初始状态通过其绑定的数据进行控制，同时切换表单的状态时，也会同步更新其绑定的数据
  • 对于文本框和文本域，绑定其value属性，同时监听input事件
  • 对于单选框和下拉框，绑定其value属性，同时监听change事件
  • 对于多选框，通常为其绑定一个数组，选中的多选框的值会被push到数组中
  • 实际开发中，不会使用原生的表单元素，通常都是使用UI框架自带的表单，使用方法参见相关文档
  • 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
  • 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<body>

    <div id="app">

        <input type="text" v-model.tirm="input" @input="onInput">

        <input v-model.number="age" type="number">

    </div>

</body>

</html>

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

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                input:"我是初始值"，

                age: 20,

            }

        },

        methods:{

            onInput(){

                console.log(this.input)

            }

        }

    })

</script>
  • 自定义组件中的model: v-model其实是v-bind和自定义事件的语法糖，通过v-bind将数据传递给子组件特定的prop，再通过触发特定的自定义事件，将子组件的数据同步给父组件,v-model相关的prop和自定义事件通过model字段进行定义
model:{

    prop:"value",//定义v-model的值传递给那个prop属性

    event:"input",//定义此事件触发时，自动更新父组件v-model对应的数据

}

4.样式绑定

  • 对象语法：用于控制某个类名的添加和移除状态
<body>

    <div id="app">

        <!-- flag为true 添加active类 -->

        <div :class="{'active':flag}">激活</div>

        <!-- flag为false 移除active类 -->

        <div :class="{'active':flag2}">未激活</div>

    </div>

</body>

渲染结果：

<div id="app">

    <div class="active">激活</div>

    <div class="">未激活</div>

</div>
  • 数组语法：用数组形式控制元素的classlist，数组元素可以是常量，也可以是变量
<body>

    <div id="app">

        <div :class="['box',color]">Vue.js</div>

    </div>

</body>

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                color: 'red',

            }

        },

    })

</script>

渲染结果：

<div id="app">

    <div class="box red">Vue.js</div>

</div>
  • 内联样式：通过v-bind指令，给style属性绑定一个对象，对象的属性名为样式名，对象的属性值为样式值
<body>

    <div id="app">

        <div :style="{'color':color,'font-size':size}">Vue.js</div>

    </div>

</body>

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                color: 'red',

                size: '18px'

            }

        },

    })

</script>

渲染结果：

<div id="app">

    <div style="color: red; font-size: 18px;">Vue.js</div>

</div>

4.元素的显示/隐藏/销毁

  • v-if/v-else-if/v-else：指令值为布尔值，为true则对元素进行渲染，为false则销毁该元素
  • v-show：控制元素的显示与隐藏，相当于操作display属性
  • 注意，v-show 不支持 template 元素
<body>

    <div id="app">

        <div>

            <div v-if="type=='a'">模版A</div>

            <div v-else-if="type=='b'">模版B</div>

            <div v-else>模版C</div>

        </div>

        <div>

            <div v-show="type=='a'">模版A</div>

            <div v-show="type=='b'">模版B</div>

            <div v-show="type=='c'">模版C</div>

        </div>

    </div>

</body>

</html>

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

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                type: 'c'

            }

        },

    })

</script>

渲染结果：

<div id="app">

    <div>

        <div>模版C</div>

    </div>

    <div>

        <div style="display: none;">模版A</div>

        <div style="display: none;">模版B</div>

        <div>模版C</div>

    </div>

</div>

5.模版循环

  • 通过v-for指令，循环创建多个HTML模版，被循环对象可是是数组，对象，整数
  • 不要与v-if进行混用，如有需要可对数组进行过滤操作再进行循环
  • 循环整数时，第一个循环项是1
<body>

    <div id="app">

        <!-- 循环数组 -->

        <ul>

            <li v-for="(item,index) in list" :key="index">{{item}}</li>

        </ul>

        <!-- 循环对象 -->

        <ul>

            <li v-for="(val,key) in obj" :key="key">{{key}}:{{val}}</li>

        </ul>

        <!-- 循环整数 -->

        <ul>

            <li v-for="(n,index) in 5" :key="index">{{index}} - {{n}}</li>

        </ul>

    </div>

</body>

</html>

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

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                list:[1,2,3,4],

                obj:{

                    name:'张三',age:20

                }

            }

        },

    })

</script>

6.v-for中的key

  • 看看官方文档是怎么说的
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
  • 如何理解这个“就地更新”
<!-- list = [ 1,2,3,4,5] -->

<ul>

   <li v-for="(n,index) in list"style="margin-top:10px;">

         <span>{{n}}</span>

         <div class="btn" @click="handleDelete(n)">删除</div>

    </li>

</ul>

  • 一般情况下，这种模式不会有问题，但是也有例外，看看官方文档的说法
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
  • 用实例来验证:相比上面的例子，多出了一个输入框，且这个输入框没有进行数据绑定
<!-- list = [ 1,2,3,4,5] -->

<ul>

   <li v-for="(n,index) in list"style="margin-top:10px;">

         <span>{{n}}</span>

         <input type="text" style="padding:6px;">

         <div class="btn" @click="handleDelete(n)">删除</div>

    </li>

</ul>

  • 如果为其设定了key，则数组发送变动时，不会复用之前的dom，就不会出现上面输入框异常的情形
<!-- list = [ 1,2,3,4,5] -->

<ul>

   <li v-for="(n,index) in list" :key="n" style="margin-top:10px;">

         <span>{{n}}</span>

         <input type="text" style="padding:6px;">

         <div class="btn" @click="handleDelete(n)">删除</div>

    </li>

</ul>

  • 下面的写法是等效的：循环数组用下标为key等于没写
<li v-for="(n,index) in list">


<li v-for="(n,index) in list" :key="index">

Vue.js 数据绑定的更多相关文章

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

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

  2. vue.js数据绑定

      语法         插值             双大括号:{{text}} {{*text}}之渲染第一次 {{{html}}}        表达式(各种数值,变量,运算符的综合体)     ...

  3. vue.js数据绑定语法

    原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...

  4. Vuebnb 一个用 vue.js + Laravel 构建的全栈应用

    今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb.在这 ...

  5. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  6. vue.js基础知识篇(1):简介、数据绑定

    目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

  7. 从Vue.js源码角度再看数据绑定

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...

  8. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  9. Vue.js MVVM及数据绑定原理

    什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元 ...

  10. python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制

    js的几种循环方式 v-for可以循环的变量 可以循环的: 数组.数组带索引 对象.对象带key.value 字符串 字符串带索引 数字.数字带索引 <!DOCTYPE html> < ...

随机推荐

  1. Angular Material 18+ 高级教程 – CDK Layout の Breakpoints

    前言 CDK Layout 主要是用于处理 Breakpoints,它底层是依靠 window.matchMedia 来实现的. Material Design 2 & 3 Breakpoin ...

  2. 十，Spring Boot 的内容协商的详细剖析(附+Debug调试说明)

    十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) @ 目录 十,Spring Boot 的内容协商的详细剖析(附+Debug调试说明) 1. 基本介绍 2. 准备工作 3. ...

  3. docker安装运行kafka单机版

    这里我们安装一下kafka的单机版,由于kafka是基于zk进行管理的,如果我们没有安装过zk的话,需要进行安装好zk再安装kafka,当然如果已经安装过了, 那就没必要安装了.我们可以执行docke ...

  4. 使用MessagePipe实现进程间通信

    1.MessagePipe介绍 可以用于.NET和Unity上面的高性能的内存/分布式消息传递管道.适用于发布/订阅模式.CQRS的中介模式.Prism中的EventAggregator.IPC(进程 ...

  5. excel江湖异闻录--修迪斯.嗦狸

    因为技术出类拔萃,同学都尊称他为"修神",修神的python.vba.Javascript.java.数据库.批处理等众多编程语言都是极强的,以笔者的见识来判断,大佬的vba已经是 ...

  6. 「模拟赛」A 层多校联训 4（卖品：CTH）

    双倒一啦! 感觉这次最大的错误就是没看 T2.(本质原因还是时间浪费的太多了) 赛时记录在闲话啦 accoder 多校比赛链接 02 表示法 唐诗题!考高精的人都\(**\),输出深度优先搜索解决.高 ...

  7. 2020年度国产数据库：openGauss

    根据墨天轮2020年一年的数据库流行度得分趋势变化,我们选出了流行热度增长显著的数据库为2020年度国产数据库.恭喜 华为开源关系型数据库 openGauss 荣获 "2020年度国产数据库 ...

  8. 2. 说一下vue2和vue3的区别 ？

    1. vue3 使用 proxy 替换Object.defineProperty 实现数据响应式 ,所以vue3 的性能得到了提升 : 2. vue3 使用组合式 API 替代了 vue2 中的选项式 ...

  9. 我在大厂做 CR——为什么建议使用枚举来替换布尔值

    使用枚举替换布尔值主要基于以下几个原因 ● 可读性 ● 可拓展性 ● 安全防控 可读性 我们会定义 boolean 类型(true 或 false)作为方法参数,虽然比较简洁,但有时候参数的含义往往不 ...

  10. ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南

    作者:运维有术 前言 知识点 定级:入门级 KubeKey 安装部署 ARM 版 KubeSphere 和 Kubernetes ARM 版 KubeSphere 和 Kubernetes 常见问题 ...