前言
本片文章是vue系列第2篇整理了vue的单双数据绑定以及代码讲解
个人主页:尘觉主页
个人简介:大家好,我是尘觉,希望我的文章可以帮助到大家,您的满意是我的动力
在csdn获奖荣誉: csdn城市之星1名
Java全栈群星计划top前5
端午大礼包获得者
欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客,感谢大家的观看
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦
v-bind 指令可以完成基本数据渲染/绑定
v-bind 简写形式就是一个冒号(:)
需求: 演示 v-bind 的使用, 可以绑定元素的属性
- 使用插值表达式引用 data数据池数据是在标签体内
- 如果是在标签/元素 的属性上去引用data数据池数据时,不能使用插值表达式
- 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
- 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>单向数据渲染title>
head>
<body>
<div id="app">
<h1>{{message}}h1>//{{message}}这种叫插值表达式
<img v-bind:src="img_src" v-bind:width="img_width">//也可以简写:src和:width
<img :src="img_src" :width="img_width">
div>
<script src="vue.js">script>//必须要引用否则使用不了vue
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "hello",
img_src: "大家自定义就好图片好",
img_width: "200px"
}
})
console.log("vm=>", vm);
script>
body>
html>
插值表达式是用在标签体的
如果给标签属性绑定值,则使用 v-bind指令
{{message}}这种叫插值表达式 只能在标签内使用
v-model 可以完成双向数据绑定
- v-bind是数据单向渲染: data数据池绑定的数据变化,会影响view
- v-model=“hobby.val” 是数据的双向渲染,
(1)data数据池绑定的数据变化,会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是DomListeners】
DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>双向数据渲染title>
head>
<body>
<div id="app">
<h1>{{message}}h1>
<input type="text" v-model="hobby.val"><br/><br/>
<input type="text" :value="hobby.val"><br/><br/>
<p>你输入的爱好是: {{hobby.val}}p>
div>
<script src="vue.js">script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
message: "hi, 输入你的爱好",
hobby: {
val: "购物"
}
}
})
console.log("vm=>", vm);
script>
body>
html>
1、使用Vue的数据双向绑定 完成如下功能
当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h1>请输入图片名称1.jpg-2.jpg-3.jpgh1>
<input type="text" v-model="img_src"><br/><br/>
<img :src="img_src" :height="img_height"><br/>
<img src="1.jpg" :height="img_height">
<img src="2.jpg" :height="img_height">
<img src="3.jpg" :height="img_height">
div>
<script src="vue.js">script>
<script>
let vm = new Vue({
el: "#app", //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
img_src: "1.jpg",
img_height: "100px"
}
})
script>
body>
html>
本篇讲解了vue的数据单双绑定并且附带了代码示例以及全部代码总结实现了闭环学习
vue系列
扩展篇 - Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开
扩展篇 - Vue 项目结构和文件分析
第1篇 - Vue的下载以及MVVM分析
欢迎大家加入我的社区 尘觉社区
文章到这里就结束了,如果有什么疑问的地方请指出,诸佬们一起来评论区一起讨论
希望能和诸佬们一起努力,今后我们一起观看感谢您的阅读
如果帮助到您不妨3连支持一下,创造不易您们的支持是我的动力