vue-01

vue简介

Vue 是一套用于构建用户界面的前端框架。

vue 框架的特性：

1. 数据驱动视图

   • 数据的变化会驱动视图自动更新
   • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2. 双向数据绑定

   在网页中，form 表单负责采集数据，Ajax 负责提交数据。

   • js 数据的变化，会被自动渲染到页面上
   • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分。

Model 表示当前页面渲染时所依赖的数据源。

View 表示当前页面所渲染的 DOM 结构。

ViewModel 表示 vue 的实例，它是 MVVM 的核心。

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

基本代码与 MVVM 的对应关系

el:如果有多个p标签，且el的值为‘p’则只处理第一个p标签​

vue的指令与过滤器

指令

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

1. 内容渲染指令
2. 属性绑定指令
3. 事件绑定指令
4. 双向绑定指令
5. 条件渲染指令
6. 列表渲染指令

指令是 vue 开发中最基础、最常用、最简单的知识点。

内容渲染指令

内容渲染指令用来辅助渲染DOM元素的文本内容。

常用的内容渲染指令有：

v-text

v-text 指令会覆盖元素内默认的值。

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

{{}}

vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达 式。

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

v-html

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

<!--假设data中定义了名为discription的数据，数据的值为包含HTML标签的字符串：<h5 style="color:red;">我在学习vue.js</h5>-->
<p v-html="discription"></p>

属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。

用法示例如下：

<!--
	假设有如下的data数据：
	data:{
		inputValue:'请输入内容'，
		imgSrc:'https://cn.vuejs.org/images/logo.png'
	}
-->
<!--使用v-bind指令，为input的placeholder动态绑定属性值-->
<input type="text" v-bind:placeholde="inputValue"/>
<br/>
<!--使用v-bind指令，为img的src动态绑定属性值-->
<img v-bind:src="imgSrc" alt=""/>

属性绑定指令的简写形式

由于 v-bind 指令在开发中使用频率非常高，vue 官方为其提供了简写形式（简写为英文的 : ）

<!--
	假设有如下的data数据：
	data:{
		inputValue:'请输入内容'，
		imgSrc:'https://cn.vuejs.org/images/logo.png'
	}
-->
<!--使用v-bind指令，为input的placeholder动态绑定属性值-->
<input type="text" :placeholde="inputValue"/>
<br/>
<!--使用v-bind指令，为img的src动态绑定属性值-->
<img :src="imgSrc" alt=""/>

使用 Javascript 表达式

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

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

事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。

<h3>count的值为：{{count}}</h3>
<!--语法格式为 v-on: 事件名称="事件处理函数的名称"-->
<button v-on:click="addCount">+1</button>

原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后， 分别为：

v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

const vm=new Vue({
	el:'#app',
	data:{count:0},
	methods:{//v-on绑定的事件处理函数，需要声明在methods节点中
		addCount(){//事件处理函数名
			//this表示当前new出来的vm实例对象
			//通过this可以访问到data中的数据
			this.count+=1
		}
		
	}
})

事件绑定的简写形式

用 @ 来简化v-on指令，可以提高开发中的效率

<div id="app">
	<h3>Count的值为：{{count}}</h3>
    <!--完整写法-->
    <button v-on:click="addCount">+1</button>
    <!--简写形式，把 v-on: 简写为 @ 符号-->
    <!--如果事件处理函数中的代码足够简单，只需要一行代码，则可以简写到行内-->
    <button @click="count+=1">+1</button>
</div>

事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。v-on中同样可以使用event接收到事件参数

<h3 class='app'>count的值为：{{count}}</h3>
<button c-on:click="addCount" class='app'>+1</button>
<script>
	const vm=new Vue({
	el:'.app',
	data:{count:0},
	methods:{//v-on绑定的事件处理函数，需要声明在methods节点中
		addCount(e){//事件处理函数名
            const nowBgColor=e.target.style.backgroundColor
            e.target.style.backgroundColor=nowBgColor=='red'?'':'red'
			//this表示当前new出来的vm实例对象
			//通过this可以访问到data中的数据
			this.count+=1
		}
		
	}
})
</script>

绑定事件并传参

可以使用() 进行传参

<h3 class='app'>count的值为：{{count}}</h3>
<button c-on:click="addCount(2)" class='app'>+2</button>
<script>
	const vm=new Vue({
	el:'.app',
	data:{count:0},
	methods:{//v-on绑定的事件处理函数，需要声明在methods节点中
		addCount(step){//事件处理函数名
			//this表示当前new出来的vm实例对象
			//通过this可以访问到data中的数据
			this.count+=step
		}
		
	}
})
</script>

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。

<h3 class='app'>count的值为：{{count}}</h3>
<button c-on:click="addCount(2,$event)" class='app'>+1</button>
<script>
	const vm=new Vue({
	el:'.app',
	data:{count:0},
	methods:{//v-on绑定的事件处理函数，需要声明在methods节点中
        //在形参处用 e 接收传递过来的原生事件参数对象 $event
		addCount(step,e){//事件处理函数名
            const nowBgColor=e.target.style.backgroundColor
            e.target.style.backgroundColor=nowBgColor=='red'?'':'red'
			//this表示当前new出来的vm实例对象
			//通过this可以访问到data中的数据
			this.count+=step
		}
		
	}
})
</script>

事件修饰符

vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

按键修饰符

在监听键盘事件时，经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

<!--只有在`key` 是 `Enter` 时调用`vm.submit()`-->
<input @keyup.enter="submit"/>
<!--只有在`key` 是 `Esc` 时调用 `vm.clearInput()`-->
<input @keyup.esc="clearInput"/>

双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

1. v-if
2. v-show

<div id="app">
    <p v-id="networkState===200">
        请求成功---被v-if控制
    </p>
    <p v-show="networkState===200">
        请求成功---被v-show控制
    </p>
</div>

v-if

v-if可以单独使用

v-else

v-else必须配合v-if一起使用，否则将不会被识别

<div v-if="Math.random()>0.5">随机数大于0.5</div>
<div v-else>随机数小于或等于0.5</div>

v-else-if

v-else-if相当于else if的作用，也必须配合v-if使用

v-if和v-show的区别

实现原理

v-if指令会动态地创建或移除DOM元素，从而控制元素在页面上的显示与隐藏

v-show指令会动态为元素添加或移除style=“display：none;样式，从而控制元素的显示与隐藏

性能消耗

v-if有更高的切换开销，v-show有更高的初始渲染开销

如果需要非常频繁地切换，使用 v-show

如果在运行时条件很少改变，使用 v-if

列表渲染指令

vue 提供了v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使 用 item in items 形式的特殊语法，其中：

items是待循环的数组

item是被循环的每一项

data:{
	list:[//列表数据
		{id:1,name:'zs'},
		{id:2,name:'ls'}
	]
}
<ul>
    <li v-for="item in list">姓名是：{{item.name}}</li>
</ul>

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

data:{
	list:[//列表数据
		{id:1,name:'zs'},
		{id:2,name:'ls'}
	]
}
<ul>
    <li v-for="(item,index) in list">索引是：{{index}},姓名是：{{item.name}}</li>
</ul>

过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用

定义过滤器

在创建 vue 实例期间，在 filters 节点中定义过滤器

const vm=new Vue({
	el:'#app',
	data:{
		message:'hello vue.js',
		info:'title info'
	},
	filters:{//在filters节点下定义过滤器
		capitalize(str){//把首字母转为大写的过滤器
			return str.charAt(0).toUpperCase()+str.slice(1)
		}
	}
})

过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为**私有过滤器**，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：