初始Vue.js--数据的绑定(一)

最新推荐文章于 2023-07-16 00:48:49 发布

翻译最新推荐文章于 2023-07-16 00:48:49 发布 · 1.5k 阅读

文章标签：

#html5 #库

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue.js的概念及其作为构建用户界面的渐进框架的特点，并通过实例演示了声明式渲染、条件渲染、列表渲染及用户输入处理等功能。

由于需要最近开始了Vue的学习

首先Vue.js的概念的讲解

什么是Vue.js

Vue（发音为/vjuː/，与view一样）是构建用户界面的渐进框架。与其他单一框架不同的是，

Vue从头开始被设计为可以逐步采用。核心库只专注于视图层，很容易与其他库或现有项目集成。

另一方面，与现代工具和支持库结合使用时，Vue也能够完美地支持复杂的单页应用程序。

示例

在这里就不进行Vue.js的环境搭建之类的讲解了，直接进行实例环节。

声明式渲染

< div  id = “app” >
   {{message}}     /*前台也页面中数据显示的格式 使用两个  {} 进行包含可将数据进行显示*/ 
</ div >

/*js中的代码*/
var app = new Vue（{ 
  el：'#app'，    /*指定当前Vue作用的范围*/
  data：{ 
    message：'Hello Vue！'     /*进行 ViewModel的数据关联的处理*/
   } 
}）

上述代码就是我们的第一个Vue应用程序，数据和DOM显示在链接在一起的，现在一切都是 反应式的

(就是后台中的viewModel的数据改变之后，就会直接的作用在前台中，及时的进行反应)

想要的感官的话，可以在浏览器中 F12 在浏览器的控制台中输入 app.message = "123",就可以看

到前台中的数据也就跟着进行了

<!-- 关于Vue中的使用语法的总结 -->
	<!-- 
		v-bind 的属性称为  指令
		指令前缀 v- 表明是 Vue提供的特殊属性
	v-bind:title = "message"
	的基本意思为: 
			"保持这个元素的  title 属性与 message Vue实例上的属性保持一致"

	v-if = "seen"
	根据seem中的数据进行为  true/false  对前台进行显示与隐藏的设置
	有上可以看出 数据绑定到的不仅仅为文本和属性还包括DOM的结构

	v-for 指令可用于使用来自Array的数据显示项目列表
	<li v-for = "todo in todos"> {{todo.text}}</li>
	基本理解:
		使用v-for指令 遍历从后台得来的 todos 数据
							将得到的tode使用  .text进行输出
					注意后台中的数据键中的数据 保持一致性


	 -->

<!-- 声明式渲染 -->
	<div id = "app">
		{{message}}
	</div>

	<div id="app-2">
		<span v-bind:title = "message">将鼠标进行悬停</span>
	</div>
	<hr>

<!-- 条件和循环 -->
	<div id = "app-3">
		<span v-if = "seen">现在你看到我</span>
	</div>
	<hr>

<!-- v-if 来自Array的数据显示列表 -->
	<div id= "app-4">
		<ol>
			<li v-for = "todo in todos"> {{todo.text}}</li>
		</ol>
	</div>
	<hr>

<!-- 处理用的输入 -->
	<div id = "app-5">
		<p>{{ message }}</p>
			<button v-on:click = "reverseMessage">反向信息</button>
	</div>
	<hr>

<!-- v-model  在表单输入和而应用程序状态之间进行双向绑定的指令 -->
<!-- 使用v-model 指令 可将指令所指名称相同的数据进行绑定  -->
	<div id= "app-7">
		<p>{{message}}</p>
		<input v-model = "message">
	</div>
	<hr>
	<!-- 当双方都可以进行修改，且v-model 指令指向的相同时，双向修改 -->
	<div id="app-6">
		<textarea v-model = "message"></textarea>
		<input v-model = "message">
	</div>

/*下面的JS是与上面相匹配的js文件*/
var app = new Vue({
				el:"#app",
				data: {
					message: 'Hello Vue'
				}
		})
var app2 = new Vue({
	el:'#app-2',
	data:{
		message:'你在' + new Date().toLocaleString()
	}
})

var app3 = new Vue({
	el: '#app-3'
	data:{
		seen:true
	}
})

var app4 = new Vue({
	el: '#app-4',
	data:{
		todos: [
			{text: 'Learn JavaScript'},
			{text: 'Learn Vue'},
			{text: 'Build something awesome'}
		]
	}
})

var app5 = new Vue({
	el: '#app-5',
	data: {
		message: 'Hello Vue.js!'
	},
	methods:{
/*
	在方法中 我们更新了应用程序的状态，而不触及DOM，所有DOM操作都有Vue进行处理
	而我们编写的代码则集中在基础逻辑上
*/
		reverseMessage: function(){
			/*
			split()  使用函数 将String 进行查分 返回拆分后的 字符串数组
			reverse()  将数组进行逆序 
			join()   将数组转换为 字符串
			*/
			this.message = this.message.split('').reverse().join('')
		}
	}
})

var app6 = new Vue({
	el:'#app-6',
	data:{
		message:'Hello Vue!'
	}
})

var app7 = new Vue({
	el:'#app-7',
	data:{
		message:"daadfafa"
	}
})