VUE实战项目开发--vue起步

最新推荐文章于 2024-03-11 18:44:45 发布

不一于汝

最新推荐文章于 2024-03-11 18:44:45 发布

阅读量468

点赞数

分类专栏： JavaScript vue

本文链接：https://blog.csdn.net/wo_921110/article/details/80369084

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 2 订阅

订阅专栏

vue

21 篇文章 2 订阅

订阅专栏

一个vue的Hello World实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">{{content}}</div>

    <script>
      // var dom = document.getElementById('app');
      // dom.innerHTML = 'hello world'
      
      var app = new Vue({
      	el: '#app',
      	data: {
      		content: 'hello world'
      	}
      })
    </script>
</body>
</html>

 var app = new Vue({
      	el: '#app',
      	data: {
      		content: 'hello world'
      	}
      })

上面的这段代码：new出一个实例，el表示实例负责管理的范围，让这个实例接管id=app这个标签里的所有内容。

定义了一个data数据，再通过插值表达式{{}}把data里的content数据插入进去。

一个简单的TodoList

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue"/>
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
	</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
			    list: [],
			    inputValue: ''
			},
			methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                }
			}
		})
	</script>
</body>
</html>

上面的代码使用了三个指令：v-for、v-model、v-on

分别代表的作用如下：

v-for：遍历list数组
v-model：双向数据绑定，data里的inputValue与input标签里的inputValue变化是一致的
v-on：绑定事件，在这里是绑定了一个click点击事件

注意：MVVM模式的讲解：

M层：model数据层
V层：视图层
VM层：通过vue实现对M层和V层的控制，通过VM层的各种操作可以改变数据层(model层)，然后再映射到视图层(view层)。面向数据编程，减少了对DOM的操作。

组件化的开发-

组件化开发：每一个组件就是页面上的一个区域。

通过组件化的思想对TodoList进行修改：

<!--** 使用组件化思想的TodoList-->
<!--** component: 创建全局组件的方法-->
<!--** props: 接受父组件的数据-->
<!--** template: 子组件的模板-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue"/>
		<button @click="handleBtnClick">提交</button>
		<ul>
			<todo-item v-bind:content="item"
					   v-for="item in list">
			</todo-item>

		</ul>
	</div>

	<script>

        //定义全局组件
//		Vue.component("TodoItem",{
//		    props: ['content'],
//		    template:"<li>{{content}}</li>"
//		})

		//局部组件的使用,还需要在app这个实例中注册
		var TodoItem={
		    props: ['content'],
            template:"<li>{{content}}</li>"
		}


		var app = new Vue({
			el: '#app',
			//局部组件的注册
            components: {
			    TodoItem: TodoItem
			},
			data: {
			    list: [],
				inputValue: ''
			},
			methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                }
			}
		})
	</script>
</body>
</html>

简单的组件传值

v-bind:     父组件向子组件传值（可以省略为 : ）
props:   接受父组件的数据
template: 子组件的模板
@delete="handleItemDelete"：监听子组件delete这个事件，一旦删除就会执行父组件中的handleItemDelete方法
$emit：     子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>TodoList</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue"/>
		<button @click="handleBtnClick">提交</button>
		<ul>
			<todo-item v-bind:content="item"
					   v-bind:index="index"
					   v-for="(item, index) in list"
					   @delete="handleItemDelete">
			</todo-item>

		</ul>
	</div>

	<script>

		//局部组件的使用,还需要在app这个实例中注册
		var TodoItem={
		    props: ['content', 'index'],
            template:"<li @click='handleItemClick'>{{content}}</li>",
			methods: {
                handleItemClick: function() {
		            this.$emit("delete", this.index)
				}
			}
		}


		var app = new Vue({
			el: '#app',
			//局部组件的注册
            components: {
			    TodoItem: TodoItem
			},
			data: {
			    list: [],
				inputValue: ''
			},
			methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
				handleItemDelete: function (index) {
                    this.list.splice(index,1);
                }
			}
		})
	</script>
</body>
</html>