0
点赞
收藏
分享

微信扫一扫

Vue学习-01

伊人幽梦 2022-03-11 阅读 31

Vue基本概念

  • vue是一个JavaScript渐进式框架
  • mvvm设计模式 m - model v - DOM vm - vue DOM监听和Data监听
  • 模型,视图,视图模型双向关联的一种设计模式 减少DOM操作提高开发效率

@vue/cli脚手架

  • @vue/cl时vue官方提供的一个全局模块包(得到vue命令),此包用于创建脚手架项目
  • 脚手架是为了保证各施工过程顺利进行而搭建的工作平台

脚手架好处

  • 开箱即用
  • 0配置webpack

脚手架安装

  1. yarn global add @vue/cli 或者 npm install @vue/cli -g
  2. 查看是否成功 vue -V
命令不生效处理方式

创建项目

  1. 创建项目命令 vue create 项目名
  2. cd 进入项目下 启动内置的webpack 本地热更新开发服务器 – 浏览项目页面 cd vuecli-demo 启动服务 yarn serve
  3. 访问项目 http://localhost:8080/

脚手架中文件

在这里插入图片描述

— main.js和App.vue,以及index.html作用和关系

在这里插入图片描述

脚手架服务修改默认端口 vue.config.js

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 3000,
        open: true, // 浏览器自动打开
    }
})

eslint代码检查工具,违反规定就报错

暂时关掉eslint的配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 3000,
        open: true, // 浏览器自动打开
    },
    lintOnSave: false, // 关闭eslint 检查
})

清理脚手架默认的欢迎界面代码

在这里插入图片描述

Vue 指令

1、插值表达式

在这里插入图片描述

2、v-bind 给标签属性设置vue变量的值

在这里插入图片描述

3、v-on 给标签绑定事件

在这里插入图片描述

3.1 v-on事件对象

在这里插入图片描述

3.2 vue事件处理函数,如何拿到事件对象

在这里插入图片描述

3.3.1 v-on修饰符

在这里插入图片描述

3.3.2 键盘事件修饰符

在这里插入图片描述
更多vue事件修饰符

4、v-model 数据双向绑定

在这里插入图片描述
在这里插入图片描述

4.1 v-model 小例子

<template>
    <div>
        <div>
            <span>来自于:</span>
            <!-- 下拉菜单要绑定到select上 -->
            <select name="" id="" v-model="form">
                <option value="北京">北京</option>
                <option value="南京">南京</option>
                <option value="天津">天津</option>
            </select>
        </div>
        <div>
            <!-- 
            重要
            遇到复选框 v-model 的变量值
            非数组 - 关联的是复选框的checked 属性
            数组 - 关联的是复选框的vaule值
           -->
            <span>爱好:</span>
            <!-- 下拉菜单要绑定到select上 -->
            <input type="checkbox" v-model="happy" value="抽烟" />
            抽烟
            <input type="checkbox" v-model="happy" value="喝酒" />
            喝酒
            <input type="checkbox" v-model="happy" value="撸代码" />
            撸代码
        </div>
        <div>
            <span>性别:</span>
            <input type="radio" value="" name="sex" v-model="gender" /><input type="radio" value="" name="sex" v-model="gender" /></div>
        <div>
            <span>自我介绍:</span>
            <textarea name="" id="" cols="30" rows="10" v-model="intro"></textarea>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: '',
            happy: [],
            gender: '女',
            intro: '',
        };
    },
};
</script>

<style></style>

在这里插入图片描述

4.2 v-model 修饰符

在这里插入图片描述
在这里插入图片描述

5、v-text 和 v-html

在这里插入图片描述
在这里插入图片描述

6、v-show 和 v-if

在这里插入图片描述

7、v-for

在这里插入图片描述
在这里插入图片描述

举报

相关推荐

0 条评论