与vue的第一次接触，vue到底是什么？

最新推荐文章于 2022-05-16 22:45:10 发布

星空守望

最新推荐文章于 2022-05-16 22:45:10 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_43158436/article/details/82812719

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想要学习vue的同学，在心里面一定很疑惑，vue到底是什么呢？它和html, css, js有什么区别呢？

好，待我细细说来。
首先先把vue.js文件的下载地址给你们，引入了这个js脚本，你们就能自由地驰骋在vue的天地了。 Vue.js下载地址

Vue特效一：双向绑定

   <html>
     <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="vue.js"></script>
     </head>
     <body>
    	<div id="app">
    		<h1>{{ message }}</h1>
    	</div>
    
    	<script>
    		<!-- Vue对象实例，el指定html标签的id或class，data中为数据属性 -->
    		new Vue({
    			el: "#app",
    			data: {
    				message: "Hello World!"
    			}
    		})
    	</script>
     </body>
    </html>

运行效果如下：

在这里插入图片描述
我们可以看到，Vue对象中data的message被绑定到了我们的html元素中，绑定的符号就是{{ }}。

我们再来看看message变了之后会发生什么呢？
我门将代码做点改动

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			message: "Hello World!"
		}
	})
	// 1s钟之后，将Vue对象中data的message的值变为 "Hello My World!"
	setTimeout(function () {
		vm.message = "Hello My World!"
	},1000)
<script>

结果如何呢？没错，1s后页面的内容变为了
在这里插入图片描述
感觉怎么样呢？这样我们就不用写js代码来操纵节点改变节点内的数据了。你们是否也跃跃欲试了呢？那就来写你的第一个HelloWorld程序吧！

接下来我们来看vue的第二个特效吧。

特效2：v字特性及vue对象的属性

v字特效如v-bind:class, v-bind:url, v-bind:xxx, 还有v-on:click, v-on:change, v-on:xxx。
他们有什么效果呢？

加了v-bind:或v-on:前缀就可以使用vue对象中的数据或方法了。下面有个例子。

<html>
 <head>
  <meta charset="UTF-8">
  <title>v-bind</title>
  <script src="vue.js"></script>
 </head>
 <body>
  <div id="app">
	<!-- 此处调用了vue对象中的方法，并且传入了message变量 -->
	<input type="text" v-bind:value="saySomething(message)" />
	<!-- 此处调用了vue对象中的计算属性 -->
	<input type="text" v-bind:value="sayHello" />
  </div>

  <script>
	new Vue({
		el: '#app',
		data: {
			message: 'HelloWorld!'
		},
		methods: {
			// 这里是vue对象中的方法
			saySomething: function (something) {
				return something
			}
		},
		computed: {
			// 这里是vue对象的计算属性
			// 计算属性不能传参
			sayHello: function () {
				return 'Hello!'
			}
		}
	})
  </script>
 </body>
</html>

结果
在这里插入图片描述
这里有几点必须重视的地方
1.写方法时，关键词是methods，后面有个s。
2.计算属性不能传参，调用的时候只写其名字。
3.v-bind:value=""的引号中，直接写变量名或方法名，而不用加{{}}。因为前面有vue的关键词v-bind。要将vue对象中的属性绑定到标签的属性中，要使用也必须使用v-bind关键字。
4.计算属性必须返回一个值。计算属性包括get和set方法，默认的是get方法。且结果相同，它只计算一遍。

这里还可以试试事件的绑定，就用v-on:click吧。
代码

<html>
 <head>
  <meta charset="UTF-8">
  <title>v-bind</title>
  <script src="vue.js"></script>
 </head>
 <body>
  <div id="app">
	<input type="button" v-on:click="saySomething(message)" value="methods" />
  </div>

  <script>
	new Vue({
		el: '#app',
		data: {
			message: 'HelloWorld!'
		},
		methods: {
			// 这里是vue对象中的方法
			saySomething: function (something) {
				alert("methods: " + something)
			}
		}
	})
  </script>
 </body>
</html>

结果
在这里插入图片描述

特效3：组件特性

组件特性可以说是vue中最大的亮点的，为什么呢？因为组件可以复用。首先我们来写一个简单的组件吧。

<html>
 <head>
  <meta charset="UTF-8">
  <title>Component</title>
  <script src="vue.js"></script>
 </head>
 <body>
	<div id="app">
		<my-component v-bind:message="'say'"></my-component>
	</div>
	<script>
		// 定义全局组件
		Vue.component('my-component', {
			// 接收传过来的数据
			props: ['message'],
			// data必须是一个函数
			data: function () {
				return {
					// 数据
					say: 'Hello!',
					dmessage: this.message
				}
			},
			// html模板，只能有一个根节点，每行末尾的 '\' 是连接上一行和下一行的
			template: '\
				<span>\
					{{ say }}<br>\
					<button>{{ dmessage }}</button>\
				</span>\
				'
		})
		new Vue({
			el: '#app'
		})
	</script>
 </body>
</html>

我们可以看到我们定义了一个全局的组件，名字叫做my-component，这里我们为什么不适用驼峰法取名myComponent呢？因为html是大小写不敏感的，浏览器会将大写字母转化为小写字母。

接下来里面的props参数是接收数据，用v-bind:message=""，引号中就填写数据。props可以是对象。

然后data就像vue中的data属性一样，不过data必须是函数的写法，return出来的就是数据。还有要使用props中的数据要用this.message这样的写法。

结果如何呢？你能猜到吗？
没错，就是

在这里插入图片描述

如果你要在组件中定义一个事件触发vue对象中的方法该怎么做？好了，我们来看看案例。

<html>
 <head>
  <meta charset="UTF-8">
  <title>Component</title>
  <script src="vue.js"></script>
 </head>
 <body>
	<div id="app">
		<my-component v-on:test="display()"></my-component>
	</div>
	<script>
		// 定义全局组件
		Vue.component('my-component', {
			template: '\
				<span>\
					<button v-on:click="$emit(\'test\')">点击我</button>\
				</span>\
				'
		})
		new Vue({
			el: '#app',
			methods: {
				display: function () {
					alert('点击了')
				}
			}
		})
	</script>
 </body>
</html>

我们在组件的模板中定义了一个点击事件，v-on:click="$emit(‘test’)"，我们使用组件时要将方法绑定到组件的click事件中，我们就需要这么写：v-on:test=“display()”。
于是点击后结果是这样
在这里插入图片描述