vue2 基础 （三）

最新推荐文章于 2023-10-02 21:01:12 发布
最新推荐文章于 2023-10-02 21:01:12 发布
阅读量165 收藏
点赞数
分类专栏： vue 文章标签： vue v-bind v-on 绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79999127
版权

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------


在上一篇中，我们使用了  v-on  这个指令，这一篇我们来看看 v-bind ,


首先我们写一下基本内容：

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
< script src= "vue.js"></ script>
</ head>
< body>
< div id= "main">
< span>{{message}}</ span>
</ div>

< script>
new Vue({
el: "#main",
data:{
message: "数据又放到里面来了"
}
});
</ script>
</ body>
</ html>



上面我们将数据渲染到  <span> 中了，我们可以清楚的看到<span>中没任何属性，下面我尝试使用 v-bind 给这个<span>

添加一个属性   nb="123";

你可能会这样做：

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
< script src= "vue.js"></ script>
</ head>
< body>
< div id= "main">
< span nb= "123">{{message}}</ span>
</ div>

< script>
new Vue({
el: "#main",
data:{
message: "数据又放到里面来了"
}
});
</ script>
</ body>
</ html>



这样确实是可以添加上，但是我们没有使用到 v-bind  ，

我们看看 v-bind 是怎么绑定的；

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
< script src= "vue.js"></ script>
</ head>
< body>
< div id= "main">
< span v-bind:nb= "nbvalue">{{message}}</ span>
</ div>

< script>
let abc ={
message: "我数据又出来了",
nbvalue: 123
}
new Vue({
el: "#main",
data:abc
});
</ script>
</ body>
</ html>


我使用 v-bind 命令成功的绑定了属性；



在这个地方 ，v-bind 是可以简写的，只要写个冒号就行了 ：

我们改写一下：

<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title>vue2基础</ title>
< script src= "vue.js"></ script>
</ head>
< body>
< div id= "main">
< span : nb= "nbvalue">{{message}}</ span>
</ div>

< script>
let abc ={
message: "我数据又出来了",
nbvalue: 123
}
new Vue({
el: "#main",
data:abc
});
</ script>
</ body>
</ html>



在前面我们也是用 v-on  这个指令，也是可以简写的  @

请自己尝试吧；


总结：（1）   v-bind  如何实现数据绑定的   ；

          （2）  v-bind    和     v-on   的简写形式；

cvper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个基础的vue2脚手架
03-11
一个基础的vue2脚手架，已载入elementui、sass等基础第三方库，可直接下载运行。配置了几个基本路由，打包方式也配置好了 适合人群: 想要快速搭建vue项目，省去一些配置的开发者
Vue2（初识vue）
passerby的博客
08-02 7181
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。vue环境的搭建有很多种：对于我们初次学习，我们使用自行下载js的方式。 注意 面试题： Data为啥要写成函数？ Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。什么是指令
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
m0_67844671的博客
09-27 1万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
Vue2-基础知识
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
【VUE2】VUE2基础知识和原理--超详细--超简介--零基础（一）
m0_55644132的博客
12-02 4713
2 模板语法 Vue模板语法有2大类:插值语法：功能：用于解析标签体内容写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性指令语法:功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性 3 数据绑定 Vue中有2种数据绑定的方式：单向绑定(v-bind)：数据只能从data流向页面双向绑定(v-model)：数据不仅能从data流向页
Vue2 概述
Dailyblue的专栏
04-28 1万+
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 大屏数据展示模版
09-22
内容概要：组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用，主要包含三个大屏demo案例。 适合人群：具备一定编程基础，组件库的开发和调试都使用Chrome浏览器 能学到...
Vue超全基础知识面试题
02-05
单页面的概念： 单页面应用(SPA)，其实就是指只有一个主页面的应用，类似前端现在的三大框架，React.Vue,Angular 浏览器一开始要加载所有必须的html,js css。所有的页面内容都包含在这个所谓的主页面中。 单页面的...
Vue2和Vue3
秋书一叶的博客
08-26 3996
Vue.js 2（通常称为Vue 2）是一款流行的JavaScript前端框架，用于构建现代、交互式、响应式的用户界面。它由Evan You开发，于2016年发布，是Vue.js框架的第二个主要版本。Vue 2的核心思想是将数据驱动和组件化开发相结合，使开发者能够更轻松地构建复杂的Web应用程序。Vue 2主要包含以下特点和特性：组件化架构： Vue 2采用组件化的开发方式，将界面拆分为多个可重用的组件。每个组件具有自己的状态、模板、方法和生命周期钩子，使得开发更具模块化、可维护性更高。
Vue2基础知识概览与总结
qq_40529733的博客
07-10 1318
Vue2的模版语法、生命周期等内容。有例子，较详细
Vue2简单使用及相关基础知识概念（适合小白入门，看完就能上手）
熊凯瑞的博客
10-30 2565
Vue是一套用于构建用户界面的渐进式框架。同时被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，利于上手和第三方库进行整合。 其中ViewModel是连接视图和数据的中间件。能够观察到数据的变化，并对视图对应的内容进行更新，同时也能监听到视图的变化，并能够通知数据发生改变。 因此Vue.js就是MVVM中的ViewModel层的实现者，核心是实现了DOM监听与数据绑定。
Vue2详解
最新发布
m0_71229255的博客
10-02 1585
Vue是一套**构建用户界面**的**渐进式 框架****构建用户界面**：基于数据渲染出用户可以看到的界面**渐进式**：所谓渐进式就是循序渐进，不一定非得把Vue中所有的API都学完才能开发Vue，可以学一点开发一点 * Vue的两种开发方式： 1. Vue核心包开发。场景：局部模块改造 2. Vue核心包&Vue插件&工程化
VUE2基础知识（详细版）
weixin_59418570的博客
05-28 1466
组件是实现应用中局部功能代码和资源的集合。v-xx开头，实质是js代码的语法糖。虚拟DOM -- VDOM -- 是一个js对象有些属性需要动态来绑定，比如：动态绑定a元素的href属性；动态绑定img元素的src属性。v-bind可以给任何属性赋值，是从数据到页面的单向数据流（从data指向视图）
vue项目搭建的完整过程（vue2）
u012858643的博客
05-15 7966
若本地已经安装vue3的vue/cli，也可以不用安装vue-cli，可以全局安装： npm i -g @vue/cli-init ，建立一个桥接工具，因为Vue CLI 2 (vue-cli) 被覆盖了，目的是使 vue2.x和vue3 兼容；输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。
VUE 2 ----＞快速入门
ClearloveYt的博客
07-22 710
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。自定义指令的分类私有自定义指令全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：在使用自定义指令时，需要加上 v- 前缀// 定义名为 focus 的指令，指向一个配置对象focus: {// 当指令第一次被绑定到元素上的时候，会立即触发 mounted 函数。
Vue2笔记（全）
Jadon_z的个人博客
09-03 2258
Vue2 最全知识汇总
Vue基础之指令与过滤器
fanlingfang的博客
11-06 550
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
Vue2学习教程（图文齐全，附带gif动图更加简单易懂）
热门推荐
m0_54828595的博客
07-03 2万+
vue2的学习笔记，图文并茂，附带gif动图更加方便学习理解
vue基础省市区三级联动
05-11
Vue基础省市区三级联动可以通过以下步骤实现： 1. 创建一个Vue组件，在组件内部定义三个下拉框分别对应省、市、区/县。 2. 在组件的data中定义省、市、区/县的数据源，可以使用硬编码的方式，也可以通过Ajax请求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值