vue入门一
Posted bainianminguo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 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入门一的主要内容，如果未能解决你的问题，请参考以下文章