GroKay 的博客

简介 ¶

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）
字符串形式：在\