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

桃扇骨 2022-05-11 10:24 198阅读 0赞

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

好，待我细细说来。  
首先先把vue.js文件的下载地址给你们，引入了这个js脚本，你们就能自由地驰骋在vue的天地了。 [Vue.js下载地址][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>
        		
        		new Vue({
        			el: "#app",
        			data: {
        				message: "Hello World!"
        			}
        		})
        	</script>
         </body>
        </html>

运行效果如下：

![在这里插入图片描述][70]  
我们可以看到，Vue对象中data的message被绑定到了我们的html元素中，绑定的符号就是\{ \{ \}\}。  
  
我们再来看看message变了之后会发生什么呢？  
我门将代码做点改动

结果如何呢？没错，1s后页面的内容变为了  
![在这里插入图片描述][70 1]  
感觉怎么样呢？这样我们就不用写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">
    	
    	<input type="text" v-bind:value="saySomething(message)" />
    	
    	<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>

结果  
![在这里插入图片描述][70 2]  
这里有几点必须重视的地方  
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>

结果  
![在这里插入图片描述][70 3]

## 特效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这样的写法。  
  
结果如何呢？你能猜到吗？  
没错，就是  
  
![在这里插入图片描述][70 4]

如果你要在组件中定义一个事件触发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()”。  
于是点击后结果是这样  
![在这里插入图片描述][70 5]

知道了Vue三大特性的你，是否对Vue感兴趣了呢？如果是的话，那就进入Vue的[官方网站][Link 1]尽情地学习吧。

最后，非常感谢大家阅读我的博客。

[Vue.js]: https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js
[70]: /images/20220511/36136287bf2d4af0a3fb185d8cd9ddb8.png
[70 1]: /images/20220511/0605906e562e402291faad82258b5769.png
[70 2]: /images/20220511/694d2be05e2941feb29c971ab038b4b4.png
[70 3]: /images/20220511/4ccb396b91cf41b394eb21cc59df14b6.png
[70 4]: /images/20220511/fa229ee863254cef8ebd21683b08b7b8.png
[70 5]: /images/20220511/7f76fe753c784e27aec5c41ae43a7f6b.png
[Link 1]: https://cn.vuejs.org/v2/guide/installation.html