• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Vue3 基础语法

Data: 2015-11-09 23:51:55Form: JournalClick: 7

# Vue3 基础语法

# 一、语法

  • 每个 vue 文件，分三部分
    • <template></template> 对应 html 代码
    • <script></script> 对应 js 代码
    • <style></style> 对应 css 代码

# 1、插值、数据绑定

  • 使用双大括号 {{}} 进行插值、数据绑定
  • defineComponent 函数，只是对 setup 函数进行封装，返回 options 的对象。
  • defineComponent 最重要的是：在 TypeScript 下，给予了组件 正确的参数类型推断。
# 1、单独写双大括号，是没有数据的，因为数据是从js里来的
# 1.1、在template标签里，必须有个最外层的标签
<template>
    <div>我是：{{ ouyangke }}</div>
</template>

# 2、js 返回 ouyangke 这个数据
# 2.1、ouyangke相当于下标，"欧阳克"相当于值
# 2.2、export default(es6默认导出) 一个文件只能有一个
# 2.3、data(){}，交互数据，也是M层。return{}，数据要返回。
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克"
        };
    }
};
</script>

# 2、基本运算

<template>
    <div>
        <div>{{ ouyangke+zhutianpeng }}</div>
        <div>{{ num1+num2 }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克",
            zhutianpeng : "朱天蓬",
            num1 : 20,
            num2 : 10
        };
    }
};
</script>

# 3、方法

<template>
    <div>
        <div>{{ ouyangke+zhutianpeng }}</div>
        <div>{{ num1+num2 }}</div>
        <div>{{ fun() }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克",
            zhutianpeng : "朱天蓬",
            num1 : 20,
            num2 : 10
        };
    },
    methods:{
        fun(){
            console.log('方法1');
            // this 调用data里的数据
            console.log(this.ouyangke);
            return "方法1";
        },
        fun1(){
            console.log('方法2');
            // this 调用metods里的方法
            this.fun();
        }
    }
};
</script>

# 4、三元表达式

<template>
    <div>
        <div>{{ boor ? '真' : '假' }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            boor: true
        };
    }
};
</script>

# 5、错误的写法

<template>
    <div>
        <!-- 这是一个语句，而非表达式 -->
        <div>{{ var a = 1 }}</div>

        <!-- 条件控制也不支持，请使用三元表达式 -->
        <div>{{ if (boor) { return '真' } }}</div>
    </div>
</template>

# 6、export default 的 option 构造(选项)

构造(选项)描述
name绑定标签名
data交互数据
methodsjs方法
computed计算属性
components组件
props组件之间数据交互
setup组合API

# 二、指令

指令描述
v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
v-once只渲染元素和组件一次
v-text更新元素的 textContent，跟插值效果一样
v-html更新元素的 innerHTML
v-pre跳过这个元素和它的子元素的编译过程，示原始 Mustache 标签
v-bind:动态地绑定属性
# 1、`v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定
<template>
    <div>
        <div>{{ ouyangke }}</div>
        <input type="text" v-model:value="ouyangke">
    </div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克"
        };
    }
};
</script>

# 2、`v-once` 只渲染元素和组件一次
<template>
    <div>
        <div>{{ ouyangke }}</div>
        <input type="text" v-model="ouyangke">
        <div v-once>{{ ouyangke }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克"
        };
    }
};
</script>

# 3、`v-text` 更新元素的 `textContent`，跟插值效果一样
<template>
    <div>
        <div>{{ ouyangke }}</div>
        <input type="text" v-model="ouyangke">
        <div v-text="ouyangke"></div>
        <div v-text="ouyangke">这里不能在写文字</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克"
        };
    }
};
</script>

# 4、`v-html` 更新元素的 `innerHTML`
# 4.1、注意：网页中动态渲染任意的HTML可能非常危险，很容易导致XSS攻击，最好对可信的内容使用v-html指令，绝对不能让用户输入内容使用这个指令
<template>
    <div>
        <div>{{ htmlcode }}</div>
        <div v-html="htmlcode"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            htmlcode: "<h1 style='color:red;'>欧阳克</h1>"
        };
    }
};
</script>

