vue简单命令

清空vue欢迎页，删除assets下的图片和components下的文件, App.vue初始代码。

在App.vue里写vue，直接出现页面基础结构。

在style标签上添加scoped属性，表示它的样式作用于当下的模块，实现了样式私有化。

vue基础-MVVM设计模式

model：数据。  DOM：页面元素。 ViewModel:Vue。 前两者通过vue达到数据的交流。

目标：转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

插值表达式{{表达式}}

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1>{{ obj.name }}</h1>
    <h1>你好{{ obj.year }}</h1>
  </div>
</template>

<script>
export default {
  // 固定格式，key相当于变量
  data() {
    return {
      msg: "hello world",
      obj: {
        name: "maomao",
        year: 2022,
      },
    };
  },
};
</script>

<style>
</style>

给标签属性设置Vue变量的值

v-bind语法和简写，在dom元素中写。

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

 

给标签绑定事件

v-on:事件名=“要执行的少量代码/函数名"

v-on:事件名=“methods中的函数名(实参)"

简写:@事件名=“methods中的函数”

 

Vue事件处理函数中, 拿到事件对象

  无传参, 通过形参直接接收

  传参, 通过 $event 指代事件对象传给事件处理函数

<a @click="one" href="http://www.baidu.com">baidu</a>
<a @click="two(10, $event)" href="http://www.baidu.com"> baidu</a>

//method中代码，阻止默认行为
one(e) {
      e.preventDefault();
    },
    two(num, e) {
      e.preventDefault();
    },

v-on修饰符

@事件名.修饰符="methods里函数"

  修饰符列表

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

<div @click="fatherFn">
      <button @click.stop="btn">阻止冒泡</button>
      <a href="http://www.baidu.com" @click.prevent="btn">阻止默认行为</a>
      <button @click.once="btn">只执行一次，其余只冒泡</button>
    </div>

 

v-on按键修饰符

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

 

v-model

value属性和Vue数据变量, 双向绑定到一起

语法: v-model="Vue数据变量"

双向数据绑定

变量变化 -> 视图自动同步

视图变化 -> 变量自动同步

 v-model的原理：

@input事件在输入内容时触发，可以通过$event.target.value实时拿到输入框的内容，再把拿到的内容赋值给value，就可以实现数据视图的双向绑定。

<input :value="text" @input="text=$event.target.value">

表单中的v-model

下拉菜单v-model写在select, value在option上

v-model用在复选框时，是 非数组 – 关联的是checked属性

v-model的vue变量，是 数组 – 关联的是value属性

vue变量初始值会影响表单的默认状态, 因为双向数据绑定-互相影响

v-model的其他用法

 v-model.修饰符="Vue数据变量"

  .number 以parseFloat转成数字类型

  .trim 去除首尾空白字符

  .lazy 在change时触发而非inupt时

v-text 和v-html

两者都是把内容渲染到页面上，都会覆盖标签原有内容。

v-text不识别标签，v-html识别标签

v-show和v-if​​​

里面填上布尔值，可以达到显示(true)与隐藏(false).

v-show是元素的显示与隐藏，类似display：none.

v-if是元素的添加删除。可以写判断条件，配合v-else使用。