一点vue的基础(1)

Vue 的特点

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）
2. 指令（以 v-开头）

插值语法

1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
3. 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

单向数据绑定

1. 语法：v-bind:href ="xxx" 或简写为 :href
2. 特点：数据只能从 data 流向页面

双向数据绑定

1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

MVVM 模型

1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

绑定监听

1. v-on:xxx(事件)="fun"
2. @xxx="fun"
3. @xxx="fun(参数)"
4. 默认事件形参: event
5. 隐含属性对象: $event

事件修饰符

1. prevent : 阻止事件的默认行为 event.preventDefault()
2. stop : 停止事件冒泡 event.stopPropagation()
   写法:@click.prevent

按键修饰符

1. keycode : 操作的是某个 keycode 值的键
2. keyName : 操作的某个按键名的键(少部分)
   写法:@keyup.这个地方写keyNama,如:@keyup.enter

计算属性与监视

计算属性-computed

1. 要显示的数据不存在，要通过计算得来。
2. 在 computed 对象中定义计算属性。
3. 在页面中使用{{方法名}}来显示计算的结果。

computed:{
fullname一个变量名:{
//get有什么用处?当有人读取fullname,get就会被调用,且返回值就作为fullname的值
//get什么时候调用?1.初次读取fullname时.2.所依赖的数据变化时.
	get(){
	//这里写计算过程
	return 你的计算结果
	}
}
//get有什么用处?当有人读取
}

监视属性-watch

1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

const vm=new Vue({
	el:'#root',
	data:{
	被监视的属性:值,
	}
	watch:{
		被监视的属性:{
			//handler什么时候调用?当被监视属性发生变化时
			handler(){
				当被监视属性发生改变时,要启动的逻辑代码
			}
		}
	}
})