VUE笔记

VUE

一套构建用户界面的前端框架。用VUE向HTML填充数据方便，框架是一套现成的解决方案，是必须要遵守的。学会指令，组件（UI），路由、vuex,组件库，可以进行独立开发。

VUE两个特性：数据驱动视图（数据的变化自动渲染页面）、双向数据绑定（js数据变化自动渲染到页面，页面数据变化自动更新到js文件）

MVVM是两个特性实现的底层原理，（model view viewmodel）Model表示当前页面渲染时所依赖的数据源。View表示当前页面所渲染的DOM结构。ViewModel（VUE实例）表示vue的实例，它是MVVM的核心。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKVfQTwl-1629631257784)(C:\Users\墨宝\AppData\Roaming\Typora\typora-user-images\image-20210820102413977.png)]

基本使用步骤
①导入vue.js的script脚本
②在页面中生成一个将被vue所控制的DOM区域
③创建VM实例
指令与过滤器

指令就是模板语句，是辅助开发者渲染页面的基本结构，基本分类如下：

①内容渲染指令
②属性绑定指令
③事件绑定指令
④双向绑定指令
⑤条件渲染指令
⑥列表渲染指令

内容渲染指令

v-text {{}} v-html

v-text

<!--把username对应的值，渲染到第一个p标签中-->
<p v-text="username"></p>
<!---把gender对应的值，渲染到第二个p标签中-->
<!--注意:第二个p标签中，默认的文本“性别”会被gender 的值覆盖掉-->
<p v-text= ”gender">性别</p> 

相当于一个自定于属性，让相应的数据填到相应的地方，但是这个形式的会先覆盖原内容的值，在填充新值（不灵活）

{{ }}——插值表达式

<!--使用{{ }}插值表达式，将对应的值渲染到元素的内容节点中，
<!--同时保留元素自身的默认值-->
<p>姓名: {{username}}</p>
<p>性别: {{gender}}</p>

就像模板字符中的填充字符,使用的最多

v-html

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令,可以将带标签的字符串渲染成真的HTML内容

属性渲染指令
注意：插值表达式只能用在内容中
v-bind

<input type="text" v-bind:placehoder="tips">

data:{
	tips: 'qingshuruxingming'
}

v-bind 可以简写成 ：

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外,还支持Javascript表达式的运算，例如:

{{ number + 1 }}
{{ok?'YES':'NO' }}
{{ message.split(' ').reverse(). join('') }}
<div v-bind:id=" 'list-' + id"></div> 

事件绑定指令

v-on：click=“处理函数名字”，，，函数与data平齐，methods: { add: function(){ }}

data: {
	el: '#app',
	data: {
		name: 'zs'
	},
	methods: {
		add() {
			log(0)
		},
		ap() {
			log(1)
		}
	}
}

在methods中访问数据源，用this（vue实例对象），this.数据名就行，处理函数需要传参就加（）
v-on：简写成@
$event 就是内置的原生对象e

@click="add(n, $event)“

事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念,来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:
.prevent 阻止默认行为(例如:阻止a连接的跳转、阻止表单的提交等)
.stop 阻止事件冒泡
.capture 以捕获模式触发当前的事件处理函数
.once 绑定的事件只触发1次
.self 只有在event.target是当前元素自身时触发事件处理函数

@click.stop="add(n, $event)"

v-model

表单提交时动态感知数据变化，，只有表单元素在一起使用

v-model是双向操作，而：value是单向操作