Vue基础内容--01笔记

Vue基础内容–01

Vue的基本使用步骤
1.需要提供标签用于填充数据
2.引入vue.js库文件
3.可以使用vue语法做功能
4.把vue提供的数据填充到标签里面
vue实例参数
el:元素的挂载位置(值可以是css选择器或者DOM元素),把数据关联到某个标签里
data：模型数据(值是一个对象)作用：访问响应式数据
methods:存放Vue实例的方法函数
插值表达式:
将该数据填充到HTML标签中{{}}
插值表达式支持基本的计算操作

Vue模板语法概览
插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

指令 本质=>就是自定义属性
指令格式：以v-开头

指令1 ===> v-cloak (译:掩盖)
功能：解决刷新插值表达式闪动问题 原理:先隐藏替换数据再次显示
使用方法：
1.css样式中添加display-none ([v-cloak] 属性选择器)
[v-cloak]{
display:none
}
2.在插值表达式所在标签中添加v-cloak指令

指令2 ===> v-text
功能 为元素添加内容
使用方法：
<div v-text='msg'></div> 同等 <div>{{msg}}</div>
特点：无闪动的问题

指令3 ===> v-html
功能：更新元素的innerHtml内容 标签会被解析
使用方法:<div v-html='msg'></div>

指令4 ===> v-pre
功能:跳过编译过程
使用方法:<div v-pre>{{msg}}</div>

数据响应式 ==>数据变化导致页面内容的变化
数据绑定 ==>将数据填充到标签中

指令5 ===> v-once
功能：显示内容之后不再具有响应式的功能

双向数据绑定 ==> 指令 v-medel=‘msg’

MVVM设计思想
m:model v:view vm:view-model

事件绑定
指令6 ==> v-on:事件名称 或者 @事件名称

 methods:{
        handle:function(){
            执行的内容
        }
    }

事件函数的调用方式
直接绑定函数名称

<button v-on:click='handle'></button>

默认会传递事件对象作为事件函数的第一个参数


调用函数
<button v-on:click='handle()'></button>   可以传参

事件对象必须作为最后一个参数显示传递，事件对象的名称必须是$event

事件修饰符

1. .stop阻止冒泡
   <a v-on:click.stop='handle'></a>
2. .prevent阻止默认行为
   <a v-on:click.prevent='handle'></a>
3. .self 只有自身触发才处理，冒泡触发不执行
   <a v-on:click.self='handle'></a>
4. .once 让事件只触发一次

按键修饰符
<input v-on:keyup.enter='函数名称'>
<input v-on:keyup.delete='函数名称'>
自定义按键修饰符
全局config.keyCodes对象
Vue.config.keyCodes.自定义名称 = event.keyCode的值

指令7 ==> 属性绑定 v-bind:属性 (译：捆绑)
作用：为标签的属性绑定响应式数据
<a v-bind:herf='url'></a>
简写： :herf=‘url’

clss样式处理
语法1：对象形式

<div v-bind:class='{类名:boolean类型的属性,类名:boolean类型的属性,}'>
        data:{
            属性:true
            属性2:true
        }

语法2: 数组形式

      <div v-bind:class='[data对象属性,data对象属2]'>
        data:{
            属性：类名
            属性1：类名
        }

指令8 ==> v-if
表达式为true的时候，创建并插入DOM false:销毁DOM
使用场景：页面初始时，不需要显示很多元素
指令9 ==> v-show
总是创建DOM，通过设置display来显示隐藏
作用：通过条件表达式动态显示隐藏元素