vue基础

目录

• 概述
• 实例化参数
• 指令

概述

vue是一款渐进式JavaScript前端框架，三大mvvm框架 vue , react ,angular

官网

cn.vuejs.org

特点

1. 简单，上手方便
2. 结合Angular指令与React组件思维
3. 生态丰富（插件多）API文档完善

实例化参数

<div id="#app">
  {{msg}}
</div>

new Vue({ el:"#app", data:{ //指定数据 msg:1, }, methods:{ // 方法集合 }, computed:{ // 计算 }, watch:{ //监听 "num":{ handler(nval,oval){ }, deep:true } }, directives:{ } })

指令

文本渲染

{{}}
v-text
v-html(渲染html文本)

属性绑定

v-bind:属性="指令的值"
<p v-bind:title="title">{{msg}}</p>
缩写：:属性="值"

条件渲染

条件指令 v-if

指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 真 值的时候被渲染。

v-show指令

用于根据条件展示元素的选项是v-show指令
<h1 v-show="isShow">Hello!</h1>

v-show和v-if的区别

v-if隐藏时直接移除节点，v-show是通过css方式隐藏
频繁切换用v-show，一次性切换用v-if

列表渲染

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in list 形式的特殊语法，list是源数据数组

基本用法

事件指令

事件处理方法

v-on:事件类型="响应函数"
简写：@click="say()"
行内事件响应：@click="num++"

时间修饰符

.stop 阻止事件冒泡
.prevent 阻止默认事件
.once 只执行一次

按键修饰符

.up
.down
.left
.right
.delete
.enter
.space
.esc
.tab

表单绑定

v-model 让表单的值与数据绑定在一起。他会根据空间类型自动选取正确的方法来更新元素
多选
{{checked}}

修饰符
.number 数字
.trim 移除两端空白