6.Vue小基础

最新推荐文章于 2023-03-12 13:47:10 发布

ATWLee

最新推荐文章于 2023-03-12 13:47:10 发布

阅读量147

点赞数 1

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/100668544

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

Vue

vue小练习
//页面输出Hello World，两秒后改为Bye World

<body>
	<div id="app">{{content}}</div>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				content: 'Hello World'
			}
		})
		
		setTimeout(function(){
			app.$data.content='Bye World'
		}, 2000)
	</script>
</body>

与传统DOM操作比较：

var dom=document.getElementById("app");
dom.innerHTML="Hello World";

setTimeout(function(){
	dom.innerHTML="Bye World";
}, 2000)

结论：当我们书写Vue代码的时候，就不需要过多的考虑DOM上的操作，重点放在了数据的管理之上。

使用vue实现TodoList

<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>

MVVM模式（vue）与MVP模式（jquery）对比

在这里插入图片描述

组件化（页面的一个部分）

对上文todolist的优化

<ul>
	<todo-item v-bind:content="item" v-for="item in list"></todo-item>
</ul>
。。。。
Vue.component("TodoItem",{
		props: ["content"],
		template: "<li>{{content}}</li>"
	})
。。。

此代码的vue是全局组件，即：Vue.component(“”，{})
如果是局部组件：

var TodoList={
	props: ["content"],
	template: "<li>{{content}}</li>"
}

但是，如果要使用局部组件的话，要把局部组件注册在vue实例中：

var app=new Vue({
			el: '#app',
			components: {
				 TodoList: TodoList
			},
			data: {
				list: [],
				inputValue: ''
			}

简单的组件间传值

$emit触发事件

<ul>
	<todo-item  v-bind:content="item"
				v-for="(item,index) in list"
				@delete="handleItemDelete"//监听到名为delete的事件后，触发handleItemDelete函数
				v-bind:index="index">
	</todo-item>
</ul>
//
//子组件点击后向父组件传递一个名为delete的事件，后边的参数是跟着一起传的参数。
var TodoItem={
			props: ["content","index"],
			template: "<li @click='handleItemClick'>{{content}}</li>",
			methods:{
				handleItemClick: function(){
					this.$emit("delete",this.index)
				}
			}
		}
		//

		//父组件（即vue实例）中更改list中的值
		handleItemDelete: function(index){
				this.list.splice(index,1)
			}

父组件向子组件传值采用v-bind的方法，注意要在子组件中接收，即props：[]
子组件向父组件传值采用$emit触发事件的方法，在元素中监听到，再触发一个function更改要修改的元素。

总的todolist代码：

<!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'>
		<button @click='handleBtnClick'>提交</button>
		<ul>
			<todo-item  v-bind:content="item"
						v-for="(item,index) in list"
						@delete="handleItemDelete"
						v-bind:index="index">
			</todo-item>
		</ul>
		
	</div>

	<script>

		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>

ATWLee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.Vue小基础

vue小练习//页面输出Hello World，两秒后改为Bye World<body> <div id="app">{{content}}</div> <script> var app = new Vue({ el: '#app', data: { content: 'Hello World' } })...
复制链接

扫一扫