Vue的基本组件1(show,bind,on,if)

简介: Vue的基本组件1(show,bind,on,if)

Vue基础

简介:本文旨在用最短的篇幅和例子,代入大家入门vue,也是本博主的一个学习记录,本文主要介绍的组件有,v-text,v-html,v-on,v-if。

入门案例

学习代码:

<!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>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            {{username}}
            <h1>{{msg}}</h1>
        </p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"Vue欢迎你!",
                username:"Jerry"
            },            
        });
    </script>
</html>

运行结果:

v-text

功能:给标签中的文本添加内容

学习代码:

<!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>v-text</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"你好,Vue!"
            },            
        });
    </script>
</html>

运行结果:

v-html

功能:相比v-text,也是文本替换,只是对于v-html它可以把文本转换成html标签。

学习代码:

<!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>v-html</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>
        <br>
        <span v-html="message">随便</span>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>vue欢迎您</a>"
            },            
            methods:{
            }
        });
    </script>
</html>

v-on(@click)

简介:绑定点击事件。

学习代码:

<!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>v-on</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>年龄:{{number}}</h2>
        <br>
        <input type="button" value="点我改变数字" v-on:click="changenumber">
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello,vue!",
                number:8
            },            
            methods:{
                changenumber(){
                    this.number = 10;
                } 
            }
        });
    </script>
</html>

简写版

<!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>v-on(简化版)</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count的值" @click="changenumber">
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1
            },            
            methods:{
                changenumber(){
                    this.count ++;
                }
            }
        });
    </script>
</html>

运行结果:

v-if

简介:类比与Java里面的if,判断语句。

<!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>v-if</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="current=='search'">显示搜索框</div>
        <div v-else-if="current=='keywords'">显示搜索关键字</div>
        <div v-else>显示搜索结果</div>
        <button @click="current='search'">显示搜索框</button>
        <button @click="current='keywords'">显示关键字</button>
        <button @click="current='results'">显示搜索结果</button>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                current:'search'
            },            
            methods:{
            }
        });
    </script>
</html>

运行结果:

相关文章
|
9天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
60 1
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
153 64
|
19天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
42 8
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信

热门文章

最新文章