一.初识vue

最新推荐文章于 2020-05-10 15:17:13 发布

hahalang-

最新推荐文章于 2020-05-10 15:17:13 发布

阅读量319

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sinat_40697723/article/details/80153834

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先，根据两个实例来比较原生js和vue.js的区别：

1.给dom元素添加内容：

原生js的写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript">
		var app=document.getElementById('app');
		app.innerHTML = 'hello world';
	</script>
</body>
</html>

使用vue.js的写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">{{content}}</div>
	<script type="text/javascript">
		//首先创建一个vue实例
		var app = new Vue({
			el: '#app', //通过这个vue实例来控制id为app的dom元素
			data: {
				content: 'hello world'
			}
		})
	</script>
</body>
</html>

2.两秒以后改变dom元素的内容：

原生的js写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript">
		var app=document.getElementById('app');
		app.innerHTML = 'hello world';
		setTimeout(function(){
			app.innerHTML = 'haha'
		},2000);
	</script>
</body>
</html>

vue.js的写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">{{content}}</div>
	<script type="text/javascript">
		//首先创建一个vue实例
		var app = new Vue({
			el: '#app', //通过这个vue实例来控制id为app的dom元素
			data: {
				content: 'hello world'
			}
		})
		setTimeout(function(){
			app.$data.content = 'haha'
		},2000);
	</script>
</body>
</html>

3.用vue.js制作一个简单的Todolist

这就是mvvm模式，即从始至终我们都没改变dom，一直都是在改变数据。

我们平时都是在使用MVP模式，即model 、View、Presenter层。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./vue/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model='inputValue'>
		<!-- 利用v-model实现input框的值与data里面的inputValue实现双向数据绑定 -->
		<button v-on:click='handbtn'>提交</button>
		<!-- 利用v-on:click绑定click事件，实现点击时调用handbtn这个函数 -->
		<ul>
			<li v-for='item in list'>{{item}}</li>
			<!-- 利用v-for实现数据的循环，即list的每一项item都通过li标签展示出来 -->
		</ul>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handbtn:function(){
					this.list.push(this.inputValue)
					this.inputValue = ''
				}
			}
		})
	</script>
</body>
</html>

效果图：

4.Vue.component()，是vue提供的创建全局组建的方法。对列表项进行组件化开发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
	<input type="text" v-model='inputValue'>   
	<!-- 利用v-model将input的值与data实现双向绑定，即改变input框的值，那么data里面的inputValue的值也会改变，同理改变data里面的input框的值也改变 -->
	<button v-on:click='handClick'>提交</button>
	<!-- 利用v-on，为提交按钮绑定一个点击事件函数 -->
	<ul>
		<!-- 对列表项进行组件化开发 -->
  		<todo-item v-for='item in list' v-bind:content='item'>		<!-- 通过list来确定有多少个todoitem项，在通过v-bind这个语法通过content这个变量将每一项传递给todoitem -->
  		</todo-item>
	</ul>
    </div>
	<script type="text/javascript">
	    //创建一个全局组建TodoItem
   		Vue.component('TodoItem', {
   			props:['content'],  //将item赋值给content这个变量以后，必须在这里用props进行接收
   			template: '<li>{{content}}</li>'   /*创建一个模板，利用<todo-item></todo-item>来代替<li>，进行组件化开发*/
   		})

		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handClick: function() {
					this.list.push(this.inputValue),  //点击提交以后将input框的值顺序的添加到列表项的后面
					this.inputValue=''   //点击提交以后清空input框
				}
			}
		})
	</script>
</body>
</html>

效果图：

5.通过创建一个局部组建，实现列表项的组建化开发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
	<input type="text" v-model='inputValue'>   
	<!-- 利用v-model将input的值与data实现双向绑定，即改变input框的值，那么data里面的inputValue的值也会改变，同理改变data里面的input框的值也改变 -->
	<button v-on:click='handClick'>提交</button>
	<!-- 利用v-on，为提交按钮绑定一个点击事件函数 -->
	<ul>
		<!-- 对列表项进行组件化开发 -->
  		<todo-item v-for='item in list' v-bind:content='item'>		<!-- 通过list来确定有多少个todoitem项，在通过v-bind这个语法通过content这个变量将每一项传递给todoitem -->
  		</todo-item>
	</ul>
    </div>
	<script type="text/javascript">
	    //创建一个局部组建TodoItem
 		var TodoItem={
 			props:['content'],
 			template: '<li>{{content}}</li>'
 		}  //这么创建以后还不能用，还要利用components去vue的实例中加入

		var app = new Vue({
			el: '#app',
			data: {
				list: [],
				inputValue: ''
			},
			components: {
				TodoItem: TodoItem    //左侧的todolist对应的是标签名，它可以改变。
			},  //创建完局部组建后添加到Vue的实例中
			methods: {
				handClick: function() {
					this.list.push(this.inputValue),  //点击提交以后将input框的值顺序的添加到列表项的后面
					this.inputValue=''   //点击提交以后清空input框
				}
			}
		})
	</script>
</body>
</html>

效果同上

6. v-on:click的简写是@click，v-bind:的简写是:

下面演示一下如何通过子组件向父组件传值

7.注意：注册组件名的时候，有两种写法：驼峰形式或者短横线。但是在Dom中使用时只能用短横线的标签。