Vue浅谈
基础准备
1.下载并引用
<script src="vue/vue.js"></script> <script src="vue/vue.min.js"></script>
实例01----字段和方法赋值
<body> <div id="app"> <!-- 这个位置定义了sname,sex,age字段和show方法 --> <p>姓名：{{sname}}</p> <p>性别：{{sex}}</p> <p>年龄：{{age}}</p> <p>描述：{{show()}}</p> </div> </body> <script> // new Vue实例化，el指定id,data给参数赋值，同理编写show方法的实现 //关键字Methods new Vue({ el:'#app', data:{ sname:'张三', sex:'男', age:'12' }, methods:{ show:function(){ return this.sname+'是一个很听话的孩子'; } } }) </script>
效果
实例02----vue的判断，这个目的主要是知道docoument获取的对象和el获取的对象一致
<body> <div id="app"> <!-- 这个位置定义了sname,sex,age字段和show方法 --> <p>姓名：{{sname}}</p> <p>性别：{{sex}}</p> <p>年龄：{{age}}</p> <!-- <p>描述：{{show()}}</p>--> </div> </body> <script> //定义一个数据对象 var data = {sname:'李四',sex:'男',age:'12'} //指定操作的id new 一个vue var vm = new Vue({ el:'#app', //data 赋值给他 data:data }) //注意一下格式$,===很明显这是个判断 document.write(vm.$data === data) //true document.write('</br>') //这个验证告诉我们vm中获取的idapp跟doucoument获取的对象完全一致 document.write(vm.$el === document.getElementById('app')) // true </script>
效果
实例03----用 v-html 指令用于输出 html 代码
<body> <div id="app"> <div v-html="message"></div> </div> </body> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程不小心暴露了</h1>' } }) </script>
效果
实例03---- v-bind指令
<style> .class1{ background: #444; color: #eee; } </style> </head> <body> <div id="app"> <!--v-model绑定use--> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <!--通过指令绑定样式--> <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> </div> </body> <script> //这个位置是给app中的use对象赋值 new Vue({ el: '#app', data:{ use: true } }); </script>
效果点击checkbox切换背景颜色
扩展实例
<style> .cs01{ display:block; font-style: } a{ display: none; } </style> </head> <body> <div id="app"> <!--v-model绑定use--> 姓名：张三 <input type="checkbox" v-model="use01" id="r1">显示成绩：<a v-bind:class="{'cs01': use01}">语文：21；数学：32；英语 11</a> <br> 姓名：李四 <input type="checkbox" v-model="use02" id="r2">显示成绩：<a v-bind:class="{'cs01': use02}">语文：212；数学：32；英语 0</a> <br> 姓名：王五 <input type="checkbox" v-model="use03" id="r3">显示成绩：<a v-bind:class="{'cs01': use03}">语文：1；数学：2；英语 3</a> </div> </body> <script> new Vue({ el: '#app', data:{ use01: false, use02: false, use03: false } }); </script>
效果：点击哪个显示成绩显示哪个成绩的信息
实例04---- v-bind，集合
<body> <div id="app"> <!--v-HTML绑定标签--> <div v-html="message"></div> <!--绑定内容--> <a>{{mess}}</a> <!--绑定显示和隐藏，true false--> <p v-if="seen">现在你看到我了</p> <!--v-bind:href 绑定超链接--> <a v-bind:href="url">菜鸟教程</a> <!--翻转字符串的信息--> <p>{{checkmess}}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> </body> <script> new Vue({ el: '#app', //字段赋值的地方 data: { message: '<h1>菜鸟教程</h1>', mess:'李四', seen:true, url: 'http://www.runoob.com', checkmess:'1234567' }, methods: { reverseMessage: function () { this.checkmess = this.checkmess.split('').reverse().join('') } } }) </script>
实例05---v-if判断
<body> <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div> </body> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
实例06---v-if v-else v-else-if 这几个例子是用户输入信息显示相应的结果 view-show是隐藏和显示， v-if 是完全移除这个元素
<body> <div id="vApp"> 请输入本次成绩： <!--指定参数inp,用户输入的信息--> <input type="text" style="width: 100px;" v-model="inp"> <!--这是第一个判断默认隐藏，成绩在相应的范围内显示与隐藏--> <h2 v-if="inp>80">优秀😜</h2> <h2 v-else-if="inp>60 && inp<=80">良好😥</h2> <h2 v-else="inp<60 ">不及格😞</h2> <div v-if="inp>80"><h3>自由玩耍</h3></div> <div v-else-if="inp>60 && inp<=80"><h3>抄袭正确答案5遍</h3></div> <div v-else="inp<60 "><h3>抄袭正确答案10遍</h3></div> 请输入动物的名称： <!--这个第三个判断的例子用户输入动物的名称显示相应的图片--> <input type="text" style="width: 100px;" v-model="animal"><br><br> <img src="vue/大象.jpg" v-show="animal==='大象'"> <img src="vue/猴子.jpg" v-show="animal==='猴子'"> <img src="vue/老虎.jpg" v-show="animal==='老虎'"> <img src="vue/狮子.jpg" v-show="animal==='狮子'"> <img src="vue/松鼠.jpg" v-show="animal==='松鼠'"> </div> </body> <script> new Vue({ el: '#vApp', data: { inp: 0, animal:'' } }) </script>
效果
编译代码
实例06--- site in sites
<style> th{ width: 350px; } </style> </head> <div id="app"> <table border="1px;"> <tr> <th v-for="site in sites"> {{ site.name }}</th> </tr> <tr v-for="site in students"> <th v-for="site01 in site"> {{ site01.name }}</th> <th v-for="site01 in site"> {{ site01.class }}</th> <th v-for="site01 in site"> {{ site01.age }}</th> </tr> </table> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: '姓名' }, { name: '班级' }, { name: '年龄' } ] , students: [ { student:{name:'张三',class:'三年级一班',age:'10'} }, { student:{name:'张三',class:'三年级二班',age:'11'} }, { student:{name:'张三',class:'三年级三班',age:'12'} } ] } }) </script>
效果
实例07--- 监听属性 watch
<body> <div id="zhuanhuan"> 千米：<input type="text" width="100px;" v-model = "kio"> 米：<input type="text" width="100px;" v-model = "mio"> 厘米：<input type="text" width="100px;" v-model = "cm"> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#zhuanhuan', data:{ kio:0, mio:0, cm:0 }, watch:{ kio:function(val){ this.mio = this.kio* 1000; this.cm = this.mio* 100; }, mio:function(val){ this.cm = this.mio * 100; this.kio = this.mio/1000; }, cm:function(val){ this.mio = this.cm / 100; this.kio = this.mio / 1000; }, } }); </script>
效果
实例08---
Vue.js style(内联样式)
<body> <div id="app"> <button @click="++fontSize">+点击放大</button> <button @click="--fontSize">-点击缩小</button> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div> </body> <script> new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 20 } }) </script>
效果
