vue基础（实例化、数据、方法、属性绑定）

最新推荐文章于 2023-10-24 08:00:00 发布
最新推荐文章于 2023-10-24 08:00:00 发布
阅读量448 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue基础 vue实例化 vue数据绑定和方法绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40647912/article/details/89883631
版权

附有同一文件夹下的html文件和js文件
注释说的很详细

index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
		<!--vue-app是根容器
			{{greet("afternoon")}}	是为了绑定app.js中的greet()方法，里面是传进的参数
			{{name}	}是直接绑定数据
			v-bind:href="website"	是为了绑定app.js中设置的超链接
			v-html="websiteTag"	是为了绑定标签
		-->
	<div id="vue-app">
	<h1>{{greet("afternoon")}}</h1>
	<p>name : {{name}}</p>
	<p>job : {{job}}</p>
	<a v-bind:href="website">web开发</a>
	<input type="text" v-bind:value="job">
	<p v-html="websiteTag"></p>
	</div>

	<script src="app.js"></script>
	
</body>
</html>

app.js文件代码

//实例化VUE对象
new Vue({

	el:"#vue-app",
	//仅限于在vue-app容器下
	data:{
		name:"wu",
		job:"web开发",
		website:"http://www.thenewstep.com",
		websiteTag:"<a href='http://www.thenewstep.com'>Thenewstep</a>"
	},
	methods:{
		greet:function(time){
			return "Good " + time + " "+ this.name + " !" ;
		}
	}
});
/*
*	el:element 需要获取的元素，一定是HTML中的根容器元素
*	data用于数据的存储
*	methods: 用于存储各种方法
*	data-bind: 给属性绑定对应的值
*/
丰柏林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-基础指令和属性绑定
weixin_56464670的博客
08-31 349
v-text、v-html、v-cloak、v-bind、{{}}
③ Vue基础语法-属性绑定
CRMEB小程序商城的博客
12-16 2411
目录： 初探vue Vue基础语法 - 渲染类型 基础语法上篇学习了Vue渲染数据的三种方式，这一节我们将对这三种方式深入学习！ 属性绑定 何为属性？ 属性指的是Html元素的属性，例如a标签的title就是一个属性！ Vue如何绑定属性？ Vue绑定属性一般是通过v-bind指令来执行，指令不同于{{ message }}双大括号的模板语法，它只能渲染Html内容，不能渲染Html标签的属性，这就是v-bind指令存在的意义！ 语法： v-bind:class="classProperty"
第四节——Vue属性绑定
最新发布
weixin_57017198的博客
10-24 250
Vue绑定属性一般是在属性名后面加 : 也就是 v-bind（不推荐使用v-bind），当使用 : 绑定html元素的属性后，属性就相当于参数，属性值为预期值，一般在实际应用中，: 绑定的属性值都是通过计算得来 或者 是一个通过判断时刻变化的值。该操作也叫动态属性在组件传值中经常使用。属性指的是Html元素的属性，例如a标签的title就是一个属性！
Vue中的三种绑定方式
qq_72760247的博客
10-13 1898
Vue中的三种绑定方式
vue 标签属性数据绑定和拼接的实现方法
01-21
vue实例好后，给对象添加默认数据，列表加载成功。查看源代码，看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来，列表里面的操作，跳转还没有加，试着给初始化的数组添加id字段和数字 刷新一下，...
Vue.js数据绑定之data属性
12-08
Vue.js是JavaScript的一个MVVM库，M是指模型数据，V...Vue实例会代理data绑定对象上的所有属性，即所有属性直接添加到Vue实例化对象中。 Vue实例可以通过$data属性访问原始数据对象。 Vue实例是通过new Vue()创建的，{{
详解vue 实例方法和数据
08-29
Vue 实例方法是指 Vue COMPONENT 实例对象上的方法，而数据则是指 Vue 实例对象上的数据属性。 首先，让我们来了解一下 Vue 实例方法。Vue 实例方法是指 Vue COMPONENT 实例对象上的方法，这些方法可以用来操作和...
vue 属性拦截实现双向绑定的实例代码
10-17
反之，如果在Vue实例中直接修改`content`，输入框的值也会同步更新。 ### 总结 Vue.js 的属性拦截和双向绑定机制极大地简化了前端应用的数据管理。`Object.defineProperty()` 负责监听和处理数据变化，而 `v-bind`...
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
Vue笔记（二）——实例化基本属性
weixin_33774883的博客
05-10 290
Vue实例化时基本属性 实例元素指的是Vue实例化时编译的容器元素，或者说是Vue作用的元素容器 <div id="app"></div> let vm = new Vue({ el:'#app' // 或者是其他选择器：.app; ) 如果有多个相同的实例元素则只有第一个起效 也可以在实例化的时候不指定实...
Vue 教程第四篇—— Vue 实例化时基本属性
weixin_33966365的博客
04-18 281
实例元素 el 实例元素指的是 Vue 实例化时编译的容器元素，或者说是 Vue 作用的元素容器 <div id="app"></div> var vm = new Vue({ el: '#app' }) 也可以为实例元素指定其它选择器 <div class="...
Vue input控件通过value绑定动态属性及修饰符
热门推荐
heartOfblack 离开了电脑，我不希望我还有病
05-02 6万+
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model=
vue学习之属性绑定（八）
weixin_43857520的博客
08-23 124
Vue如何动态处理属性？ v-bind指令用法 <a v-bind:href='url'>跳转</a> 缩写形式：<a :href='url'>跳转</a> 点击切换之后再点击百度 v-model的底层实现原理分析 <input v-bind:value="msg" v-on:input="msg=$event.target.value"> ...
vue 实例的属性和方法
Eling
02-27 1339
vue实例的属性和方法 1.属性 vm.$el ===&amp;amp;amp;gt; 用于获取vue实例内el指定的dom对象 vm.$data ===&amp;amp;amp;gt; 用于获取vue实例内的数据对象 data vm.$options ===&amp;amp;amp;gt; 用于获取vue实例内的自定义属性或方法 vm.$options方法实例： var vm = new Vue({ el: &amp;amp;quo
初识Vue属性绑定
Hhjian524的博客
11-17 234
HTML 属性中的值应使用 v-bind 指令。 现在想通过在Vue中绑定a标签的href属性中的url 在js： new Vue({ el:"#app", data:{ webtarget:"https://www.baidu.com/" } ...
vue基础语法之属性绑定
poppy995的博客
07-30 383
属性绑定 （要想在属性中使用值 必须在属性的前面加这个指令才行） v-bind指令用法 <a v-bind:href='url'>跳转</a> 缩写形式（:） <a :href='url'>跳转</a> 代码示例 <div id="app"> <!-- 必须加v-bind，要不然后面的链接地址出不来 --> <a ...
Vue:如何将v-for生成的input框数据用v-model绑定到一个数组
TateBrwonJava的博客
06-07 4万+
最近小伙伴在写vue页面的时候发生了一个操作：用v-for生成了多个input，然后他把input的数据用v-model双向绑定到了一个数组cur里面。大概是这样写的v-for ··········v-model="cur[index]"具体忘记了。v-for前是有index的。cur:[],然后一直报错cannot use in····。然后到第二个值开始是输不出来的。百度谷歌还有stackov...
vue 属性绑定
彻底拆分，一切可控！
02-21 1208
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
前端应用_Vue_通过属性绑定为元素设置class类样式（介绍四种方法，用哪个随你）
上海 彭彭
08-06 1271
属性绑定 用 v-bind , 如果想引用 class 样式， 如果没有这节知识，恐怕你要抓头挠腮 了. 这个节不用介绍多就介绍四种方法，实际原理差不多， 如果不用属性绑定 我们取值 是这样的， 示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
前端框架Vue基础语法笔记
01-20
本笔记将探讨Vue的基础语法，包括创建Vue实例、数据绑定、事件处理、条件渲染以及循环与数据双向绑定。" 在Vue.js中，创建Vue实例是使用框架的第一步。通过`Vue.createApp`方法可以创建一个新的Vue应用实例。例如：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值