VUE学习笔记

最新推荐文章于 2022-11-04 19:34:55 发布

alexander137

最新推荐文章于 2022-11-04 19:34:55 发布

阅读量149

点赞数

文章标签：前端

<%-- Created by IntelliJ IDEA. User: zch276135 Date: 2018/4/2 Time: 14:33 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <title>$Title$</title> <style> .class1{ background: #444; color: #eee; } .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="lanmu1"> {{name}} 将状态值以html输出的方式输出 <div v-html="name"></div> </div> <div id="lanmu2"> {{getMoney()}}{{addProperty()}} {{extendPro.newPro}} </div> <div id="app"> <label for="r1" >修改颜色</label> <input type="checkbox" v-model="class1" id="r1"> <br><br> <%--样式绑定--%> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div> <%--class绑定--%> <div v-bind:class="[activeClass, errorClass]">后面的样式把前面的样式覆盖掉</div> 内联样式v-bind:style 可以使用数组将多个样式对象应用到一个元素上： <div v-bind:style="[style1, style2]">内联样式1还是2</div> Vue.js 都提供了完全的 JavaScript 表达式支持:  {{1+2}} {{ok?'yes':'no'}} {{message.split('').reverse().join(',')}} <%--这里， v-if 指令将根据表达式 ok 的值(true 或 false )来决定是否插入 p 元素。--%> <p v-if="ok">你看到我了,这是指令中带有 v- 前缀的特殊属性的用法</p> <p v-else-if="ok===false">你看不到我 ,v-else-if的用法</p> <p v-else>你看不到我 ,v-else的用法</p> <%--v-if与v-show的区别？在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。--%> <p v-show="ok===false">展示出来吧v-show方法,判断为false</p> <%--在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。--%> <a v-bind:href="url">请点击我到菜鸟教程</a> <%--按钮点击事件--%> <button v-on:click="dosomething()">点击我</button> <div></div> <button v-on:click="id+=1">有本事点击我,看看下面的数字会不会变</button> <div>{{id}}</div> <%--在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：--%> <div id="lanmu1"><input v-model="messageExchange"/>我叫{{name}}我想说{{messageExchange}}</div> <%--按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应--%> <div><button v-on:click="reverseMessage">反转以上输入框的数据</button></div> <%--Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示,--%> <div>过滤后的数据{{ messageExchange | capitalize }}</div> <%--v-for 指令需要以 site in personList 形式的特殊语法， personList 是源数据数组并且 site 是数组元素迭代的别名--%> <li v-for="site in personList"> {{site.name}} </li> <%--v-for键值对遍历--%> <li v-for="(value,key,index) in personMap"> 键:{{key}}  值:{{value}}  索引:{{index}} <%--当遍历list的时候,key就是索引值,只有两个参数--%> </li> </div> </body> <script type="text/javascript"> //属性 new Vue({ el:"#lanmu1", data:{ name:'zhangchaohong' } }); var data={ 'price':2, 'amount':11, 'extendPro':{ 'food':'香蕉' } } //带方法构造器 var view=new Vue({ el:"#lanmu2", data:data, methods:{ getMoney:function () { return '单价:'+this.price+'数量:'+this.amount+"总金额:"+this.price*this.amount; }, //新增属性 addProperty:function () { Vue.set(this.extendPro,'newPro','我是新增的属性'); } } }); view.price=3; //改变model中的状态值,视图也将会改变 view.$data.price=4;//通过$直接取Vue构造中的属性对象 //HTML 属性中的值应使用 v-bind 指令。以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类 var app=new Vue({ el:"#app", data:{ class1:false, ok: true, message: 'RUNOOB', id : 1, url: 'http://www.runoob.com', messageExchange:'zhangchaohong', personList:[{'name':'zhangsan'},{'name':'wangba'},{'name':'feizhu'}], personMap:{'name':'王八','sex':'男','身高':'170'}, activeClass: 'active', errorClass: 'text-danger', style1:{ fontColor:'red' }, style2:{ color:'green' } }, methods:{ dosomething:function () { console.log("按钮事件,你好像在点击什么"); }, // 反转字符串函数 reverseMessage: function () { this.messageExchange = this.messageExchange.split('').reverse().join('') } }, filters:{ capitalize:function (value) { console.log("过滤前的数据"+value); var result=value.charAt(0).toUpperCase()+value.slice(1); console.log("过滤后的结果"+result); return result; } } }); app.ok=false; // 监听事件$watch 是一个实例方法 app.$watch('class1', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 // document.getElementById ("app").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; console.log("app is show background",app.$data.class1); }) </script> </html>