Vue 基础入门与进阶

作者:user 发布日期: 浏览量:13

简介

1、IDE简介

  • IDE(Integrated Development Environment,集成开发环境)是含代码编辑、关键字高亮、智能提示、智能纠错、格式美化等功能于一身的“高级代码编辑器”
  • Visual Studio Code 简称 VS Code,来自微软公司
  • 优点:内置功能非常丰富、插件全且安装简单、轻量、有MAC版本
  • VS Code 下载:https://code.visualstudio.com/
  • VS Code 中文配置:在插件中心搜索 Chinese,安装插件即可
  • VS Code 颜色主题:在Code->首选项->颜色主题,将主题改为:浅色 + (默认浅色)
  • VS Code 集成 Sublime 的快捷键:在插件中心搜索 Sublime,安装插件即可
  • 多行编辑:按住鼠标滚轮,然后下拉,即可进行多行编辑
  • VS Code 安装 Live Server 插件,这个插件可以让“实时热更新”网页,自动刷新网页

2、在线引用 Vue

<script src = "https://unpkg.com/vue@next"></script>

3、使用 vue-cli 创建项目

  • 创建项目
// front 是项目名
vue create front
  • 选择 “Manually select features” 手动选择功能(使用上下键控制上下,回车进入下一步)
    在这里插入图片描述
  • 使用空格键确定要选择的功能,一般项目选择如下图
    Choose Vue version:选择 Vue 版本
    Babel:使用 Babel
    Router:使用 Router
    Vuex:使用 Vuex
    CSS Pre-processors:使用 CSS 预编译
    Linter / Formatter:格式化代码
    在这里插入图片描述
  • 选择需要的版本
    在这里插入图片描述
  • 是否使用 history 模式的路由:N
    在这里插入图片描述
  • 选择使用 Sass/SCSS
    在这里插入图片描述
  • 使用 ESLint 作为标准配置
    在这里插入图片描述
  • 选择 Lint on save
    在这里插入图片描述
  • 选择 In dedicated config files
    在这里插入图片描述
  • 选择 N,不保存这个预设
    在这里插入图片描述
  • 出现下图则创建项目成功
  • 使用“ cd 项目名”进入项目目录下
  • 使用“npm run serve”启动项目
    在这里插入图片描述

一、Vue 基础语法

1、Vue 的基本结构

  • 使用 Vue.createApp({}) 去创建一个应用,存储到 app 变量中
  • 传入的参数表示,这个应用最外层的组件应该如何展示
  • 将 app对应的应用挂载(只作用)在 id = “root”的元素上
  • vm 代表的就是 vue 应用的根组件,其充当了 vm 层的角色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 使用 Vue.createApp({}) 去创建一个应用
    // 传入的参数表示,这个应用最外层的组件应该如何展示
    const app = Vue.createApp({
        data() {
            return {
                msg:"hello world!"
            }
        },
        template:`<div>{{msg}}</div>`
    });
    // 将 app对应的应用挂载(只作用)在 id = "root"的元素上
    // vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
    const vm = app.mount('#root');
</script>
</html>

2、mvvm 设计模式:

  • m ->model 数据
  • v -> view 视图
  • vm -> viewModel 视图数据连接层

3、Vue生命周期函数

  • 生命周期函数:在 某一时刻 会 自动 执行的函数
  • 在实例生成之前会自动执行的函数:beforeCreate() {},
  • 在实例生成之后会自动执行的函数:created() {},
  • 在组件内容被渲染到页面之前会自动执行的函数:beforeMount() {},
  • 在组件内容被渲染到页面之后会自动执行的函数:mounted() {},
  • 当 data 中的数据发生改变时会立即自动执行的函数:beforeUpdate (){},
  • 当 data 中的数据发生变化,同时页面重新完成更新后,会自动执行的函数:updated (){},
  • 当 Vue 实例(应用)失效时,自动执行的函数:beforeUnmount() {},
  • 当 Vue 实例(应用)失效时,且 dom 完全销毁之后,自动执行的函数:unmounted() {}
    // 使用 Vue.createApp({}) 去创建一个应用
    // 传入的参数表示,这个应用最外层的组件应该如何展示
    const app = Vue.createApp({
        data() {
            return {
                msg:"hello world!"
            }
        },

        // 生命周期函数
        // 在实例生成之前会自动执行的函数
        beforeCreate() {

        },
        // 在实例生成之后会自动执行的函数
        created() {

        },
        // 在组件内容被渲染到页面之前会自动执行的函数
        beforeMount() {

        },
        // 在组件内容被渲染到页面之后会自动执行的函数
        mounted() {

        },
        // 当 data 中的数据发生改变时会立即自动执行的函数
        beforeUpdate(){

        },
        // 当 data 中的数据发生变化,同时页面重新完成更新后,会自动执行的函数
        updated(){

        },
        // 当 Vue 实例(应用)失效时,自动执行的函数
        beforeUnmount() {

        },
        // 当 Vue 实例(应用)失效时,且 dom 完全销毁之后,自动执行的函数
        unmounted() {

        }
    });
    // 将 app对应的应用挂载(只作用)在 id = "root"的元素上
    // vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
    const vm = app.mount('#root');

4、模版语法讲解

  • v-html = “”:表示html标签按原html执行,不进行转义为字符串展示
<script>
    // 使用 Vue.createApp({}) 去创建一个应用
    // 传入的参数表示,这个应用最外层的组件应该如何展示
    const app = Vue.createApp({
        data() {
            return {
                msg:"<strong>hello world!</strong>"
            }
        },
        template:`<div v-html="msg"></div>`
    });
    // 将 app对应的应用挂载(只作用)在 id = "root"的元素上
    // vm 代表的就是 vue 应用的根组件,其充当了 vm层的角色
    const vm = app.mount('#root');
</script>
  • v-bind:(可简写为:“:”):表示对属性进行绑定
<script>

    const app = Vue.createApp({
        data() {
            return {
                disabled: true
            }
        },
        template:`<input v-bind:disabled= "disabled" />`
    });

    const vm = app.mount('#root');
</script>
  • v-on:(可简写为:“@”):表示对事件进行绑定
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "弹出",
            }
        },
        methods: {
            handleClick() {
                alert('click');
            }
        },
        template:`<div v-on:click="handleClick">{{message}}</div>`
    });

    const vm = app.mount('#root');
</script>
  • 动态参数:
    动态属性:v-bind:[自定义属性] 自定义属性:”要绑定的属性名”
    动态事件:v-on:[自定义事件] 自定义事件:”要绑定的事件名”
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "hello world!",
                show: false,
                name: 'title',
                event: 'click'
            }
        },
        methods: {
            handleClick() {
                alert('click');
            }
        },
        template:`<div :[name]="message" @[event]="handleClick">{{message}}</div>`
    });

    const vm = app.mount('#root');
</script>
  • v-once:表示在第一次完成渲染之后,后面再改变数据,依旧保持第一次渲染的结果,可以降低无用渲染
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "hello world!"
            }
        },
        template:`<div v-once>{{message}}</div>`
    });

    const vm = app.mount('#root');
</script>
  • v-if = “condition”:表示该标签的内容展不展示由v-if=”值”的值决定
  • v-else:表示当 if 的条件不成立时执行(v-else 可以不加 condition)
  • v-else-if = “condition”:表示当 if 的条件不成立且 else if 的条件成立时执行
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "hello world!",
                elseMessage: "elseMessage",
                show: false
            }
        },
        template:`
            <div v-if="show">{{message}}</div>
            <div v-else>{{elseMessage}}</div>
        `
    });

    const vm = app.mount('#root');
