IT序号网

vue入门一知识解答

flyfish 2021年07月13日 编程语言 197 0
<!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> 

  


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

NHibernate的简单例子知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。