01 Vue基础

1. vue 概述#

Vue：渐进式JavaScript框架

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

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟DOM

2. vue基本使用

2.1 传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
	var msg = 'Hello World';
	var div = document.getElementById('msg');
	div.innerHTML = msg;
</script>

jq

<div id="msg"></div>
	<script type="text/javascript" src="js/jquery.js"></script>  
	<script type="text/javascript">
		var msg = 'Hello World';
		$('#msg').html(msg);
	</script>

2.2 Vue.js之HelloWorld基本步骤

<div id="app">
	<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>  
<script type="text/javascript">
new Vue({
	el: '#app',
	data: {
		msg: 'HelloWorld'
	}
})
</script>

2.3 Vue.js之HelloWorld细节分析

1.实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）

2.插值表达式用法

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

3.Vue代码运行原理分析

概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

1.把数据填充到HTML标签中

把数据填充HTMl标签中，这个过程叫前端渲染，产物则是静态html内容

2.前端渲染方法

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

3.原生js拼接字符串

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

缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来

4.使用前端模板引擎

优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

5.vue模板语法概览

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

3.2 指令

1.什么是指令？

什么是自定义属性
指令的本质就是自定义属性
指令的格式：以v-开始（比如：v-cloak）

2.v-cloak指令用法

插值表达式存在的问题：“闪动”(经常刷新浏览器插值表达式会出问题)
如何解决该问题：使用v-cloak指令

解决该问题的原理：先隐藏，替换好值之后再显示最终的值

  <div id="app">
      <div v-cloak>{{msg}}</div>
      <div>{{1 + 2}}</div>
  </div>
  <script src="./js/vue.js"></script>
  <script type="text/javascript">
      // v-cloak指令的语法
      // 1、提供样式
      // [v-cloak]{
      //     display:none
      // }
      // 2、差值表达式标签中添加v-cloak指令
      // 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换

      var vm = new Vue({
          el: '#app', // ele节点
          data: {
              msg: 'Hello Vue'
          }
      })
  </script>

</body>

3.数据绑定指令

v-text
- 填充纯文本相比插值表达式更加简洁
v-html 填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可以用

v-pre 填充原始信息

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

  <div id="app">
      <div v-cloak>{{msg}}</div>
      <div>{{1 + 2}}</div>
      <div v-text='msg'>
      </div>
      <div v-html='msg1'></div>
      <div v-pre>{{msg}}</div>
  </div>
  <script src="./js/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el: '#app', // ele节点
          data: {
              msg: 'Hello Vue',
              msg1: '<h1>HTML</h1>'
          }
      })
  </script>

</body>

4.数据响应式

如何理解响应式
- html5中的响应式（屏幕尺寸的变化导致样式的变化）
- 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
- 数据绑定：将数据填充到标签中

v-once  只编译一次

 显示内容之后不再具有响应式功能

  <div id="app">
      <div>{{msg}}</div>
      <div v-once>{{info}}</div>
      <!-- 应用场景 -->
      <!-- 显示的信息后续不需要再修改 可以提高性能 -->
  </div>
  <script src="./js/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el: '#app', // ele节点
          data: {
              msg: 'Hello Vue',
              info: '你好'
          }
      })
  </script>

</body>

3.3 双向数据绑定

1.什么是双向数据绑定？

用户修改表单域数据影响模型数据

2.双向数据绑定分析

v-model指令用法

>3.MVVM设计思想

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

3.4 事件绑定

1.Vue如何处理事件？

v-on指令用法

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

<input type=‘button' @click='num++'/>

2.事件函数的调用方式

直接绑定函数名称
调用函数

3.事件函数参数传递

普通参数和事件对象

   <button v-on:click='say("hi",$event)'>Say hi</button>

4.事件修饰符

.stop 阻止冒泡

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

.prevent 阻止默认行为

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

5.按键修饰符

.enter 回车键
```
  <input v-on:keyup.enter='submit'>
```
.esc 退出键

6.自定义按键修饰符

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

3.5 属性绑定

1.Vue如何动态处理属性？

v-bind指令用法
- 跳转

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

演示

<div id="app">
    <input type="text" :value="msg" v-on:input="handle">
    <input type="text" :value="msg" v-on:input="msg=$event.target.value">
    <input type="text" name="" id="" v-mode="msg">
</div>
<script src="./js/vue.js "></script>
<script type="text/javascript ">
    var vm = new Vue({
        el: '#app', // ele节点
        data: {
            msg: 'hello'
        },
        methods: {
            handle: function(event) {
                this.msg = event.target.value
            }
        }

    })
</script>

3.6 样式绑定

1.class样式处理

对象语法

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

数组语法

  <div v-bind:class="[activeClass, errorClass]"></div>

2.style样式处理

对象语法

  <div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法

  <div v-bind:style="[baseStyles, overridingStyles]"></div>

演示 class 样式处理

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

<body>

    <div id="app">
        <div :class="[activeClass,errorClass,{test:istest}]">
            测试1
        </div>
        <div :class="arrClasses">
            测试2
        </div>
        <div :class="objClasses">
            测试3
        </div>
        <div class="base" :class="objClasses">
            测试4
        </div>
        <button @click="hangdle">切换</button>
    </div>
    <script src="./js/vue.js "></script>
    <script type="text/javascript ">
        // 样式绑定相关语法细节
        // 1、对象绑定和数组绑定可以结合使用
        // 2、class绑定的值可以简化操作
        // 3、默认的class如何处理？会保留
        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                // 简写前
                activeClass: 'active',
                errorClass: 'error',
                istest: true,

                // 简写后
                arrClasses: ['active', 'error'],
                objClasses: {
                    active: true,
                    error: true,
                    test: true
                }
            },
            methods: {
                hangdle: function() {
                    this.objClasses.active = !this.objClasses.active
                    this.objClasses.error = !this.objClasses.error
                    this.objClasses.test = !this.objClasses.test
                }
            }
        })
    </script>
