VUE家族系列：

• Vue快速上门(1)-基础知识
• Vue快速上门(2)-模板语法
• Vue快速上门(3)-组件与复用

01、模板语法

1.1、template模板

是H5新增的模板元素，是一个用于HTML模板内容的包装元素，主要使用其内部的内容。在普通的HTML页面中，模板会出现在Dom树中，但不会渲染，里面的请求、脚本也不会执行。是Vue里主要的模板定义方式，除此以外，常用的定义Vue.template方式：

📢Vue的template选项值：

• HTML语法：模板内容就是普通的HTML语法，Vue新增了一些绑定数据的指令。
• 根元素：内部都必须有一个根元素，本身是没啥用的，主要用的是其内部InnerHTML。
• #值：如果值以 # 开始，则它将被用作id选择符，并使用匹配元素的 innerHTML 作为模板。
• 优先于el：根据上文中Vue生命周期流程可知，template内容会优先于el.outerHTML内容，编译为渲染render。

    
app
    
    
        内联模板，替代原有内容
    

1.2、文本插值

Vue的模板语法基于HTML的语法，可以在模板中申明式的绑定实例数据、事件方法。在Vue中，模板被编译成虚拟Dom渲染函数，先在虚拟Dom上进行操作，这样可以最优化Dom及操作次数，然后再渲染到正式的Dom中。常用的一种数据绑定方式为—— 文本插值。

💠文本插值：{{ data }}，“Mustache”语法 (双大括号) （/ˈmʌstæʃ; məˈstɑːʃ/ 胡子），内容不支持html标签、不支持绑定。

📢注意：安全第一，不要用输入的内容来插值，容易导致XSS攻击。

    
div1:{{html}}
        {{mes}}
        {{birthday}}
    
    
div2:
    
div3:

1.3、JavaScript表达式

在{{文本插值}}、v-bind绑定、v-on事件绑定等指令中都支持完全的JavaScript的表达式，只能是单个表达式语句，不支持复杂语句、循环控制。

    

        
{{mes.split(' ').join('---')}}
        age:{{(new Date().getFullYear() - new Date(birthday).getFullYear())}}
        age:{{((new Date() - new Date(birthday))/3600/24/365/1000).toFixed(1)}}
    

02、模板指令

2.1、指令大全🔖

指令格式：指令:参数.修饰符 = "值"

Vue指令/ 简写	描述	示例
v-text=	绑定 textContent，同{{文本插值}}（如JS延迟，有闪烁）	> = {{msg}}>
v-html=	绑定 innerHTML，内容支持html标签（不支持绑定），需注意安全性。其他插值指令的值都不支持HTML标签，会被转义。
v-bind: = / :=	绑定元素属性值，动态地绑定一个或多个 attribute，或组件prop
v-model=	表单元素的值双向绑定，不支持表达式
v-show=	值为真元素显示（切换 display），适用于频繁切换显示。	方案1
v-if=	值为真才渲染，否则不会创建或销毁已有元素，支持
v-else-if=	v-if 的else if块，可连续使用，跟在v-if/v-else-if后面
v-else	v-if 或者 v-else-if 添加的“else 块”，无参数
v-for=	列表渲染，item in/of expression，支持index索引、对象	{{item}}
v-on: = / @=	绑定事件，参数为事件名；值为方法名，或内联语句func($event)
:key=	元素唯一key值，配合v-for使用，避免重复key更新异常，用于虚拟Dom中判断新旧元素。或用于强制元素替换而不复用	ul v-for="item in list" :key="item.id"> {{text}} //每次都是新元素
v-once	只更新元素/组件一次，后续更新都视为静态内容，不再更新
v-pre	不编译，跳过这个元素和它的子元素的编译过程，显示原生的内容
is	动态的绑定一个组件，值为组件名称/Vue选项对象
v-slot:= / #:=	具名插槽，有名分的插槽。指定插槽名称，或绑定插槽ViewModel	v-slot:header v-solt="{user}"
ref	给子组件、Dom元素注册引用名，通过$refs访问这些被ref标记的对象	组件上的ref指向其组件Vue实例
v-cloak	解决{{文本插值}}会闪烁的问题，锁定[v-cloak]样式直到编译完后清除	[v-cloak]{ display: none;}

