VUE学习小结

时间 2019-11-09

标签 vue 学习小结繁體版

原文原文链接

构造VUE实例

new VUE({javascript

　　el:'选择器',css

　　data:{html

　　　　k1:v1,vue

　　　　k2:v2,java

　　　　...json

　　},数组

　　methods:{dom

　　　　method1(){函数

　　　　　　...ui

　　　　method2(){

　　　　　　...

　　　　}

})

说明：

VUE构造函数的参数是一个json对象，它主要有3个键：

el表示数据在什么元素内有效，它的值是一个选择器，能够是id选择器，也能够是类选择器，不能是body。

data显示就是数据，是一个json格式，在html双标签内引用如：<h1>{{k1}}</h1>

methods一般定义响应事件的方法，做为html元素的属性引用如：<button @click="method1">肯定</button>，@click是v-on:click的缩写。

v-bind

v-bind:class="{样式名:data中布尔型的变量}"

如：v-bind:class="{active:isActive}

说明：active是css样式名(.active)，isActive是data中的一个bool型变量，若是它的值为true，则采用.active样式，不然就不采用。

扩展：

　　（1）v-bind:class="{ active: isActive, 'text-danger': hasError }"

　　（2）v-bind:class="classObject" //classObject={ active: isActive, 'text-danger': hasError }

v-bind:class="表达式"

如：v-bind:class="isRed?'red':'green'"

说明：主要根据data中的isRed的值（true仍是false）来选择css样式，true的话就采用‘red’，‘false’的话就采用‘green’。'red'和'green'是CSS类选择器的名字，分别是“.red”和“.green”。

v-bind:style="{属性1:值1,属性2:值2}"

如：v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

说明：值1activeColor和值2fontSize是Data中的键。

综合实例：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style type="text/css">
            .red {
                background: red;
            }
            
            .blue {
                background: blue;
            }
            
            .green {
                background: green;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">标题</h1>
        </header>
        <div class="mui-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" v-for="(room,index) in rooms" :class="colors[room.status]">
                    <h4>{{room.id}}</h4>
                    <p>{{index}}</p>
                    <p>
                        {{room.status}}
                    </p>
                    <button type="button" class="mui-btn mui-btn-purple" @click="del(index)">删除</button>
                </li>
            </ul>
            <div :class="isRed?'red':'green'" style="height: 50px;margin-top: 10px;">
                <a @click="isRed=!isRed">vip</a>
            </div>
            <form class="mui-input-group" style="margin-top: 10px;">
                <div class="mui-input-row">
                    <label for="">房号：</label>
                    <input type="text" v-model="id" />
                </div>
                <div class="mui-input-row">
                    <label for="">状态：</label>
                    <select name="" id="" v-model="status">
                        <option value="未到店">未到店</option>
                        <option value="已到店">已到店</option>
                        <option value="消费中">消费中</option>
                    </select>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" @click="add2">添加</button>
                    <button type="reset" class="mui-btn mui-btn-danger">取消</button>
                </div>
            </form>
        </div>

        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            mui.init();
            var rooms = [{
                    id: '1001',
                    status: '未到店'
                },
                {
                    id: '1002',
                    status: '已到店'
                },
                {
                    id: '1003',
                    status: '消费中'
                },
            ];

            var vm = new Vue({
                el: '.mui-content',
                data: {
                    id: '',
                    status: '未到店',
                    isRed: true,
                    rooms: rooms,
                    colors: {
                        '未到店': 'red',
                        '已到店': 'blue',
                        '消费中': 'green'
                    }
                },
                methods: {
                    add1() {
                        var max_id = parseInt(this.rooms[0].id);
                        for(var i = 0; i < this.rooms.length; i++) {
                            if(this.rooms[i].id > max_id) {
                                max_id = this.rooms[i].id;
                            }
                        }
                        var new_id = parseInt(max_id) + 1;
                        var statusArr = ['未到店', '已到店', '消费中'];
                        var new_index = Math.round(Math.random() * 10) % 3;
                        console.log(new_index);
                        var new_status = statusArr[new_index];
                        this.rooms.push({
                            id: new_id,
                            status: new_status
                        });
                    },
                    add2() {
                        this.rooms.push({
                            id: this.id,
                            status: this.status
                        });
                    },
                    del(index){
                        this.rooms.splice(index,1);
                    }
                }

            })
        </script>
    </body>

</html>

v-model

文本框

如：<input type="text" v-model="var1">

说明：表单控件的双向绑定，内存变量var1的值能够改变控件的值（value），同时value也可改变内存变量var1的值。

单选按纽

<p>您的性别是：{{sex}}</p>

复选框

<hr />

<input type="checkbox" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br />

<input type="checkbox" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br />

<p>你选择的是：{{games}}</p>

列表

</select>

<p>你选择的小说是： {{story}}</p>

综合实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
            <h2>文本框</h2>
            <input type="text" v-model="txt" />
            <p>你输入的内容是：{{txt}}</p>
            <h2>单选按纽</h2>
            <input type="radio" name="" id="" value="男" v-model="sex"/><label for="">男</label>&nbsp;&nbsp;
            <input type="radio" name="" id="" value="女" v-model="sex"/><label for="">女</label>
            <p>您的性别是：{{sex}}</p>
            <h2>复选框</h2>
            <input type="checkbox" name="" id="" value="" v-model="like"/><label for="">喜欢游戏?{{like}}</label><br />
            <hr />
            <input type="checkbox" name="" id="" value="StarCraft" v-model="games"/><label for="">StarCraft</label><br />
            <input type="checkbox" name="" id="" value="WarCraft" v-model="games"/><label for="">WarCraft</label><br />
            <input type="checkbox" name="" id="" value="FIFA" v-model="games"/><label for="">FIFA</label>
            <p>你选择的是：{{games}}</p>
            <h2>Select列表</h2>
            <select name="" v-model="story">
                <option value="">--选择--</option>
                <option value="三国演义">三国演义</option>
                <option value="水浒传">水浒传</option>
                <option value="西游记">西游记</option>
                <option value="红楼梦">红楼梦</option>
            </select>
            <p>你选择的小说是： {{story}}</p>
            
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:'.container',
                data:{
                    txt:'haha',
                    sex:'男',
                    like:true,
                    games:[],
                    story:''
                }
            })
        </script>
    </body>
</html>

vue动态添加响应式属性

注意：只有Vue实例被建立时data中存在的属性才是响应式的，后来新增的属性不会触发任何的视图更新的，你能够将后来要增长的属性先添加到data中，并设置其初值，好比：0、''、null。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<div id="div1">
            姓名：{{name}} <br />
            年龄：{{age}} <br />
            <button @click="setAge1()">设置年龄</button>
        </div>-->
          <!--
              对于已经建立的实例，Vue 不能动态添加根级别的响应式属性。
              可是，能够使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
          -->
         
        <div id="div2">
            姓名：{{player.name}} <br />
            年龄：{{player.age}} <br />
            球队：{{player.club}} <br />
            年龄：{{player.no}} <br />
            <button @click="addProperty()">动态添加属性</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
//            var vm1=new Vue({
//                el:'#div1',
//                data:{
//                    name:'michael'
//                },
//                methods:{
//                    setAge1:function  () {
//                        vm1.age=41;//在Vue实例建立后，没法data中直接添加根属性，但能够在已存在的根属性中动态添加新属性，也不能直接添加，应该使用Vue.set(vm2.player,'age',41)这种方式来添加

 // } // } // }) 
　　
　　　　　　　　var vm2=new Vue({
　　　　　　　　　　 el:'#div2', 
　　　　　　　　　　data:{ player:{ name:'kobe' } }, 
　　　　　　　　　　methods:{ addProperty:function () 
　　　　　　　　　　　　　　　　{ 
　　　　　　　　　　　　　　　　　　//vm2.player.age=41;//这种添加属性，视图不会更新。  
　　　　　　　　　　　　　　　　　　Vue.set(vm2.player,'age',41);//动态添加一个属性  
　　　　　　　　　　　　　　　　　　vm2.player=Object.assign({},vm2.player,{club:'chicago',no:23});//动态添加多个属性  
　　　　　　　　　　　　　　　　} 
　　　　　　　　　　　　　　　} 
　　　　　　　　　}) 

　　　　　　</script> 
　　
　　</body> 

</html>

1. vue 学习小结
2. Vue学习小结
3. Vue学习开发小结
4. Vue学习笔记——Vue我的小结
5. vue 学习小结送给新手
6. vue 学习小记
7. 小白学习Vue
8. vue学习小记
9. Vue学习总结
10. vue学习总结
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议