一. Vue概述

1. 什么是Vue？

• Vue是一套用于构建用户界面的渐进式框架
• vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

2. Vue：渐进式JavaScript框架

其中框架指的是提供一些基础性的服务
库指的是以提供API为主
渐进式： 声明式渲染-> 组件系统->客户端路由->集中式状态管理->项目构建
官网

Vue的优点

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

二. Vue的基本使用

1. 使用Vue将helloworld 渲染到页面上

 <!-- Vue代码运行原理分析：
    概述编译过程的概念（vue语法->原生语法） -->


    <div id="app">
        <!-- {{}}为插值表达式-->
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{msg + ‘----‘ + 133}}</div>

    </div>

    <script src="js/vue.js"></script>
    <script>
        // Vue的基本使用步骤
        // 1. 需要提供标签用于填充数据
        // 2. 引入vue.js库文件
        // 3. 可以使用vue的语法做功能了
        // 4. 把vue提供的数据填充到标签里面
        var num = new Vue({
            el: ‘#app‘,
            data: {
                msg: ‘hello Vue‘
            }
        })
    </script>

1. 实例参数分析

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

2. 插值表达式用法

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

3. Vue代码运行原理分析

• 概述编译·过程的概念（Vue语法->原生语法）
  

三. Vue模板语法

3.1 模板语法概述

1. 如何理解前端渲染？

把数据填充到HTML标签中

2. 前端渲染方式

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

3. 原生js凭借字符串

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

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

4. 使用前端模板引擎

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

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

5. 模板语法概览

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

3.2 指令

1. 什么是指令？

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

2. v-cloak指令用法

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

官网

3. 数据绑定指令

• v-text 填充纯文本
  ① 相比插值表达式更加简洁
• v-html 填充HTML片段
  ① 存在安全问题
  ② 本网站内部数据可以使用，来自第三方的数据不可以使用
• v-pre 填充原始信息
  ① 显示原始信息，跳过编译过程（分析编译过程）

4. 数据响应式

• 如何理解响应式
  ① html5的响应式（屏幕尺寸的变化导致样式的变化）
  ② 数据的响应式（数据的变化导致页面内容的变化）
• 什么式数据绑定
  ① 数据绑定： 将数据填充到标签中
• v-once 只编译一次
  ① 显示内容之后不再具有响应式功能

3.3 双向数据绑定指令

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

2. 双向数据绑定分析

• v-mode 指令用法
  <input type=‘text‘ v-model=‘uname‘/>

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. 事件函数的调用方式

• 直接绑定函数名称
  <button v-on:click="say">Hello</button>

• 调用函数
  <button v-on:click="say()">Say hi</button>

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.prevemt="handle">跳转</a>

5. 按键修饰符

• .enter 回车键
  <input v-on:keyup.enter="submit">
• .esc 退出键
  <input v-on:keyup.delete="handle">

6. 自定义按键修饰符

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

3.5 属性绑定

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

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

Vue

原文：https://www.cnblogs.com/counter/p/14753361.html