2.2、[动态参数]

2.6.0新增的[动态参数]，指令的参数可以使用[动态参数]=一个JavaScript表达式。

方案1

• 字符串值：这里的动态参数预期结果为一个字符串，异常则为null，null也可用于显示的移除绑定。
• 不要出现引号，包括空格、引号、、>、 /、=，HTML的属性中是非法的。
• 参数名用小写，不要用大写，浏览器会强制转换HTML属性为小写。如方案1 包含大写的属性参数会找不到对应值。

2.3、v-for 列表渲染

用循环创建多个元素/组件，循环对象可以是数组、对象、常量，也可以是计算属性、方法、表达式。循环表达式中可以用in，也可用of（没有区别）。如果循环创建多个元素没有根元素，则可用一个模板来包裹，这时就不需要key了。

• 列表循环：v-for="item in items"
• 列表循环-带索引参数：v-for="(item,index) in items"
• 对象循环-value：v-for="value in user"，Vue是按照Object.keys(obj) 的结果遍历。
• 对象循环-带参数：v-for="(value,name,index) in user"

    {{ n }} 
    

        
{{item.name}} ； 
        
{{index+1}}：{{item.name}} ； 

        
{{value}} ； 
        
{{index+1}}）{{name}}:{{value}} ； 
    
    

🔸列表更新策略(:key)：Vue默认列表项原地更新，不管数据的顺序。

如果希望更新时保持数据、元素的顺序，及更新的准确性、高性能，则需要给元素设置一个唯一身份标识 key：v-bind:key="kid" :key="kid"，值应为字符、数字。

Vue默认是最大限度复用元素，虚拟Dom中用key来判断新旧元素，重复key可能会导致更新异常，也可用于强制元素替换而不复用。一般推荐尽量提供key，他是Vue识别节点的通用机制（diff中的元素比较）。在列表动画中，key是必须的。

📢 注意：

• v-for循环中的参数的顺序须一致，别名不重要。
• v-for优先级高于v-if，共用时需注意，可用来过滤不符合条件的项。

2.4、class样式绑定

class、style为HTML原本的attribute，通过v-bind绑定，增强：

• 对象绑定，语法：{classA:bindbool, classB:bindbool}，绑定值bindbool为真则样式classA有效，方便基于判断绑定多个class。除了直接对象表达式，还可以是绑定的对象、计算属性返回的对象、普通表达式。
• 数组绑定，绑定多个样式，数组中可以是绑定值、表达式、常量样式名。
• 支持和原生class共存，会合并class值。包括组件也是如此，和组件的根元素class合并。

🌰一个tab切换示例：

    

        
{{item.title}}
    
    

        
{{item.content}}

        
{{item.content}}
    

2.5、style内联样式绑定

对于Style的绑定，Vue直接把style对象化了，通过对象化表达式，或者直接一个对象绑定（更清晰）。

• 对象数组：支持多个对象的数组，合并对象中的style样式规则。
• 支持一定的兼容性前缀，如transition，Vue会自动检测浏览器并添加兼容性前缀。
• 对象属性多重值，提供多个值的数组display:['-ms-flexbox','flex']，Vue只会渲染数组中最后一个被浏览器支持的值。

    


        
 p1 - Content 
        
 p2 - Content 
  
    

2.6、v-on/@事件.修饰符

事件绑定格式：v-on:/@ 事件名.修饰符 = ""，@为v-on:的缩写形式。事件名支持动态 [参数] 绑定。Vue的事件都是直接绑定到元素的，没有用事件委托。

事件参数：方法默认支持事件参数对象Event，内联JavaScript代码通过$event访问事件对象。

    button
    
{{n}}

    

🔸修饰符 可以加强事件的能力，使用上可以串联（注意顺序），也可以只有修饰符。

2.7、v-model表单绑定

使用v-model在表单元素、 及 上创建双向绑定，会忽略他们本身的值属性（value、checked、selected），所以注意设置默认值。分组的单选、多选元素组按照name进行分组即可，一组的绑定也是一样的。

基本原理就是监听表单的输入事件，实现视图到数据的同步：

• text 和 textarea 元素使用 value property 和 input事件。
• checkbox 和 radio 使用 checked property 和 change 事件。name用于分组命名空间，value作为选中的值。
• select 字段将 value 作为 prop 并将 change 作为事件。