</body>

</html>

3.7 分支循环结构

1.分支结构

v-if
v-else
v-else-if
v-show

2.v-if与v-show的区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）

3.循环结构

v-for遍历数组

  <li v-for='item in list'>{{item}}</li>

  <li v-for='(item,index) in list'>{{item}} + '---' +{{index}} </li>

key的作用：帮助Vue区分不同的元素，从而提高性能

  <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}} </li>

4.循环结构

v-for遍历对象

  <div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

  <div v-if='value==12' v-for='(value, key, index) in object'></div>

4. Vue常用特性

4.1 常用特性概览

表单操作
自定义指令
计算属性
侦听器
过滤器
生命周期

4.2 表单操作

1.基于vue的表单操作

Input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框

2.表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格

lazy : 将input事件切换为change事件

  <body>
      <div id="app">
          <input type="text" v-model.number="age">
          <input type="text" v-model.trim="info">
          <input type="text" v-model.lazy="msg">
          <div>{{msg}}</div>
          <button @click='handle'>点击</button>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
          //   表单域修饰符
          var vm = new Vue({
              el: '#app',
              data: {
                  age: "",
                  info: "",
                  msg: ""
              },
              methods: {
                  handle: function() {
                      console.log(this.age + 13);
                      console.log(this.info.length);
                  }
              }
          });
      </script>
  </body>

4.3 自定义指令

1.为何需要自定义指令？

内置指令不满足需求

2.自定义指令的语法规则（获取元素焦点）

Vue.directive('focus' {
	inserted: function(el) { 
		// 获取元素的焦点 
		el.focus();
	}
})

3.自定义指令用

<input type="text" v-focus>

4.带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
	inserted: function(el, binding) {
		el.style.backgroundColor = binding.value.color;
	}
})

5.指令的用法

<input type="text" v-color='{color:"orange"}'>

6.局部指令

directives: {
	focus: { // 指令的定义 
		inserted: function (el) {
			el.focus()
		}
	}
}

4.4 计算属性

1.为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2.计算属性的用法

computed: {
	reversedMessage: function () {
		return this.msg.split('').reverse().join('')
	}
}

演示

<body>

    <div id="app">
        <!-- 复杂 -->
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        // 计算属性

        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                msg: "Nihao"
            },
            methods: {
                handle: function(event) {}
            },
            computed: {
                reverseString: function() {
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

3.计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的
方法不存在缓存

5.5 侦听器

1.侦听器的应用场景

数据变化时执行异步或开销较大的操作

2.侦听器的用法

watch: {
	firstName: function(val){ 
		// val表示变化之后的值 
		this.fullName = val + this.lastName;
	},
	lastName: function(val) {
		this.fullName = this.firstName + val;
	}
}

5.6 过滤器

1.过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

2.自定义过滤器

Vue.filter(‘过滤器名称’, function(value){
	 // 过滤器业务逻辑 
})

3.过滤器的使用

<div>{{msg | upper}}</div> 
<div>{{msg | upper | lower}}</div> 
<div v-bind:id=“id | formatId"></div>

4.局部过滤器

filters:{
	capitalize: function(){}
}

5.带参数的过滤器

Vue.filter(‘format’, function(value, arg1){ 
	// value就是过滤器传递过来的参数
 })

6.过滤器的使用

<div>{{date | format('yyyy-MM-dd')}}</div>

5.7 生命周期

1.主要阶段

挂载（初始化相关属性）
- beforeCreate
- created
- beforeMount
- mounted
更新（元素或组件的变更操作）
- beforeUpdate
- updated
销毁（销毁相关属性）
- beforeDestroy
- destroyed

2.Vue实例的产生过程

beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
created 在实例创建完成后被立即调用。
beforeMount在挂载开始之前被调用。
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。
destroyed 实例销毁后调用。

5.8 vue数组方法

1.变异方法(修改原有数据)

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2.替换数组(生成新的数组)

filter()
concat()
slice()

3.修改响应式数据

Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
- 参数一表示要处理的数组名称
- 参数二表示要处理的数组的索引
- 参数三表示要处理的数组的值

posted @ 2020-07-09 10:19 xujing123 阅读(141) 评论(0) 编辑收藏举报

刷新页面返回顶部

xujing123

很多文章我都更新在语雀了 https://www.yuque.com/changan-zrbx2

01 Vue基础

1. vue 概述#

2. vue基本使用

2.1 传统开发模式对比

2.2 Vue.js之HelloWorld基本步骤

2.3 Vue.js之HelloWorld细节分析

3. Vue模板语法

3.1 模板语法概述

3.2 指令

3.3 双向数据绑定

3.4 事件绑定

3.5 属性绑定

3.6 样式绑定

3.7 分支循环结构

4. Vue常用特性

4.1 常用特性概览

4.2 表单操作

4.3 自定义指令

4.4 计算属性

5.5 侦听器

5.6 过滤器

5.7 生命周期

5.8 vue数组方法

公告