1.模板语法
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>title><script src&＃61;"js/vue.js">script><style type&＃61;"text/css">.cl {font-size: 30px;color: red;}style>head><body><div id&＃61;"app"><h1>插值{{ts}}h1><div><ul><li><h2>1.文本h2>li><li>{{msg}}li><li><h2>2.htmlh2>li><li v-html&＃61;&＃39;html&＃39;>li><li><h2>3.属性h2>li><li v-bind:class&＃61;"cl">helloli><li><h2>4.表达式h2>li><li><div> {{str.substr(0,6).toUpperCase()}}div><div> {{ number &＃43; 1 }}div><div> {{ ok ? &＃39;YES&＃39; : &＃39;NO&＃39; }}div><input type&＃61;"text" v-bind:id&＃61;"&＃39;bookname-&＃39; &＃43; id" />li>ul>div>div><script>var vm &＃61; new Vue({el: "#app",data: {ts: new Date().getTime(),msg: "hello",html: "",cl: &＃39;cl&＃39;,str: "hello,vue",number:10,ok:true,id:"bookname",}});script>body>
html>
2.基础指令
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>title><script src&＃61;"js/vue.js">script>head><body><div id&＃61;"app"><h1>指令{{ts}}h1><h2>1.v-if/v-else/v-else-ifh2><div v-if&＃61;"sex&＃61;&＃61;&＃39;boy&＃39;">男div><div v-else-if&＃61;"sex&＃61;&＃39;gry&＃39;">女div><div v-else>动物div><h2>2.v-showh2><input type&＃61;"checkbox" v-model&＃61;"show"><div v-show&＃61;"show">show&＃61;truediv><h2>3.v-bind|v-forh2><div v-for&＃61;"dept in tity">id&＃61;{{dept.id}},name&＃61;{{dept.name}} <br />div><div><select><option value&＃61;"">------option><option v-for&＃61;"dept in tity" v-bind:value&＃61;"dept.id">{{dept.name}}option>select>div><h2>4.v-on|v-model|v-forh2><div v-for&＃61;"(dept,i) in tity">{{i}} <input type&＃61;"checkbox" v-bind:value&＃61;"dept.id" v-model&＃61;"did" />{{dept.name}}div><button &＃64;click&＃61;"doclick">获取部门信息button><h2>5.参数值hrefh2><a v-bind:href&＃61;"url">百度a><h2>6.动态参数h2><a v-bind:[attrname]&＃61;"url">百度a><a v-on:[evname]&＃61;"doclick">有种点我a><h2>7.简写h2><button &＃64;click&＃61;"doclick">获取部门信息button><a :href&＃61;"url">百度a>div><script>var vm &＃61; new Vue({el: "#app",data: {ts: new Date().getTime(),sex: &＃39;boy&＃39;,show: false,tity: [{id: 1,name: &＃39;研发部&＃39;},{id: 2,name: &＃39;测试部&＃39;},{id: 3,name: &＃39;销售部&＃39;}],did: [],url: &＃39;http://www.baidu.com&＃39;,attrname: &＃39;href&＃39;,evname: &＃39;click&＃39;},methods: {doclick() {console.log(vm.did);}}});script>body>
html>
3.过滤器
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>title><script src&＃61;"js/vue.js">script><script src&＃61;"js/date.js">script>head><body><div id&＃61;"app"><h1>过滤器&＃xff08;全局和过滤&＃xff09;{{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(&＃39;formDate&＃39;,function(v){return fmtDate(v,&＃39;yyyy年mm月dd日&＃39;);});var vm &＃61; new Vue({el: "#app",data: {ts: new Date().getTime(),name:&＃39;tomcat&＃39;,date:new Date()},filters:{//局部过滤器
cap:function(v){return v.substr(0,1).toUpperCase()&＃43;v.substr(1);}}});script>body>
html>
4.计算属性
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>title><script src&＃61;"js/vue.js">script>head><body><div id&＃61;"app">价格 <input type&＃61;"text" v-model&＃61;"price">数量<input type&＃61;"text" v-model&＃61;"avi"> 总价 {{sums}}<h1>计算属性 computed {{ts}}h1><div v-for&＃61;"s in results">{{s.coure}}<input type&＃61;"text" :value&＃61;"s.score">div><div>总分&＃xff1a;{{sum}}div>div><script>var vm &＃61; new Vue({el: "#app",data: {ts: new Date().getTime(),results: [{course: &＃39;语文&＃39;,score: &＃39;100&＃39;},{course: &＃39;数学&＃39;,score: &＃39;90&＃39;},{course: &＃39;外语&＃39;,score: &＃39;94&＃39;},{course: &＃39;地理&＃39;,score: &＃39;54&＃39;}],price:10,avi:1,},computed:{sum:function(){//计算属性
let s&＃61;0;//var和let的 区别&＃xff1f;//let:ES6新增特性,可以声明块级作用域(局部变量)//var 全局变量定义,容易产生数据污染for (var i &＃61; 0; i <this.results.length; i&＃43;&＃43;) {s&＃43;&＃61;parseInt(this.results[i].score);}return s;},sums:function(){return this.price*this.avi;}}});script>body>
html>
5.监听数据
DOCTYPE html>
<html><head><meta charset&＃61;"utf-8" /><title>title><script src&＃61;"js/vue.js">script>head><body><div id&＃61;"app"><div>km: <input type&＃61;"text" v-model&＃61;"km">m: <input type&＃61;"text" v-model&＃61;"m">div>div><script>var vm &＃61; new Vue({el: "#app",data: {ts: new Date().getTime(),km:1,m:1000},watch:{km:function(v){this.m&＃61;parseInt(v)*1000;},m:function(v){this.km&＃61;parseInt(v)/1000;
}}});script>body>
html>
京公网安备 11010802041100号