🔸v-model 修饰符：

• .lazy：change 事件同步数据，主要针对text类表单元素，失去焦点时才会触发change事件。
• .number：强制转换值为数值类型，需配合type="number"使用，如果无法 parseFloat() 解析则返回原始值。
• .trim：去掉首尾空格，比较实用！

    

        姓名：
        姓名：{{age}}
    
    

        性别：
        
        结果：{{sex}}
    
    

        技能：
        {{item}}
        结果：{{skill}}
    
    

        性别-选择框：
        
            请选择
            {{value}}
        
        结果：{{sex}}
    
    

        技能-选择框：
        
            请选择
            {{item}}
        
        结果：{{skill.join()}}
    

2.8、关于数据丢失

基于Vue对数据监听的机制，Vue 不能检测数组和对象的变化。因此有些场景数据无法实现变更监听，就无法同步视图了，造成“数据丢失”的现象。

• 数组通过索引修改、新增的值无法监听。
• 未初始化的新成员，添加的对象新成员，没有被初始化时监听，app1.user.新属性=20。
• 被冻结的对象无法监听：Object.freeze(obj)。
• v-model 绑定的未定义属性不丢失！因为他是用的$set去更新的，注意不能是data的一级属性。

🟢解决办法：

• 数组整体赋值：新数组赋值，或者用数组方法修改数据，如push方法是被Vue代理实现了拦截的。
• 在Vue初始化时先申明属性。
• vm.$set.(obj)强制更新，会先添加响应，然后再更新视图。不建议动态添加data的一级属性！在选项中预先申明。好像是一些边界方面的技术原因。

    p1：
        {{n}}，

    p2：
        name：{{user.name}}，
        age：{{user.age}}

03、Vue动画

Vue提供了两个内置元素，和，用来包装单个元素、列表元素，辅助实现在元素显示隐藏、创建删除、移动过程中的过渡动画效果。更高级、更复杂的动画可以借助第三方动画组件来实现。

• Css动画库 Animate.css，
• Js动画库 anime.js （github star最高），Velocity.js，GreenSock

3.1、transition过渡动画

Vue提供了一个封装组件，用来包装需要动画的单个内容。Vue主要提供了一个比较基础的动画机制，帮你处理过渡的事件、动画类调用。所以还是需要你自己来写动画的CSS类，或者动画JS代码。

• 三种类型的过渡：元素初始渲染过渡、元素进入过渡（显示）、元素离开过渡（隐藏/删除）。
• 包裹单元素：只能包裹一个跟元素（包括v-if、v-show切换），动画应用在这个跟元素上，不会产生额外Dom元素。
• 过河拆桥--事后清理：动画完成后，CSS动画资源会被清除，Vue会自动监听transitionend，或animationend事件。
• 过渡CSS类名规范：如下表格，按照CSS类名写样式，Vue自动调用。v为动画组件的name值，没有则默认v。
• CSS过渡类attribute：作用同上，值是Class样式类名，优先级更高。CSS值可以自定义，也可以很方便的调用第三方CSS动画库。

🌰过渡动画示例：CodePen

    

        消失
        
            
秦时明月汉时关，万里长征人未还！
        

        
            
秦时明月汉时关，赶快下楼做核酸！
        
    

transition动画元素的属性、钩子事件：

3.2、transition-group列表过渡动画

列表的过渡是针对多个元素，需要 transition-group组件，支持的过渡类、特性和事件和类似，多了tag、移动过渡。不过过渡针对的不是一个根元素，而是内部的每一个一级元素。会产生一个元素，可通过tag修改渲染的元素，比如用来代替

不错。

如果只是用进入、离开过渡，会导致其他元素的位置变化比较生硬。使用移动过渡v-move/move-class，在元素改变定位的时候使用。Vue 使用了一个 FLIP 的动画队列，使用transforms将元素位置平滑移动。

📢v-for 时需设置key：v-for创建列表元素时，强烈建议设置列表项的key值，列表动画中这是强制要求了！

代码示例：CodePen

app15: 动画

    
列表动画：随机乱序

    

        
            
{{s}}
                - 
                +
            
        
    

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