vue3快速入门（局部使用）

最新推荐文章于 2024-09-01 16:09:02 发布

open_test01

最新推荐文章于 2024-09-01 16:09:02 发布

阅读量1.2k

点赞数 30

分类专栏：前端vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dafsq/article/details/139067748

版权

前端vue 专栏收录该内容

20 篇文章 14 订阅

订阅专栏

前置知识JavaScript-导入导出

正常情况在html导入js文件是全部导入，这样会导致性能上的损失。

JS提供的导入导出机制,可以实现按需导入

入门操作

变量渲染页面

使用vue将变量内容渲染到页面

<!DOCTYPE html>
<html>
<head>

</head>

<body>
    <div id="app">
        <!-- 插值表达式 -->
        <h1>{{msg}}</h1> 
    </div>
	
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //导入vue

        //创建vue实例
        createApp({
            data(){
                return { msg:"hello vue3"}
            }

        }).mount("#app") //链式方法 传入div的id值

    </script>
    
</body>

</html>

局部使用vue的实现步骤

准备工作

引入Vue模块
创建Vue的应用实例
定义元素(div)，交给Vue控制

构建用户界面

准备数据
用插值表达式渲染

vue指令

指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法： v-for = "(item,index) in items"

参数说明：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

案例实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>

            <!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 -->
            <tr v-for = "(i,index) in articleList">
                <td>{{i.title}}</td>
                <td>{{i.category}}</td>
                <td>{{i.time}}</td>
                <td>{{i.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp } from
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    articleList: [
                        {
                            title: "医疗反腐绝非砍医护收入",
                            category: "时事",
                            time: "2023-09-5",
                            state: "已发布"
                        },
                        {
                            title: "中国男篮缘何一败涂地？",
                            category: "篮球",
                            time: "2023-09-5",
                            state: "草稿"
                        },
                        {
                            title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category: "旅游",
                            time: "2023-09-5",
                            state: "已发布"
                        }
                    ]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
</body>

</html>

遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值"
简化语法：:属性名="属性值"

用于将变量绑定到标签属性中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>

    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    url:"https://www.baidu.com"
                    
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

v-bind所绑定的数据，必须在data中定义。

v-if

作用：用来控制元素的显示与隐藏
语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        手链价格为:  <span v-if="customer.level >=0 && customer.level<= 9.9">9.9</span>  
                    <span v-else-if="customer.level >9.9 && customer.level<= 19.9">19.9</span> 
                    <span v-else="customer.level >19.9">29.9</span>

    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义消费数据
                    customer:{
                        name:"小王",
                        level:10                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>
</body>
</html>

v-show

作用：用来控制元素的显示与隐藏
语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

v-if 与 v-show的区别

v-if 是根据条件判断是创建还是移除元素节点（条件渲染）。
v-show 是根据css样式display来控制元素的显示与隐藏。

v-if 与 v-show的适用场景

v-if 适用于显示与隐藏切换不频繁的场景。
v-show 适用于显示与隐藏切换频繁的场景。

v-on

作用：为html标签绑定事件
语法： v-on:事件名="函数名"
简写为 @事件名="函数名"
函数需要定义在methods选项内部

createApp({ data(){需要用到的数据}, methods:{需要用到的方法} })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="ok1">点我</button> &nbsp;
        <button @click="ok2">再点我</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                ok1:function(){
                    alert("你很帅")
                },
                ok2:function(){
                    alert("我承认，你真的很帅")
                }

            }
        }).mount("#app");//控制html元素

    </script>
</body>
</html>

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
v-model 中绑定的变量，必须在data中定义。

给表单元素使用实现双向数据绑定,数据发生变化视图也会跟着变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchconditions.category"/> <span>{{searchconditions.category}}</span>

        发布状态: <input type="text" v-model="searchconditions.state"/> <span>{{searchconditions.state}}</span>

        <button>搜索</button>
        <button v-on:click="clear">重置</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                    searchconditions:{
                        category:'',
                        state:''
                    },

                    articleList: [{
                        title: "医疗反腐绝非砍医护收入",
                        category: "时事",
                        time: "2023-09-5",
                        state: "已发布"
                    },
                    {
                        title: "中国男篮缘何一败涂地？",
                        category: "篮球",
                        time: "2023-09-5",
                        state: "草稿"
                    },
                    {
                        title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                        category: "旅游",
                        time: "2023-09-5",
                        state: "已发布"
                    }]
                }
            },
            methods:{
                clear:function(){
                    //清空category以及state的数据
                    //在methods对应的方法里面,使用this就代表的是vue实例
                    //可以使用this获取到vue实例中准备的数据
                    this.searchconditions.category = ''
                    this.searchconditions.state = ''

                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

</html>