# 5、`v-pre` 跳过这个元素和它的子元素的编译过程，示原始 `Mustache` 标签
<template>
    <div>
        <div v-pre>{{ htmlcode }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            htmlcode: "<h1 style='color:red;'>欧阳克</h1>"
        };
    }
};
</script>

# 6、`v-bind` 动态地绑定属性
<template>
    <div>
        <a href="https://www.php.cn" title="php中文网">{{ name }}</a>
        
        <a href="https://www.php.cn" title="{{name}}">{{ name }}</a>
        
        <a href="https://www.php.cn" v-bind:title="name">{{ name }}</a>
        
        // 语法糖，缩写 :
        <a :href="url" :title="name">{{ name }}</a>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "php中文网",
            url : "https://www.php.cn"
        };
    }
};
</script>
# 6.1、常用的绑定style和class属性，四种用法(字符串、数组、对象、方法)
<template>
    <div>
        // 字符串变量写法
        <div style="color: red; font-size: 24px" :style="style">{{ name }}</div>
        // 数组写法
        <div style="color: red; font-size: 24px" :style="[arr1, arr2, 'background:#33aa33']">{{ name }}</div>
        // 对象写法
        <div style="color: red; font-size: 24px" :style="{width:obj,height:obj,background:'#33aa33'}">{{ name }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "php中文网",
            style: "width:200px;height:200px;background:#33aa33",
            arr1:"width:200px",
            arr2:"height:200px",
            obj:"200px"
        };
    }
};
</script>
# 6.2、class属性，使用
<template>
    <div>
        // 字符串变量写法
        <div class="div" :class="class1">{{ name }}</div>
        // 单引号、使用class名，跟之前写到class里没区别
        <div class="div" :class="['fs24']">{{ name }}</div>
        // 对象写法(用的最多的)：class名作为下标
        <div class="div" :class="{fs24:true}">{{ name }}</div>
        // 配合点击事件，可以显示隐藏
        <button @click="show = !show">点击</button>
        <div class="div hide" :class="{ show: show }">{{ name }}</div>
        // 混合使用
        <div class="div hide" :class="[{ show: show },'fs24']">{{ name }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name: "php中文网",
            class1: "fs24",
            show: true,
        };
    }
};
</script>
<style lang="scss">
.div {
    width: 200px;
    height: 200px;
    background: #33aa33;
}
.fs24 {
    font-size: 24px;
}
.hide {
    display: none;
}
.show {
    display: block;
}
</style>

# 三、计算属性

  • 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何包含响应式数据的复杂逻辑，都应该使用计算属性。
# 1、老版本 连接字符串方式
<template>
    // 第一种方式
    <div>{{ ouyangke}}-{{phpcn}}</div>
    // 第二种方式
    <div>{{ ouyangke + '-' + phpcn}}</div>
    // 第三种方式
    <div>{{fun()}}</div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克",
            phpcn : "php中文网"
        };
    },
    methods : {
        fun(){
            return this.ouyangke + '-' + this.phpcn
        }
    }
};
</script>

# 2、computed 计算属性
<template>
    <div>{{ handle }}</div>
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克",
            phpcn : "php中文网"
        };
    },
    computed : {
        handle(){
            return this.ouyangke + "-" + this.phpcn;
        },
        // 两种写法一样的
        handle(){
            get(){
                return this.ouyangke + "-" + this.phpcn;
            }
        }
    }
};
</script>
# 2.1、set方法
<template>
    <div>{{ handle }}</div>
    <input type="text" v-model="ouyangke" />
    <input type="text" v-model="handle" />
</template>
<script>
export default {
    data() {
        return {
            ouyangke: "欧阳克",
            phpcn : "php中文网"
        };
    },
    computed : {
        handle : {
            get(){
                return this.ouyangke + "-" + this.phpcn;
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>