Vue.js(2.0) 笔记

最新推荐文章于 2024-07-08 10:04:44 发布

等一场梦

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量103

点赞数 3

文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/m0_74599628/article/details/136587158

版权

vue初识，模板语法

//除去启动时提示

  Vue.config.productionTip = false;

 var app=new Vue({

            //绑定方式1

            // el:'#app',

            //data{}对象式

            // data:{

            //  message:'hello hx',

            //  pp:'huang'

            // }

            //data(){}函数式

            data(){

                return{

                    message:'hello hx',

                    pp:'huang'

                }

            }

        })

        //绑定方式2

        app.$mount("#app")

<!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>
<style>
    .box1{
        font-size: 40px;
    }
</style>
<body>
    <div class="hx">
        <!-- 拼接 -->
        {{a+b+c}}
        <!-- 运算 -->
        {{d+e}}
        <!-- 判断 -->
        {{d>5?1:2}}
        <!-- 函数 -->
        {{f(99)}}
        <a href="http://www.baidu.com">百度官网</a>
        <!-- 动态v-bind:绑定href和class -->
        <a v-bind:href="aaa" v-bind:class="ss">我爱{{name}}</a>
    </div>
</body>
<script src="../vue.js代码/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    //var的名字随意
    new Vue({
        el:".hx",
        data:{
            a:"i",
            b:"love",
            c:"you",
            d:520,
            e:1314,
            ss:"box1",
            name:"你",
            aaa:"http://www.baidu.com",
            f(e){
                return(e)
            }
        }
    })
</script>
</html>

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>
<style>
    .box2{
        font-size: 40px;
        color: antiquewhite;
    }
    .box3{
        font-size: 20px;
        color: aqua;
    }
</style>
<body>
    <div id="app">
        <button v-on:click="func1()">点击1</button>
        <button v-on:click="func2()">点击2</button>
        <h1 v-bind:clsss="hx">我现在点击的是{{num}}</h1>
        <h1 :class="hx">事件</h1>
        <h2 :style="boss[1]">绑定样式</h2>
    </div>
</body>
<script src="../vue.js代码/vue.js"></script>
<script>
     Vue.config.productionTip = false;
    new Vue({
        el:"#app",
        data(){
            return{
                num:"",
                hx:"",
                //写法1
                // boss:{
                //     border:"2px solid red",
                //     textAlign:"center"
                // }
                //写法2
                boss:[
                    {
                        border:"2px solid red",
                        textAlign:"center"
                    },
                    {
                        border:"3px solid green",
                    }
                ]
            }
        },
        methods:{
            func1:function(){
                this.num=1;
                console.log(22222);
                this.hx="box2"
            },
            func2:function(){
                this.num=2;
                console.log(33333);
                this.hx="box3"
            },
        },
    })
</script>
</html>