咫身在天涯
咫身在天涯

VUE从入门到熟悉——02

文章目录

  • 02数据绑定和属性绑定
    • 知识点讲解
      • 数据绑定
      • 属性绑定
      • 动态绑定的语法糖
    • 总结

02数据绑定和属性绑定

针对上一篇文章中存在的疑问，我们不进行任何回答，先记下来就好

本篇内容主要通过几个简单的例子讲述VUE数据绑定和属性绑定，对标JQuery和原生js，了解VUE的新鲜之处。

知识点讲解

数据绑定

  • 数据绑定最通常的方式是使用 {{}} 进行包围，表象上是，它会将data中的数据进行呈现。但是这个内容只能被解析为文本内容

    我们上一篇的内容进行改动一下

    
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title>Hello Vuetitle>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
	head>
	<body>
		<div id="app">
			{{ message }}
		div>
	body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!>'
			}
		})
	script>
html>

    显示结果如下
    在这里插入图片描述

    那么如何绑定代码显示呢？直接翻到片尾 。

属性绑定

  • 可以使用 v-bind:属性名称 进行属性绑定，

    直接上示例

    
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title>Hello Vuetitle>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
	head>
	<body>
		<div id="app">
			
			<div class="panel" v-bind:id="name">
				<div class="line">
					<h3>姓名：{{name}}h3>
					<h3>年龄：{{age}}h3>
				div>
				<div class="line">
					<button v-bind:class="clazz" v-bind:onclick="onclick">编辑信息button>
				div>
				<div class="line">
					<span class="label">姓名:span>
					<input v-model="name" v-bind:disabled="disabled">
				div>
				<div class="line">
					<span class="label">年龄:span>
					<input v-model="age" v-bind:disabled="disabled">
				div>
			div>

		div>
	body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				clazz:"float-right",
				name: "法外狂徒张三",
				age: 22,
				disabled: true,
				onclick: "app.$data.disabled = !app.$data.disabled;alert('disabled的状态值：' + app.$data.disabled)"
			}
		})
	script>
	<style>
		.panel {
			background: #eeeeee;
			height: auto;
			width: 50%;
			max-width: 600px;
			max-width: 400px;
			margin-left: 25%;
			padding: 10px 20px;
			box-shadow: aliceblue;
		}

		.label {
			font-weight: 600;

		}

		.line {
			font-size: 18px;
			line-height: 1.8;
			min-height: 20px;
			margin-bottom: 10px;
		}

		.float-right {
			float: right;
		}
	style>
html>

    这是代码的截图

VUE从入门到熟悉——02_第1张图片

通过F12查看元素解析后的结果，可以看出，数据通过v-bind指令，将data赋值到了属性中。

同时可以直接将事件的方法内容进行赋值。

其中被复制的内容我已经标注出来，包括 id innerText onclick class ，这种写法和我们传统的html写法相差不大，容易理解，符合渐进式学习的过程，我们可以尝试使用这种方式，对手中的一些静态界面资源进行修改，比如可以修改锚点，图片链接等等。

动态绑定的语法糖

  • v-model是input使用的动态数据绑定的语法糖，在后续内容中我们会继续深入

    用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定文本
<input v-model="name">
等价于：
<input
  v-bind:value="name"
  v-on:input="name = $event.target.value"
>

    VUE从入门到熟悉——02_第2张图片

总结

上一篇中我写的demo实现双向绑定，这里就不赘述，讲一下其他的逻辑实现

  • 如果需要绑定data中映射的代码。如何实现，

    <span v-html="htmlElement">span>

  • 如何理解数据绑定操作，和我们前端开发中的关联，使用JQuery时候，我们经常使用的attr('attrName','attrValue')，在DOM操作中如直接编辑DOM的属性。

  • DOM插值，对DOM元素的插值设置，jquery的方式如$("").html()，DOM的方式，document.element.innerText="", document.element.innerHtml=""

  • 希望大家可以在实际场景对列举的一些方式进行尝试，加深理解

  • 在我们上述中提到了v-bind 、 v-model v-on 、v-html 这些都被称为vue指令，我们还会系统去讲

    • v-bind 绑定属性到元素上
    • v-model 在表单 、