小福利，带你快速入门前端vue框架

littlespider889

于 2020-09-15 21:43:40 发布

阅读量116

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/littlespider889/article/details/108610039

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

大家好，我是天空之城，今天给大家带来小福利，带你快速入门前端vue框架
安装vscode软件，编辑html文件，每次编辑完都要保存下，不然无法显示修改后的效果，这点比较坑
首先要引入vue.js文件，也可以下载vue.js到本地

在new Vue方法中定义了属性和方法，属性包括username和code，方法是methods里面的ChangeUserName，然后在div id=app标签里面进行调用属性和方法，这里跟flask不同，flask可以在后端定义属性和方法，在前端调用；这里是前端定义和前端调用。
下面是绑定class和style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的vue网页</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<style>
        .pclass{
            font-size: 40px;
        }
        .title{
            color:blue
        }
        .main{
            font-weight: 200;
        }

    </style>

</head>
<body>
    <a href="https://www. baidu.com/">百度一下,你就知道</a>
    <div id="app">
        <p>{{username}}</p>  
        <!--显示原生的HTML-->
        <p v-html="code"></p>
        <button @click='ChangeUserName'>点击修改用户名1</button>
        <button @click='ChangeUserName2'>点击修改用户名2</button>
		<!-- 绑定属性class和style -->
        <p v-bind:class="classname" >12345</p>
        
        <p v-bind:class='[classname,pclass1,pclass2]'> 天下第一 </p>

    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                username:'我是无敌大帅哥',
                code:'<a href="https://www. baidu.com/">百度一下,你就知道</a>',
                 classname:'pclass',
                pclass1:'title',
                pclass2:'main'

            },
            methods:{
                ChangeUserName:function(){
                    this.username='我是风流倜傥完颜康'
                },
                ChangeUserName2:function(){
                    this.username='我是无敌大帅哥'
                }
            }
        })

    </script>

</body>
</html>

在这里插入图片描述

再来一遍，补充调用style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的vue网页</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .pclass{
            font-size: 40px;
        }
        .title{
            color:blue
        }
        .main{
            font-weight: 200;
        }

    </style>

</head>
<body>
    <a href="https://www. baidu.com/">百度一下,你就知道</a>
    <div id="app">
        <p>{{username}}</p>  
        <!--显示原生的HTML-->
        <p v-html="code"></p>
        <button @click='ChangeUserName'>点击修改用户名1</button>
        <button @click='ChangeUserName2'>点击修改用户名2</button>
        <!-- 绑定属性class和style -->
        <p v-bind:class="classname" >12345</p>
        
        <p v-bind:class='[classname,pclass1,pclass2]'> 天下第一 </p>

        <p v-bind:style='{"background-color":color}'> 穆桂英挂帅 </p>

        <p v-bind:style='pstyle'>小龙女是我的梦中情人</p>

    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                username:'我是无敌大帅哥',
                code:'<a href="https://www. baidu.com/">百度一下,你就知道</a>',
                classname:'pclass',
                pclass1:'title',
                pclass2:'main',
                color:'red',
                pstyle:{
                    backgroundColor:'blue',
                    fontSize:'22px'
                }
            },
            methods:{
                ChangeUserName:function(){
                    this.username='我是风流倜傥完颜康'
                },
                ChangeUserName2:function(){
                    this.username='我是无敌大帅哥'
                }
            }
        })

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

在这里插入图片描述

littlespider889

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小福利，带你快速入门前端vue框架

大家好，我是天空之城，今天给大家带来小福利，带你快速入门前端vue框架安装vscode软件，编辑html文件，每次编辑完都要保存下，不然无法显示修改后的效果，这点比较坑首先要引入vue.js文件，也可以下载vue.js到本地在new Vue方法中定义了属性和方法，属性包括username和code，方法是methods里面的ChangeUserName，然后在div id=app标签里面进行调用属性和方法，这里跟flask不同，flask可以在后端定义属性和方法，在前端调用；这里是前端定义和前端调用。
复制链接

扫一扫

专栏目录