vue 笔记

Vue即渐进式js框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

Vue的基本使用步骤：

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

  2.引入vue.js库文件

  3.使用vue的语法功能

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

vue分析：

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

  插值表达式用法{{}}：将数据填充到HTML标签中 同时支持基本的计算操作

  vue运行原理：vue语法→原生语法

Vue模板语法：

  前端渲染：将数据填充到HTML标签中

     方式：原生js拼接字符串（维护困难） 使用前端模板引擎（方便维护，但没有专门提供事件机制），使用vue特有的模板语法

  指令即自定义属性 格式：以v-开始

     v-cloak 指令用法 ：解决插值表达式闪动的问题。 先隐藏，替换好值之后再显示最终的值

     数据绑定指令：v-text填充纯文本（比插值表达式简洁）

                   v-html填充HTML片段（存在安全问题，内部可以使用，第三方不可用）

                   v-pre填充原始信息（显示原始信息，跳过编译过程）

     数据响应式：1.html5中的响应式（屏幕尺寸的变化导致样式的变化）

                 2.数据响应式（数据的变化导致页面内容的变化）

                 3.数据绑定：将数据填充到标签中

                     v-once：只编译一次

                     双向数据绑定（页面内容，数据。插值表达式）MVVM设计思想

                 4.事件绑定

                   1. 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>

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

                    1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

                    2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

                   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'> .delete删除键<input v-on:keyup.delete='handle'>

                   6.自定义案件修饰符 全局config.keyCodes对象 Vue.config.keyCodes.f1=112

属性绑定

  1.v-bind <a v-bind:href='url'>跳转</a> 缩写形式< a :herf=‘url’>跳转</a>

  2.v-model的低层实现原理分析,<input v-bind:value="msg" v-on:input="msg=$event.tsrget.value'>

样式绑定：class样式处理

  1.对象语法：<div v-bind:class ="{active：isActive}"> </div>

  2.数组语法：<div v-bind:class ="{activeClass, errorClass"> </div>

  语法细节：

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

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