Vue基础第一天

微风抚少年
109 阅读5分钟

Vue基础第一天

为什么要学习vue

1.开发更快速、更高效

2.企业开发都在用

3.前端工程师都在用，高薪

Vue是什么

渐进式的JavaScript框架

渐进式：逐渐进步，想用什么就用什么，不必全都使用

库：封装的属性或方法(例axios)

框架：拥有自己的规则和元素，比库强大的多(例bootstrap、Vue)

1652789011295

@vue/cli脚手架

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令)，此包用于创建脚手架项目

辅助我们进行项目开发的一个工具

好处

开箱即用、0配置webpack、babel支持、css，less支持、开发服务器支持

安装

全局安装@vue/cli模块包

npm install -g @vue/cli

查看是否成功

img

创建项目

注意：项目名不能有大写字母，中文和特殊符号

vue create vuecli-demo(这是项目名称)

选择模板和包管理器，等待脚手架项目创建完毕

1652789607338

cd进入到项目下，启动内置的webpack本地热更新开发服务器-浏览项目页面

917f05a56e26466a8da45106f8ae5261d1ef45c6-1652789704677.png

1652789726522

如果未自动弹出浏览器，手动打开输入提示的域名+端口浏览项目页面

img

各个文件的作用

img

img

脚手架运行的流程

src/main.js->src/App.vue->public/index.html

img

自定义配置

项目中没有webpack.config.js文件，因为vue脚手架项目用的vue.config.js文件

修改端口并自动打开浏览器

img

enlist代码检查

img

单文件

后缀名为.vue的文件

结构

  1. template:存放HTML
  2. script:存放JavaScript
  3. style:存放样式

img

好处

  1. JavaScript作用域独立，不同文件的js变量名不会冲突
  2. 样式配合scoped属性，可以只对当前文件生效，如果不使用scoped属性，样式会编程全局样式，会有冲突的可能
  3. template有一个使用限制----template下面只能有一个根标签

Vue指令

插值表达式（声明式渲染/文本插值）

在dom标签中，直接插入vue数据变量(可以动态显示dom中的内容)

语法：{{表达式}}

1652791170305

msg和obj是vue数据变量

要在js函数中的data函数的返回值里声明

注意：大括号里不能使用语句

MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

mvvm视图和模型的双向绑定

1652791547152

好处：减少DOM操作，提高开发效率

v-bind

给标签设置vue变量的值

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

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

img

v-on

给标签绑定事件

拿到事件对象

给标签绑定事件

语法：

  1. v-on:事件名="少量要执行的代码"
  2. v-on:事件名="methods中的函数名"
  3. v-on:事件名="methods中的函数名(实参)"

方法在methods选项定义

1652792057581

简写：@事件名="methods中的函数"

img

拿到事件对象

语法：

  1. 无传参，通过形参直接接收
  2. 传参，通过$event指代事件对象传给事件处理函数

img

img

修饰符

语法：@事件名.修饰符="methods里的函数"

修饰符列表

  1. .stop --阻止事件冒泡
  2. .prevent --阻止默认行为
  3. .once --程序运行期间，只触发一次事件处理函数

img

按键修饰符

语法：

  1. @keydown.enter ---检测回车按键
  2. @keydown.esc ---检测返回按键

img

更多修饰符

cn.vuejs.org/v2/guide/ev…

v-model

value属性和vue数据变量，双向绑定到一起

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

双向数据绑定

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

暂时只能用在表单元素上

img

注意：

  1. 下拉菜单v-model写在option上
  2. 在复选框时，v-model的vue变量是
    1. 非数组--->关联的是checked属性 ---常用于：单个绑定使用
    2. 数组--->关联的是value属性 ---常用于：收集勾选了那些值
  3. vue变量初始值会影响表单的默认状态

修饰符

让v-model拥有更强大的功能

语法：v-model.修饰符="数据变量"

  • .number ----以parseFloat转成数字类型
  • .trim ----去除首尾空白符
  • .lazy ----在change时触发而不是在input时(input失去焦点时才更新变量)

img

v-for

渲染列表，所在标签结构，按照数据数量，循环生成

语法：

  • v-for="值变量 in 目标结构"
  • v-for="(值变量，索引变量) in 目标结构"

目标结构可以是：

  • 数组
  • 对象
  • 数字---->从1遍历到当前数字
  • 对象
  • 字符串---->遍历每个字符

注意：

v-for的临时变量名不能用到v-for范围外

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

v-text和v-html

更新DOM对象的innerText/innerHTML

语法：

  • v-text="vue数据变量" ----->把内容直接当作问本显示
  • v-html="vue数据变量" ----->把内容当作html解析

注意：会覆盖插值表达式

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

v-show和v-if

控制目标的隐藏或出现

语法：

  • v-show="vue变量"
  • v-if="vue变量"

原理：

  • v-show用的是display:none隐藏(频繁切换使用)
  • v-if直接从DOM树上移除

高级：

v-if配合v-else的使用

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>
avatar
文章
阅读
粉丝