Vue代码结构与双向绑定

2020-11-23

项目结构

• template：div#app模块：项目的结构，只能存在一个template标签，且template标签中只能存在一个块级元素
• script模块：变量、方法、监视器定义位置
• style模块：组件的style，当设置scoped代表仅在本文件内生效，若要使用scss须在标签中声明lang=scss

声明式渲染

在div#app中

• 变量以{{}}的形式嵌入其中

定义变量

<script>
export default{
	name:"app",
	data(){
		return {
			a:'',
			b:[],
			...
		}
	}
}
</script>

or

<script>
export default{
	name:"app",
	data:function(){
		return {
			a:'',
			b:[],
			...
		}
	}
}
</script>

双向绑定

顾名思义，对两个位置的数据进行同步化，一个改变另一个也会发生改变。
双向绑定实现了mvvc架构风格
不同于传统的Model（data）+view（视图）+Control（控制器）的风格，方便了数据交换与数据渲染

双向绑定步骤

在需要绑定的标签中加入 v-model="variable-name" ，在另一端引入声明式渲染。
当然需要使用到我们的变量，我们要在data中添加变量

使用方法

绑定事件

v-on:click="method-name"

v-on（绑定事件）一类的都可以用@ 来表示

@click="method-name"

定义方法

<script>
export default{
	name:"app",
	methods:{
		method-name:function(){
		},
		method-name2(var v,var s):{
		}
	}
}
</script>

监听器

为变量绑定监听器，当变量发生变化时进行自定义操作
注:this指的是当前vue组件，如果想要使用变量时需要使用this.variable-name来引用

使用监听器

<script>
export default{
	name:"app",
	methods:{
		method-name:function(){
		},
		method-name2(var v,var s):{
		}
	},
	watch:{
		variable-name:{
			handler:function(value,oldValue){
			//value:新值
			//oldValue:旧值，记录修改前的值
			//非必要参数，固定顺序
			},
			immeidate:true,
		}
	}
}
</script>

• handler：处理函数
• immeidate：页面第一次加载的时候也执行handler

结语

我们不难发现vue的语法的一些相似地方

1. script结构中，代码基本上都以k:v结构呈现，我们可以方便记忆
2. script结构中，data实际上是一种带有返回值的function，返回的结果是一个集合，里面我们可以定义变量

日积月累，乐在其中
感谢您阅读本文章，希望有能帮助到您的地方，也非常欢迎您对本文提出错误和不足的地方