• vue入门一


    <!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
                 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>
    

      

  • 相关阅读:
    WAF攻防实战
    简单的Web日志分析脚本
    android multicast 多播(组播)问题
    easyhadoop:failed to open stream:Permission denied in /var/www/html/index.php
    Codeforces Round #215 (Div. 2) A. Sereja and Coat Rack
    删除workspace下的vss的scc文件
    由两代WIN8 Surface平板看微软心态
    C++ 需要返回值的函数却没有返回值的情况 单例模式
    调整系统的inode数量
    平衡树
  • 原文地址:https://www.cnblogs.com/bainianminguo/p/10534572.html
Copyright © 2020-2023  润新知