Vue基础

基本使用步骤

1.引入vue.js文件

2.使用vue语法 生成实例对象 参数为对象类型 

参数:el   元素的挂载位置  (值可以是CSS选择器或者DOM元素)

data   模型数据 （值为一个对象）

methods 方法    （值为一个对象）

directive  局部指令

computed 计算

watch  侦听器

filters   过滤器

components 局部组件

过滤器

3.使用插值表达式将数据添加到标签中   {{ }}

 

插值表达式 用法

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

2.插值表达式支持基本的计算操作

 

指令

v-cloak   防止插值表达式 出现闪动

 

v-text     填充纯文本        

用法：v-text ='data传的值'  无闪动问题

 

v-html    填充HTML片段  

用法：v-html='data传的值'

1.存在安全问题

2.内部数据可以使用 来自第三方数据不可以使用

 

v-pre     填充原始信息      

1.显示原始信息 跳过编程过程(分析编程过程)

 

v-once  只编译一次数据（即无法做到响应式）

应用场景 显示的信息后续不需要修改，可以使用  可以提高性能

 

v-model 双向数据绑定

用法：v-model='data传的值' 

应用场景 表单输入域中

 

事件绑定   v-on:事件名=""

简写          @事件名=‘’

 

属性绑定   v-bind.属性=""

简写          :属性=""

 

Class样式绑定  

语法1：v-bind.类名=" {类名:is类名} "    对象绑定

is类名 为data数据 值为true或false

语法2： v-bind.类名=" [ data声明类名,data声明类名]"    数组绑定

data声明类名  ：样式类名

总结：

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

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

声明数组类名在data中，后直接调用类名

声明对象类名在data中，后直接调用类名

3.默认的类名会保留

 

style样式处理

对象写法  v-bind.style=" {样式：data数据} "  可以简化

数组写法  v-bind.style=" [样式名，样式名] "  可以简化   //有的样式会覆盖

 

事件修饰符

.stop        阻止冒泡

.prevent   阻止默认行为

按键修饰符  keyup

.enter 回车键

.delete 删除键

自定义按键修饰符

Vue.config.keyCodes.自定义名称 = keyCode对应的值

keyup.名称 调用即可

 

函数调用

1.直接绑定函数名称    //默认传递事件对象

2.调用函数  函数名（参数,$event）  //可以传递参数    $event 事件对象并且作为最后一个传递

 

分支循环结构

v-if      语法： v-if ='判断条件'       控制元素是否渲染到页面

v-else

v-else-if

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

v-for   遍历数组        可结合v-if

语法：v-for="item in 数组名(data传)"   item指当前项 通过插值添加数据

语法：v-for="（item，index) in 数组名(data传)"   item指当前项 index索引号

语法：:key=' '       key的作用:帮助Vue区分不同的元素  从而提高性能

数据复杂可通过 item.属性名显示

v-for   遍历对象  可结合v-if

语法：v-for="(v,k,i) in 对象名"     v 对象的值   key 键  i 值