vue2练习五个小例子笔记

多练习,多撸代码,多进步.

1.双向数据绑定

    
    
       
     
  
          
        
     
  
       
     
{
   {text_content}}
    

1. .stop这种用法是vue的一种语法糖,名叫,这里的是阻止单击事件冒泡

2. @这种也是一种vue的语法糖,名叫缩写,绑定事件的缩写

var demo = new Vue({  el: '#main',  data: {    show_tooltip: false, //给v-if判断使用的布尔值    text_content: 'Edit me.'  },  methods: {  //click绑定的事件    hideTooltip: function() {      this.show_tooltip = false; //this可以调用当前vue实例的内容,也就是说this指向当前vue实例的作用域    },    //true/false的切换,他们的切换会直接硬性v-if的判断,从而实现隐藏和出现的效果    toggleTooltip: function() {      this.show_tooltip = !this.show_tooltip;    }  }});

2.导航切换

    
    
         
     
You chose {
   {active}}
    

1. .prevent阻止默认事件,这里主要是为了阻止a标签的点击自动跳转或者刷新页面的默认事件

2. :是vue的缩写,v-bind的缩写

3. show 的更新将取决于数据属性 item.active 是否为真值,参考

4. makeActive(item, index)这个是最主要的,控制item的active属性

   • v-for是通过一个对象的属性来迭代的,items的key就是0123,value就是item对象,所以转换一下方便看,将key和vaule转为item和idnex

var vm = new Vue({    el:'#main',    data:{        active:'HTML',         items:[ //被遍历的数组            {name:'HTML', active:true}, //通过控制active的值(布尔值)来做一些处理,例如为true的时候show,为false的hide            {name:'CSS', active:false},            {name:'JavaScript', active:false},            {name:'Vue.js', active:false}        ]    },    methods: {        makeActive: function(item, index){ //使用传入的当前的v-for循环的遍历项和当前索引            this.active = item.name;         for(var i=0; i

参考

3.即时搜索

    
    
     
    
              
          
     
    
     
    
          
              
      
                        
{
   {a.title}}
        
    
     
    

new Vue({        el: '#main',        data: {            searchStr: "", //双向绑定的属性            articles: [                {                    "title": "What You Need To Know About CSS Variables",                    "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-100x100.jpg"                },                {                    "title": "Freebie: 4 Great Looking Pricing Tables",                    "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-100x100.jpg"                },                {                    "title": "20 Interesting JavaScript and CSS Libraries for February 2016",                    "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-100x100.jpg"                },                {                    "title": "Quick Tip: The Easiest Way To Make Responsive Headers",                    "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-100x100.png"                },                {                    "title": "Learn SQL In 20 Minutes",                    "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-100x100.png"                },                {                    "title": "Creating Your First Desktop App With HTML, JS and Electron",                    "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",                    "image": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-100x100.png"                }            ]        },        computed: { //使用计算属性            articles1: function () { //这个articles1就是计算属性                if(!this.searchStr){ //没有输入搜索项就不处理                    return false;                }                var s = this.searchStr.trim().toLowerCase();                //使用js的filter遍历循环,通过在这里处理循环之后然后返回处理好的数组给v-for进行处理                var result = this.articles.filter(function (item) {                    if (item.title.toLowerCase().indexOf(s) !== -1) {                        return item;                    }                });                return result;            }        }    });

例子使用vue1,然后jsfiddle已经升级了vue2了,vue2抛弃了大部分过滤器,所以无法运行(),在这里我稍微修改了一下,使用vue2写法来实现

4.布局切换

    
    
     
        
              
              
          
     
    
         
     
        
      
                    
    
     
    
     
        
      
                        
{
   {a.title}}
        
    
     
    

/*bar的icon用了base64的图*/    .bar a.list-icon{        background-image:url(data:image/png;base64,iVBORw0KGgXXXXXX);    }    .bar a.grid-icon{        background-image:url(data:image/png;base64,iVBORw0XXXXXXX);    }    /*grid和list两种布局的css都写好了,只要相对切换.gird或者.list就可以实现变化*/    ul.grid{        width: 570px;        margin: 0 auto;        text-align: left;    }    ul.grid li{        padding: 2px;        float:left;    }    ul.grid li img{        width:280px;        height:280px;        object-fit: cover;        display:block;        border:none;    }    ul.list{        width: 500px;        margin: 0 auto;        text-align: left;    }    ul.list li{        border-bottom: 1px solid #ddd;        padding: 10px;        overflow: hidden;    }    ul.list li img{        width:120px;        height:120px;        float:left;        border:none;    }    ul.list li p{        margin-left: 135px;        font-weight: bold;        color:#6e7a7f;    }

var demo = new Vue({        el: '#main',        data: {            layout: 'grid',            articles: [{                "title": "What You Need To Know About CSS Variables",                "url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",                "image": {                    "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables.jpg",                    "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/03/css-variables-150x150.jpg"                }            },                {                    "title": "Freebie: 4 Great Looking Pricing Tables",                    "url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",                    "image": {                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables.jpg",                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/great-looking-pricing-tables-150x150.jpg"                    }                },                {                    "title": "20 Interesting JavaScript and CSS Libraries for February 2016",                    "url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",                    "image": {                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february.jpg",                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/interesting-resources-february-150x150.jpg"                    }                },                {                    "title": "Quick Tip: The Easiest Way To Make Responsive Headers",                    "url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",                    "image": {                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers.png",                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/02/quick-tip-responsive-headers-150x150.png"                    }                },                {                    "title": "Learn SQL In 20 Minutes",                    "url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",                    "image": {                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes.png",                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2016/01/learn-sql-20-minutes-150x150.png"                    }                },                {                    "title": "Creating Your First Desktop App With HTML, JS and Electron",                    "url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",                    "image": {                        "large": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron.png",                        "small": "http://cdn.tutorialzine.com/wp-content/uploads/2015/12/creating-your-first-desktop-app-with-electron-150x150.png"                    }                }]        }    });

5.合计总价

    
    
     
Services
    
     
        
              
              
      
{
   {item.name}}{
   {item.price.toFixed(2)}}
    
     
    
         
     
Total: {
   {total()}}
    

依然修改了vue2的filter的使用

var demo = new Vue({        el: '#main',        data: {            items: [                {                    name: 'Web Development',                    price: 300,                    active:false                },{                    name: 'Design',                    price: 400,                    active:false                },{                    name: 'Integration',                    price: 250,                    active:false                },{                    name: 'Training',                    price: 220,                    active:false                }            ]        },        methods: {            toggleActive: function(i){                i.active = !i.active; //简单的写法切换true/false            },            total: function(){                var total = 0;                this.items.forEach(function(s){ //用js的forEach遍历数组                    if (s.active){ //只要判断active才会处理计算                        total+= s.price;                    }                });                return total.toFixed(2);//将currency filter的写法更换            }        }    });

参考引用: