Vue学习笔记之应用创建和基础知识

1、安装方式

CDN方式安装：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2、创建应用

使用Vue内置对象创建一个应用，基本代码结构如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app"></div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
               
            }
        },
        methods: {
            
        },
        mounted() {
                
        },
        computed: {
            
        }
    }).mount('#app');
</script>

id为app的div元素，代表vue应用绑定的dom元素，vue对内部数据的操作都会直接影响dom的数据更新；

data：响应式数据均定义在data内部

methods：自定义函数定义在区域

mounted：DOM元素挂在应用后，可再此执行初始化操作，使用this对象操作data数据

computed：计算属性定义在此区域，一般只涉及读操作，基于响应式数据组合为一个新属性，提供给DOM元素渲染，也支持修改计算属性，但不建议这么做。

3、插值语法

使用两个{{}}大括号表示，如在data部分定义返回属性count，

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    {{count}}
</div>
<script>
    const { createApp } = Vue;
    createApp(
        {
            data() {
                return {
                    count: 1
                }
            },
        }).mount('#app');
</script>

3、v-if,v-else判断指令

cansee为真时展示v-if的p元素，否则展示v-else的p元素

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <p v-if="cansee">can see me!</p>
    <p v-else>you can't see me!</p>
</div>
<script>
    const { createApp } = Vue;
    createApp(
        {
            data() {
                return {
                    cansee: true,
                }
            }
        }).mount('#app');
</script>

4、v-on事件指令

v-on：click代表绑定onclick事件，在methods区域定义了事件处理函数，将响应式数据count执行加1操作，如下所示：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    {{count}}
    <button v-on:click="increment">点击我</button>
</div>
<script>
    const { createApp } = Vue;
    createApp(
        {
            data() {
                return {
                    count: null,
                }
            },
            mounted() {
                this.count = 1;
            },
            methods: {
                increment() {
                    this.count++;
                }
            }
        }).mount('#app');
</script>

5、嵌套对象的使用

可以使用嵌套对象语法给DOM元素绑定数据，如下所示：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <p>{{obj.nested.count}}</p>
    <button v-on:click="increment">点击我</button>
</div>
<script>
    const { createApp } = Vue;
    createApp(
        {
            data() {
                return {
                    obj: {
                        nested: { count: 0 }
                    }
                }
            },
            mounted() {
 
            },
            methods: {
                increment() {
                    this.obj.nested.count++;
                }
            }
        }).mount('#app');
</script>

6、计算属性的使用

计算属性基于响应式数据组合新的数据，计算属性的 getter 应只做计算而没有任何其他的副作用，不要改变其他状态、在 getter 中做异步请求或者更改 DOM。另外，避免直接修改计算属性的值。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <p>Has published books:</p>
    <span>{{isPublishedBooks}}</span><br/>
    <button v-on:click="removeAll">删除所有</button>
    <p>总指导是：{{fullName}}</p>
    <button v-on:click="modifyZonzhidao">改名</button>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                author: {
                    name: 'John Doe',
                    books: [
                        'Java guide 3',
                        'C# 高级编程',
                        '数据库基础'
                    ],
                    firstName: 'Pan',
                    lastName: 'three big stones'
                }
            }
        },
        methods: {
            removeAll() {
                this.author.books = [];
            },
            modifyZonzhidao() {
                this.fullName = '黄 飞鸿';
            }
        },
        computed: {
            isPublishedBooks() {
                return this.author.books.length > 0 ? 'Yes' : 'No';
            },
            fullName: {
                get() {
                    return this.author.firstName + ' ' + this.author.lastName;
                },
                set(newValue) {
                    //注意：这里使用解构赋值语法
                    [this.author.firstName, this.author.lastName] = newValue.split(' ');
                }
            }
        }
    }).mount('#app');
</script>

6、类的绑定

使用vue将class绑定到DOM元素有以下5种方式：

1)单属性语法赋值class方式，：class="{active:isActive,'text-danger':hasError}"，isActive为真将绑定active类，hasError为真将绑定text-danger类，同时为真将绑定两者

2)使用对象直接赋值class方式，:class="classObj"，直接绑定classObj中所有为真的类

3)使用计算表达式方式赋值，:class="classObj2"，classObj2是一个计算表达式，如下代码所示，也是绑定计算表达式返回对象中所有为真的class

4)使用数组方式赋值class，:class="[activeClass,errorClass]"，直接绑定activeClass和errorClass所对应的class

5)基于条件判断+数组的混合方式赋值class，:class="[{active:isActive},errorClass]"，如isActive为真，将绑定active和errorClass属性对应的class，否则只会绑定errorClass属性对应的class

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
    .active{
        background-color:lightcoral;
        border:1px dotted black;
        width:200px;
        height:200px;
        opacity:0.5;
    }
 
    .text-danger{
        opacity:1;
        background-color:red;
    }
</style>
<div id="app">
    <div class="static" :class="{active:isActive,'text-danger':hasError}">单属性赋值class方式</div>
    <div :class="classObj">多属性对象赋值class方式</div>
    <div :class="classObj2">计算表达式赋值class方式</div>
    <div :class="[activeClass,errorClass]">class赋值数组对象方式</div>
    <div :class="[{active:isActive},errorClass]">class赋值数组对象带条件判断方式</div>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                isActive: true,
                hasError: false,
                classObj: {
                    active: true,
                    'text-danger': true
                },
                activeClass: 'active',
                errorClass: 'text-danger',
            }
        },
        methods: {
            
        },
        computed: {
            classObj2() {
                return {
                    active: this.isActive && !this.hasError,
                    'text-danger': !this.hasError
                }
            }
        }
    }).mount('#app');
</script>

6、内联样式的绑定

使用vue将内联元素绑定到DOM元素有以下3种方式：

1)单属性语法赋值style方式，:style="{color:activeColor,fontSize:fontSize+'px'}"，绑定颜色和字体大小两个内联元素

2)使用对象直接赋值style方式，:class="styleObj"，直接绑定styleObj中所有的内联元素

3)使用数组方式赋值style方式，:class="[styleObj,styleObj2]"，将合并数组中所有对象下的内联元素

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <div :style="{color:activeColor,fontSize:fontSize+'px'}">内联样式直接赋值方式</div>
    <div :style="styleObj">内联样式使用对象赋值方式</div>
    <div :style="[styleObj,styleObj2]">内联样式使用数组对象赋值方式</div>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                activeColor: 'red',
                fontSize: 30,
                styleObj: {
                    color: 'green',
                    fontSize: '28px'
                },
                styleObj2: {
                    fontWeight: 'bold',
                    fontFamily: 'cursive'
                }
            }
        },
        methods: {
            
        },
        computed: {
            
        }
    }).mount('#app');
</script>