</script>
  • v-show = “condition”:表示控制该标签内容的展示与否
  • v-if 和 v-show 的区别:
    v-if 是通过控制 dom 元素的存在与否来控制展示与不展示
    v-show 是通过控制 style 样式来控制展示与不展示(style=”display: none;”)
    如果频繁的改变 DOM 元素的展示与否,建议使用 v-show,性能会好一些;如果不涉及频繁销毁或创建 DOM,v-if 和 v-show 都差不多
  • v-for =”“:表示对列表循环渲染
    1)普通列表的渲染:v-for=”(value,index) in listArray”
    2)对象列表的渲染:v-for=”(value,key,index) in listObject”
    3)在做v-for 时增加 :key=”“,key值尽量用唯一的,这样可以优化v-for指令,表示在第二次渲染的时候,如果Vue的底层发现某个元素的key值两次是一样的,那么Vue看看之前key值对应的dom元素能不能复用,如果能复用,就不再创建该元素

5、表单中双向绑定指令v-model 与修饰符

  • input:在使用 input 进行双向绑定时,就可以不必写 value=”“
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello'
            }
        },

        template:`
        <div>
            {{message}}
            <input v-model="message"/>
        </div>
        `
    });

    const vm = app.mount('#root');
</script>
  • textarea:绑定文本域
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello'
            }
        },

        template:`
        <div>
            {{message}}
            <textarea v-model="message"/>
        </div>
        `
    });

    const vm = app.mount('#root');
</script>
  • checkbox:使用数组去存
    默认选中是 true,不选中是 false;可以使用 true-value=”” false-value=”” 形式去自定义选中和不选中时展示的内容
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: []
            }
        },

        template:`
        <div>
            {{message}}
            A <input type="checkbox" v-model="message" value="A"/>
            B <input type="checkbox" v-model="message" value="B"/>
            C <input type="checkbox" v-model="message" value="C"/>
        </div>
        `
    });

    const vm = app.mount('#root');
</script>
  • radio:使用字符串去存
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: ''
            }
        },

        template:`
        <div>
            {{message}}
            A <input type="radio" v-model="message" value="A"/>
            B <input type="radio" v-model="message" value="B"/>
            C <input type="radio" v-model="message" value="C"/>
        </div>
        `
    });

    const vm = app.mount('#root');
</script>
  • select:下拉选择
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '',
                options: [
                    {value: 'A'},
                    {value: 'B'},
                    {value: 'C'},
                    {value: 'D'},
                    {value: 'E'}
                ]
            }
        },

        template:`
        <div>
            {{message}}
            <select v-model="message">
                <option v-for="item in options">{{item.value}}</option>    
            </select>
        </div>
        `
    });

    const vm = app.mount('#root');
</script>

v-model 修饰符:
- lazy 修饰符:数据改变的时候不实时跟着改变,当改变完成失去焦点时才改变
- number 修饰符:将数据转为 number 类型再存到绑定的变量
- trim 修饰符:去除内容前后的空格

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello'
            }
        },

        template:`
        <div>
            {{message}}
            <input v-model.lazy="message" />
        </div>
        `
    });

    const vm = app.mount('#root');
</script>

6、data & methods & computed & watch

  • data:可以REPL环境中通过 vm.$data.“属性” = “值” 的方式改变data 里某一个属性的值(其中 vm = app.mount(‘#root’);)
    如果属性是一级属性,还可以简写为:vm.“属性” = “值” 的方式
  • methods:只要页面重新发生渲染,就会执行重新计算
  • computed:只有当计算属性依赖的内容发生变更时,才会重新执行计算(只能同步)
  • watch(侦听器):可以侦听data里面数据的变化,当数据变化后才会执行(当异步执行时可以使用)
  • methods、computed、watch 三者之间的区别与使用:
    computed 和 methods 都能实现的功能,建议使用 computed,因为有类似缓存的功能
    computed 和 watch 都能实现的功能,建议使用 computed,因为更加简洁

7、样式绑定

  • 在 Vue 里面使用 class 定义样式,可以使用字符串、对象、数组形式(记得class 前加 v-bind)
  • 字符串形式:在\