Vue基础

渐进式JavaScript框架

声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

官网：https://cn.vuejs.org/v2/guide/

易用：熟悉HTML、CSS、JavaScript知识后

灵活：在一个库和一套完整框架之间自如伸缩

高效：20kb运行大小，超快虚拟DOM

[vue官方文档]https://cn.vuejs.org/v2/guide/

Vue基本使用

步骤：

1、需要提供标签用于填充数据

2、引入vue.js库文件

3、可以使用vue的语法做功能

4、把vue提供的数据填充到标签里面

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）

data：模型数据（值是一个对象）

	//1、实例化
    let vm = new Vue({
        //2、添加选项参数
        //3、作用的元素
        el:"#app",
        //4、数据
        data: {
            name : 'jack Ma',
            age: 18,
            sex :'男'
         },
         //5、方法：函数
         methods: {}
     });

插值表达式用法

将数据填充到HTML标签里里面
插值表达式支持基本的计算操作

前端渲染

把数据填充到HTML

把模板和数据结合就是前端渲染，产物就是静态HTML

前端渲染方式

原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中。

缺点：不同开发人员的代码风格差别很大

使用前端模板引擎

基于模板引擎，拥有自己的一套模板语法规则

Vue模板语法

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

什么是指令？

指令的格式：以v-开始（比如：v-cloak）

指令的本质就是自定义属性

v-cloak指令

插值表达式存在问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值后再显示最终的值

1、提供样式

[v-cloak]{
		display:none;
    }

2、在插值表达式所在的标签中添加v-cloak指令

原理：通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令

v-text 填充文本

1、相比插值表达式更加简洁
v-html 填充HTML片段

1、存在安全问题

2、本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息

1、显示原始信息，跳过编译过程（分析编译过程）

<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{
   
   {msg}}</div>

var vm = new Vue({
	el:'#app',
	data:{
		msg:'holle'，
		msg1: '<h1>Html</h1>'
	}
})

数据响应式

如何理解响应式
- html5中的响应式（屏幕尺寸的变化导致样式的变化）
- 数据的响应式（数据的变化导致页面内容的变化
什么是数据绑定
- 数据绑定：将数据填充到标签中
v-once只编译一次
- 显示内容之后不再具有响应式功能
v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，提高性能

双向数据绑定

双向绑定分析

v-model指令用法
```
<input type='text' v-model='msg';
```
v-model=‘数据源’;

MVVM设计思想

M(model)
V(view)
VM(View-Model)

事件绑定

1、Vue如何处理事件？

v-on指令用法

<input type = 'button' v-on:click='numm++'/>

v-on简写形式
- ```
<input type='button'@click='num++'/>
```

2、事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>hello</button>

调用函数
- ```
<button v-on:click='say()'say hi</button>
```
3、事件函数参数传递
- 普通参数和事件对象
- ```
<button v-on:click='say("hei",$event)'say hi</button>
```
  最后一个参数代表事件对象
- 如果事件直接绑定函数名称，那么默认会传递事件作为事件函数的第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

4、事件修饰符

.stop阻止冒泡
- ```
<a v-on:click.stop="handle">跳转</a>
```

.prevent阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

使用修饰符时，顺序很重要：相应的代码会以同样的顺序产生，因此，用
- v-on:click.prevent.self:会阻止所有点击
- v-on:click.self.prevent:只会阻止对元素自身的点击
.self :给对象的本身绑定事件，点击子元素不起作用
.once：只给事件绑定一次

5、按键修饰符

.enter 回车键
- ```
<input v-on:keyup.enter = 'submit'>
```
.delete删除键
- ```
<input v-on:keyup.deletee = 'submit'>
```
.tab
.up
.down
.left
.right

6、自定义按键修饰符

全局config.keyCodes对象
- Vue.config.keyCodes.f1 = 112

简单计算器

1、通过v-model指令实现数值a和数值b的绑定

2、给计算按钮绑定事件，实现计算逻辑

3、将计算结果绑定到对应位置

属性绑定

1、Vue如何动态处理属性

v-bind：绑定标签属性，语法糖形式

v-bind指令用法
- ```
<a v-bind:href='url'>跳转</a>
```
缩写形式
- ```
<a :href='url'>跳转</a>
```

2、v-model的低层实现原理分析

<input v-bind:value="msg" v-on:input="msg=$event.taeget.value">

样式绑定

1、class样式处理

对象语法

<div v-bind:class="{active: isActive}"></div>

数组语法

<div v-bind:class="{activeClass: errorClass}"></div>

主要用于给控件加样式

<!DOCTYPE html>
<html lang="ZH-ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">测试样式</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data: {
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
                handle(){
                    this.activeClass = ''
                }
            }
        });
    </script>
</body>

</html>

样式绑定相关语法细节

1、对象绑定和数组绑定可以结合使用

2、class绑定的值可以简化操作

3、默认的class如何处理？默认的class会保留

<!DOCTYPE html>
<html lang="ZH-ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error{
            background-color: pink;
        }
        .test{
            color: blue;
        }
        .base{
            font-size: 28px;
        }
    </style>
    <script type="text/javascript" src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass,{test: isTest}]">测试样式</div>
        <div v-bind:class='arrClasses'></div>
        <div v-bind:class='objClasses'></div>
        <div class="base" v-bind:class='objClasses'></div>
        <button v-on:click="handle">切换</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: true,
                arrClasses: ['active','error'],
                objClasses: {
                    active: true,
                    error: true
                }
            },
            methods: {
                handle(){
                    // this.activeClass = '',
                    // this.errorClass = '',
                    // this.isTest = false
                    this.objClasses.error = false
                }
            }
        });
    </script>
</body>

</html>

style样式处理