本文共 3257 字，大约阅读时间需要 10 分钟。

一、Vue概述

Vue：渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 官网：https://cn.vuejs.org/v2/guide/ 最全的学习方法是在官网哦。

二、Vue基本使用

使用是要引用vue.js文件

2.1 传统开发模式对比

原生js

jQuery

Vue

   
    
     {   {   msg}}
    
   
 

2.2 Vue.js之HelloWorld细节分析

1. 实例参数分析
   ⚫ el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
   ⚫ data：模型数据（值是一个对象）
2. 插值表达式用法
   ⚫ 将数据填充到HTML标签中
   ⚫ 插值表达式支持基本的计算操作
3. Vue代码运行原理分析
   ⚫ 概述编译过程的概念（Vue语法→原生语法）
   

三、Vue模板语法

3.1 模板语法概述

把数据填充到HTML标签中

2. 前端渲染方式 ⚫原生js拼接字符串 ⚫ 使用前端模板引擎 ⚫ 使用vue特有的模板语法

3.模板语法概览

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

3.2 指令

1. 什么是指令？
   ⚫ 什么是自定义属性
   ⚫ 指令的本质就是自定义属性
   ⚫ 指令的格式：以v-开始（比如：v-cloak）
2. v-cloak指令用法
   ⚫ 插值表达式存在的问题：“闪动”
   ⚫ 如何解决该问题：使用v-cloak指令
   ⚫ 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

   
    
    
     {   {   msg}}
    
  
   
    

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

   
    
    
     {   {   msg}}
    
     //Hello Vue        
    
   //
    
HTML
    
    
   //HTML（html编写后的）    
    
     {   {   msg}}
    
     //{   {msg}}  
   
    

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

3.3 双向数据绑定指令

1. 双向数据绑定分析
   ⚫ v-model指令用法
   <input type='text' v-model='uname'/>
2. MVVM设计思想
   ① M(model)
   ② V(view)
   ③ VM(View-Model)
   

   
      
    
     {   {   msg}}
    
      
    
        
           
    
    
   
        

效果图：

3.4 事件绑定

1. Vue如何处理事件？
   ⚫ v-on指令用法
   ⚫ v-on简写形式
   <input type=‘button' v-on:click='num++'/>
   <input type=‘button' @click='num++'/>
2. 事件函数的调用方式
   ⚫ 直接绑定函数名称
   ⚫ 调用函数
   <button v-on:click='say'>Hello</button>
   <button v-on:click='say()'>Say hi</button>

   
        
    
            
     点击1            
     点击2        
    
    
   
        

效果图：

3. 事件函数参数传递 ⚫ 普通参数和事件对象 <button v-on:click='say("hi",$event)'>Say hi</button>

   
        
    
            
                 
     点击1            
                 
     点击2        
    
    
   
        

效果图

4. 事件修饰符 ⚫ .stop 阻止冒泡 ⚫ .prevent 阻止默认行为 <a v-on:click.stop="handle">跳转</a> <a v-on:click.prevent="handle">跳转</a> 5. 按键修饰符 ⚫ .enter 回车键 ⚫ .esc 退出键 <input v-on:keyup.enter='submit'> <input v-on:keyup.delete='handle'>

3.5 属性绑定

1. Vue如何动态处理属性？
   ⚫ v-bind指令用法
   ⚫ 缩写形式
   <a v-bind:href='url'>跳转</a>
   <a :href='url'>跳转

   
    
    百度    
    百度1  
   
    

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>

  
   
    
    
     测试样式
    
    
    
    
    
    
    
 
   
    

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>

   
    水果列表
   
    
   
      
    
{   {   item}}
      
    
{   {   item + '---' + index}}
      
    
        {   {   item.ename}}        -----        {   {   item.cname}}      
    
   
      

4. 循环结构
   ⚫ v-for遍历对象
   ⚫ v-if和v-for结合使用
   <div v-for='(value, key, index) in object'></div>
   <div v-if='value==12' v-for='(value, key, index) in object'></div>

   
    
    
     {   {   v + '---' + k + '---' + i}}
    
  
   
    

转载地址：http://baah.baihongyu.com/