vue2练习五个小例子笔记

https://segmentfault.com/a/1190000008436978主题 Vue.jsvue2练习五个小例子笔记多练习,多撸代码,多进步.基于vue21.双向数据绑定div id="main" @click="hideTooltip">div class="tooltip" v-if="show_tooltip" @c

打杂人

6241人浏览 · 2017-02-22 14:06:28

打杂人 · 2017-02-22 14:06:28 发布

https://segmentfault.com/a/1190000008436978

主题 Vue.js

vue2练习五个小例子笔记

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

基于vue2

1.双向数据绑定

<!--vue实例上绑定click事件hideTooltip-->
<div id="main" @click="hideTooltip">
<!--v-if判断show_tooltip,为true则显示,并且绑定了一个阻止单击事件冒泡-->
  <div class="tooltip" v-if="show_tooltip" @click.stop>
  <!--用v-modal绑定了text_content,能够双向更新数据-->
    <input type="text" v-model="text_content" />
  </div>
  <!--因为双向绑定的关系,所以这里可以一边输入,一边输出内容-->
  <p @click.stop="toggleTooltip">{{text_content}}</p>
</div>

.stop 这种用法是vue的一种语法糖,名叫事件修饰符 ,这里的是阻止单击事件冒泡
@ 这种也是一种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;
    }
  }
});

demo

2.导航切换

<div id="main">
    <nav @click.prevent>
    <!--v-for遍历输出内容,并且绑定了class-->
        <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
    </nav>
    <p>You chose <b>{{active}}</b></p>
</div>

.prevent 阻止默认事件,这里主要是为了阻止a标签的点击自动跳转或者刷新页面的默认事件
: 是vue的缩写,v-bind的缩写
show 的更新将取决于数据属性 item.active 是否为真值,参考绑定class
makeActive(item, $index) 这个是最主要的,控制item的active属性,并且能够传入 $index ,这个是特殊值,是指vue的v-for的遍历的当前索引

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<this.items.length;i++){//将所有item设置为false
            this.items[i].active = false;
        }
        this.items[index].active = true;//然后单独设置选中的item为true
        }
    }
});

3.即时搜索

<div id="main">
    <div class="bar">
    <!--v-modal的双向绑定-->
        <input type="text" v-model="searchStr" placeholder="Enter your search terms"/>
    </div>
    <ul>
    <!--这里使用了articles1来做特别标志,证明这个计算属性不是在data里面的,而是通过计算出来的-->
    <!--通过遍历计算属性articles1来输出需要的信息-->
        <li v-for="a in articles1">
            <a :href="a.url"><img :src="a.image"/></a>
            <p>{{a.title}}</p>
        </li>
    </ul>
</div>

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;
            }
        }
    });

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

4.布局切换

<div id="main">
    <div class="bar">
        <!--v-bind绑定class的用法,并且通过click改变layout属性-->
        <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
        <a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
    </div>
    <!--v-if判断layout属性的变化来切换显示-->
    <ul v-if="layout == 'grid'" class="grid">
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
        </li>
    </ul>
    <ul v-if="layout == 'list'" class="list">
        <li v-for="a in articles">
            <a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
            <p>{{a.title}}</p>
        </li>
    </ul>
</div>

/*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"
                    }
                }]

        }
    });

demo

5.合计总价

<div id="main" v-cloak>
    <h1>Services</h1>
    <ul>
        <!--v-for遍历,绑定click监听,切换active-->
        <!--将currency filter的写法更换为toFixed-->
        <li v-for="item in items" @click="toggleActive(item)" :class="{'active':item.active}">{{item.name}}<span>{{item.price.toFixed(2)}}</span></li>
    </ul>
    <!--这里注意的是直接使用vue的方法的写法-->
    <p>Total: <span>{{total()}}</span></p>
</div>

依然修改了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的写法更换
            }
        }
    });

demo

参考引用:

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

打杂人

@aerchi

已为社区贡献9条内容