vue入门（一）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>hello-vue</title>
    </head>

    <body>
        <div id="app">
            姓： <input type="text" name="" id="" value="" v-model="firstName" />
            <hr />
            名： <input type="text" name="" id="" value="" v-model="lastName" />
            <hr />
            结果：{{firstName + lastName}}
            <hr />
            <h1>管理食物</h1>
            <div class="">
                <span>添加食物:</span>                
                    <input @keyup.enter="add" v-model="text" placeholder="What food?" autofocus="autofocus"/>
            </div>
            <ul>
                <li v-for="food in foods">
                    <input type="checkbox" name="" id="" value="" v-model="food.complate"/>
                    {{ food.text }}
                    <button @click="destroy(food.text)">删除</button>
                </li>
            </ul>
        </div>
        
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <!--引进vue.js，当前环境就会多出一个Vue全局变量-->
        <script type="text/javascript">
            (function(window){
                foods = [{text:'辣条',complate:true},{text:'香蕉',complate:false},{text:'苹果',complate:true}];
                var app = new Vue({
                    el: '#app',
                    data: {
                        firstName: 'hu',
                        lastName: 'sheng',
                        foods: foods,
                        text:''
                    },
                    methods:{
                        f:function(){
                            window.alert("aa");
                        },
                        add:function(){
                            if(this.text.trim().length === 0){
                                return
                            }
                            this.foods.push({
                                text:this.text,
                                complate:false
                            });
                            this.text = '';
                        },
                        destroy:function(text){
                            console.log(text);
                            var foodIndex;
                            this.foods.find(function(food,index){
                                if(food.text===text){
                                    foodIndex = index;
                                }
                            });
                            this.foods.splice(foodIndex,1);
                        }
                    }
                });
            })(window);
        </script>
    </body>
<!--
    笔记：
    1，v-on:可以简写为@
    
-->
</html>

vue入门（一）

古月生

引用和评论

js操作时间（持续更新）

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据