码迷,mamicode.com
首页 > 其他好文 > 详细

vue入门一

时间:2019-03-15 01:15:54      阅读:24      评论:0      收藏:0      [点我收藏+]

标签:属性   lse   inpu   ===   his   lang   name   method   doctype   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        .box{
            background-color: red
/*            height: 200px
            width: 200px*/
        }

        .box2{
            background-color: green;
        }

    </style>>
</head>
<body>
	<div id="app">
        <hr>
        <h2>实例化对象测试</h2>
		<h3>{{title}}</h3>
 
        <h3>{{1+1}}</h3>
        <h3>{{3>2?"真的":"假的"}}</h3>
        <h3>hahaahahah</h3>


        <!-- <h3>{{123}}</h3> -->
        <!-- 这个可以正常显示,因为数字也是一个对象 -->


        <!-- <h3>{{a}}</h3> -->
        <!-- 这个会报错,会找a这个变量,找不到就会报错 -->

        <hr>
        <h2>指令系统测试</h2>

        <h3 v-if = "show">显示隐藏测试</h3>

        <input v-on:click = "clickhandler" type="button" value="按钮">


        <h3 v-show = "isshow">v-show的测试</h3>


        <h3 v-show = "isshow" v-bind:title="title">v-title的测试</h3>
        <!-- 绑定一个title属性,鼠标悬浮上会显示title的值,可以绑定任何属性 -->


        <!-- v-bind写起来有点繁琐,可以直接用冒号代替 : -->
        <!-- v-on写起来有点繁琐,可以直接用@符号代替v-on,其他和之前是一样的 -->

       

        <div class="box" v-bind:class=‘{box2:isGreen}‘>绑定class属性测试</div>
        <input type="button" v-on:click="changeColour" value="切换按钮">


        <button v-on:click="num+=1">加{{num}}</button>

        <img v-bind:src="img" v-bind:alt="time">


        <div v-if = "Math.random() > 0.5">
            数字大于1
        </div>
        <div v-else>
            数字小于1
        </div>


        <div v-if = "type === ‘打雷‘">
            打雷
        </div>
        <div v-else-if = "type === ‘下雨‘">
            下雨
        </div>
        <div v-else>
            雷阵雨
        </div>

	</div>
    <script src="vue.js" type="text/javascript"></script>
    <script>



        // 1.创建vue实例化对象,一个vue实例只能绑定一块地,绑定的这块地就可以使用实例化中的data数据,采用{{}}的方式使用data中的数据
      

        var app = new Vue({
            el:"#app",
            // el的属性是这个vue的对象绑定的标签的id
            
            data:{
            // 所有的数据都放在数据属性中,必须是data,第一个属性是el,第二个属性是data
               title:‘土豆‘ ,
               show:true,
               type:"下雨",
               isshow:true,
               title:"title测试",
               img:‘./timg.jpg‘,
               time:`页面加载于${new Date().toLocaleString()}`,
               isGreen:true,
               num:1

            },
            methods:{
                clickhandler(){
                    // 这里这个this就是当前实例化的对象

                    this.$data.show = !this.show;
                },
                changeColour(){
                    alert(123);
                    this.isGreen = !this.isGreen;

                }
            }
        })

        console.log(app);
        // 打印app这个对象

        console.log(app.$el);
        // 打印app这个对象的el属性

        console.log(app.$data.title)

        console.log(app.title)

        // 上面这两种方式效果一样,我们打印app这个对象,可以看到这个对象直接就有一个title属性




        // 2、vue的指令系统


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

  

vue入门一

标签:属性   lse   inpu   ===   his   lang   name   method   doctype   

原文地址:https://www.cnblogs.com/bainianminguo/p/10534572.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!