vue 02
Posted xmf3628
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 02相关的知识，希望对你有一定的参考价值。
1.模板语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> <style type="text/css"> .cl font-size: 30px; color: red; </style> </head> <body> <div id="app"> <h1>插值ts</h1> <div> <ul> <li> <h2>1.文本</h2> </li> <li>msg</li> <li> <h2>2.html </h2> </li> <li v-html=‘html‘></li> <li> <h2>3.属性</h2> </li> <li v-bind:class="cl">hello</li> <li> <h2>4.表达式</h2> </li> <li> <div> str.substr(0,6).toUpperCase()</div> <div> number + 1 </div> <div> ok ? ‘YES‘ : ‘NO‘ </div> <input type="text" v-bind:id="‘bookname-‘ + id" /> </li> </ul> </div> </div> <script> var vm = new Vue( el: "#app", data: ts: new Date().getTime(), msg: "hello", html: "<input type=‘text‘ value=‘hello‘/>", cl: ‘cl‘, str: "hello,vue", number:10, ok:true, id:"bookname", ); </script> </body> </html>
2.基础指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h1>指令ts</h1> <h2>1.v-if/v-else/v-else-if</h2> <div v-if="sex==‘boy‘"> 男 </div> <div v-else-if="sex=‘gry‘"> 女 </div> <div v-else> 动物 </div> <h2>2.v-show</h2> <input type="checkbox" v-model="show"> <div v-show="show"> show=true </div> <h2>3.v-bind|v-for</h2> <div v-for="dept in tity"> id=dept.id,name=dept.name <br /> </div> <div> <select> <option value="">------</option> <option v-for="dept in tity" v-bind:value="dept.id"> dept.name </option> </select> </div> <h2>4.v-on|v-model|v-for</h2> <div v-for="(dept,i) in tity"> i <input type="checkbox" v-bind:value="dept.id" v-model="did" />dept.name </div> <button @click="doclick">获取部门信息</button> <h2>5.参数值href</h2> <a v-bind:href="url">百度</a> <h2>6.动态参数</h2> <a v-bind:[attrname]="url">百度</a> <a v-on:[evname]="doclick">有种点我</a> <h2>7.简写</h2> <button @click="doclick">获取部门信息</button> <a :href="url">百度</a> </div> <script> var vm = new Vue( el: "#app", data: ts: new Date().getTime(), sex: ‘boy‘, show: false, tity: [ id: 1, name: ‘研发部‘ , id: 2, name: ‘测试部‘ , id: 3, name: ‘销售部‘ ], did: [], url: ‘http://www.baidu.com‘, attrname: ‘href‘, evname: ‘click‘ , methods: doclick() console.log(vm.did); ); </script> </body> </html>
3.过滤器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> <script src="js/date.js"></script> </head> <body> <div id="app"> <h1>过滤器（全局和过滤）ts</h1> <h2>1.局部过滤器</h2> <div>name</div> <div>name|cap</div> <h2>2.全局过滤器</h2> <div>date</div> <div>date|formDate</div> </div> <script> //全局过滤器 Vue.filter(‘formDate‘,function(v) return fmtDate(v,‘yyyy年mm月dd日‘); ); var vm = new Vue( el: "#app", data: ts: new Date().getTime(), name:‘tomcat‘, date:new Date() , filters://局部过滤器 cap:function(v) return v.substr(0,1).toUpperCase()+v.substr(1); ); </script> </body> </html>
4.计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 价格 <input type="text" v-model="price"> 数量<input type="text" v-model="avi"> 总价 sums <h1>计算属性 computed ts</h1> <div v-for="s in results"> s.coure<input type="text" :value="s.score"> </div> <div>总分：sum</div> </div> <script> var vm = new Vue( el: "#app", data: ts: new Date().getTime(), results: [ course: ‘语文‘, score: ‘100‘ , course: ‘数学‘, score: ‘90‘ , course: ‘外语‘, score: ‘94‘ , course: ‘地理‘, score: ‘54‘ ], price:10, avi:1, , computed: sum:function()//计算属性 let s=0; //var和let的 区别？ //let:ES6新增特性,可以声明块级作用域(局部变量) //var 全局变量定义,容易产生数据污染 for (var i = 0; i <this.results.length; i++) s+=parseInt(this.results[i].score); return s; , sums:function() return this.price*this.avi; ); </script> </body> </html>
5.监听数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div> km: <input type="text" v-model="km"> m: <input type="text" v-model="m"> </div> </div> <script> var vm = new Vue( el: "#app", data: ts: new Date().getTime(), km:1, m:1000 , watch: km:function(v) this.m=parseInt(v)*1000; , m:function(v) this.km=parseInt(v)/1000; ); </script> </body> </html>
以上是关于vue 02的主要内容，如果未能解决你的问题，请参考以下文章