vue.js入门

最新推荐文章于 2024-04-30 08:37:00 发布

qq_41923555

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量55

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_41923555/article/details/103757816

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#box{
            width: 100px;
            height:100px;
            color:darkgray;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- vue基本使用-->
    <button @click="handleClick">点我</button>
    <input type="text" v-model="num"><button @click="num++">+</button>
    <h1>
         <span v-text="name"></span> hahaha
         {{num}}个 <!-- 插值表达式 避免网络延迟 使用v-html v-text-->
    </h1>
    <span v-html="name"></span> <br>
    <span v-text="name"></span> <br>

    <!-- v-model -->
    <input type="checkbox" v-model="lessons" value="Java"/> Java <br>
    <input type="checkbox" v-model="lessons" value="Python"/> Python <br>
    <input type="checkbox" v-model="lessons" value="IOS"/> IOS <br>
    {{lessons.join(",")}}

    <hr>
    <!-- v-on --> <!-- 事件冒泡 点击儿子触发父类的事件  .stop阻止-->
    <div style="width: 100px; height:100px;background-color: cornsilk" @click.stop="print('div')">
        div
        <button @click.stop="print('button')">点我试试</button>
        <a href="http://www.baidu.com" @click.prevent="print('baidu')">百度</a>
    </div>

    <hr>
    <!-- v-for -->
    <ul>
        <li v-for="(u,i) in users"  :key="i">
           {{i}} {{u.name+","+u.gender+","+u.age}}
        </li>
    </ul>
    <ul>
        <li v-for="(v,k,i) in users[0]">{{i}}{{k+","+v}}</li>
    </ul>
    <ul>
        <li v-for="i in 5">{{i}}</li>
    </ul>

    <hr>
    <!-- v-if -->
    <button @click="show = !show">点我切换</button><br>
    <h1 v-if="show">
        你好
    </h1>
    <ul>
        <li v-for="i in 5" v-if="i%2===0">{{i}}</li>
    </ul>

    <hr>
    <!-- v-bond class属性-->
    <div>
        <button @click="isRed=!isRed">切换颜色</button>
        <div id="box" :class="{red:isRed,blue:!isRed}">
            盒子
        </div>
    </div>

    <hr>
    <!-- 计算属性-->
    <h1>
        生日：{{birth}}
    </h1>

    <hr>
    <!-- watch-->
    <input type="text" v-model="num">
    <h1>num:{{num}}</h1>

</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app", //vue作用标签
        data:{
            name:"",
            num:1,
            lessons:[],
            users:[
                {name:'fei',gender:'男',age:21},
                {name:'fei2',gender:'男',age:22}
            ],
            show:true,
            isRed:true,
            birthday:13143422413,//毫秒值
            person:{
                name:"Jack",
                age:21
            }
        },
        computed:{
            birth(){
                const day = new Date(this.birthday);
                return day.getFullYear()+"年"+day.getMonth()+"月"+day.getDay()+"日";
            }
        },
        methods:{
            handleClick(){
                console.log("hello");
            },
            print(msg){
                console.log(msg);
            }
        },
        created(){
            //向后台发起ajax请求 对data初始化
            //setTimeout(()=>this.name="aa",1000)
            this.name="fei";
        },
        watch:{
            num(val,oldval){ //浅监控
                console.log(val,oldval);
            },
            person:{
                deep:true, //深度监控
                handler(val){
                    console.log(val.age);
                }
            }
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <counter></counter><counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    //定义全局组件 组件名称 组件参数
    Vue.component("counter",{
        template:"<button @click='count++'>点了{{count}}次</button>",
        data(){
            return{
                count:0,
            }
        }
    });

    //局部组件
    const counter={
        template:"<button @click='count++'>点了{{count}}次</button>",
        data(){
            return{
                count:0,
            }
        }
    };
    const app = new Vue({
       el:"#app",
       data:{
       },
       components:{
           counter:counter //可简写为counter
       }
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <introduce :title="msg"></introduce>
    <hr>
    <for-component :items="lessons"></for-component>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //局部组件 父向子通信
    const introduce={
        template:"<h1>{{title}}</h1>",
        props:['title']
    };

    const forComponent={
        template:"<ul><li v-for='item in items'>{{item}}</li></ul>",
        props:{
            items:{
                type: Array,
                default: ['java']
            }
        }
    }
    const app = new Vue({
       el:"#app",
       data:{
           msg:"大家好",
           lessons:['java','python']
       },
       components:{
           introduce,forComponent
       }
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <counter :num="count" @incr="add" @decr="reduce"></counter>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //局部组件 子向父通信
    const counter={
        template:`
           <div>
               <button @click="handleAdd">+</button>
               <button @click="handleReduce">-</button>
               <h1>
               num:{{num}}
               </h1>
           </div>
        `,
        props:['num'],
        methods:{
            handleAdd(){
                this.$emit('incr');
            },
            handleReduce(){
                this.$emit('decr');
            }
        }
    };
    const app = new Vue({
       el:"#app",
       data:{
           count:0,
       },
       components:{
           counter
       },
        methods:{
           add(){
               this.count++;
           },
            reduce(){
               this.count--;
            }
        }
    });

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

qq_41923555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div#box{ width: 100px; ...
复制链接

扫一扫

专栏目录