Vue01 基础

Vue基本使用

 

Vue的基本使用步骤
1. 需要提供标签用于填充数据
2. 引入vue.js 库·文件
3. 可以使用vue的语法做功能了
4. 把vue提供的数据填充到标签里面

 

v-cloak 指令的用法（解决vue刷新闪动问题）

① 提供样式
[v-cloak]{display:none;}

② 在插值表达式所在德标签中添加v-cloak指令

背后的原理：先通过样式隐藏内容，然后在内存中进行值得替换，替换好之后再显示最终的结果

 

1.参数分析

· el: 元素的挂载位置（值可以是css选择器或者DOM元素）

· data: 模型数据（值是一个对象）

var vm = new Vue(
                {
                    el : '#app',
                    data :{
                        msg : 'Hello word!',
                        msg1 :'<h1>这里是v-html内容</h1>'
                    }
                }
            );

 

2.插值表达式

 

· 将数据填充到HTML标签中

· 插值表达式支持基本的计算操作

<div>{{msg}}</div>

 

3.指令

 

· v-text 填充纯文本

① 相比插值表达式更加简洁

· v-html 填充HEML片段

① 存在安全问题

② 本网站内部数据可以使用，来自第三方的数据不可以用

· v-pre 填充原始信息

① 显示原始信息，跳过编译过程（分析编译过程）直接显示{{msg}}

<div id="app" v-cloak>
            <div>
                {{msg}}
            </div>
            <div v-text="msg">
                
            </div>
            <div v-html="msg1">
                
            </div>
            <div v-pre>
                {{msg}}
            </div>
            <input type="text" v-model="msg" />
        </div>
        <script type="text/javascript" src="../js/vue.js">
            
        </script>
        <script type="text/javascript">
            var vm = new Vue(
                {
                    el : '#app',
                    data :{
                        msg : 'Hello word!',
                        msg1 :'<h1>这里是v-html内容</h1>'
                    }
                }
            );
        </script>

 

4.数据响应式

 

· 如何理解响应式

① html5中的响应式（屏幕尺寸的变化导致样式的变化）

② 数据的响应式（数据的变化导致页面内容的变化）

 

·  什么是数据绑定

① 数据绑定：将数据填充到标签中

 

· v-once 只编译一次

① 显示内容之后不再具有响应式功能

5.双向数据绑定

 

·v-model指令用法

<input type="text" v-model="msg" />

var vm = new Vue(
                {
                    el : '#app',
                    data :{
                        msg : 'Hello word!',
                        msg1 :'<h1>这里是v-html内容</h1>'
                    }
                }
            );

 

MVVM 设计思想

 

① M (model)

② v (view)

③ VM (View - Model)

 

 

6.事件绑定

 

6.1 Vue如何处理事件？

 

· v-on 指令用法

<button v-on:click="handle">点击</button>    

<button @click="handle">点击</button>    

 

6.2 事件函数的调用方式

 

· 直接绑定函数名称

<div id="app">
            <div>
            {{num}}
            </div>
            <button @click="handle">点击</button>    
        </div>

var vm2 = new Vue(
                {
                    el:'#app',
                    data:{
                        num : '0'
                    },
                methods:{
                    handle:function(){
                        this.num++;
                    }
                }
                
            });

· 调用函数

 函数加（）

6.3 事件函数参数传递

 

· 普通参数和事件对象

<div id="app">
            <div>
                {{num}}
            </div>
            <button @click="handle1">点击1</button>
        <button @click="handle2(123,456,$event)">点击2</button>
        </div>

<script type="text/javascript" src="../js/vue.js">    
        </script>
        <script type="text/javascript">
            /*
             事件绑定-参数传递
             1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
             2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
             */
            var vm = new Vue({
                el:('#app'),
                data:{
                    msg:'Hello world',
                    num:0
                },
                methods:{
                    handle1:function(){
                        this.num++;
                    },
                    handle2:function(p,p1,event){
                        console.log(event.target.innerHTML)
                        this.num++;
                    }
                }
            });
        </script>

 

6.4 事件修饰符

 

· .stop阻止冒泡

· .prevent阻止默认行为

 

6.5 按键修饰符

 

 

<div id="app">
            <form action="" method="post">
                <input type="text" v-on:keyup.delete="clearContent" v-model="uname" />
                <input type="password" v-on:keyup.enter="handle" v-model="pwd" />
                <input type="button" value="点击" v-on:click="handle"/>
            </form>
        </div>

<script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    uname : '',
                    pwd : ''
                },
                methods:{
                    clearContent:function(){
                        //按delete键的时候 清空用户名
                        this.uname = '';
                    },
                    handle:function(){
                        console.log(this.uname,this.pwd);
                    }
                }
            });
        </script>

简单计算器 案例

<body>
        <div id="app">
            <h1>简单计算器</h1>
            数值A <input type="text" v-model="numa" /> <br />
            数值B <input type="text" v-model="numb" v-on:keyup.enter="count" /><br />
            <input type="button" v-on:click="count" value="计算" /><br />
            计算结果 <span v-text="ct"></span>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    numa : '',
                    numb : '',
                    ct :'',
                    
                },
                methods:{
                    count:function(){
                        this.ct = parseInt(this.numa) + parseInt(this.numb);
                    }
                }
            })
        </script>
    </body>

 

6.6  自定义按键修饰符 

<div id="app">
        <input type="text" v-model='uname' v-on:keyup.aaa='handle'>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //自定义按键修饰符
        //规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
        Vue.config.keyCodes.aaa = 65;
        var vm = new Vue({
            el:'#app',
            data:{
                uname:''
            },
            methods:{
                handle:function(event){
                    console.log(event.keyCode)    
                }
            }
        })
    </script>

 

7.属性绑定

7.1 Vue如何动态处理属性

 

· v-bind使用

 

<div id="app">
            <a v-bind:href="url">百度</a>
            <a :href="url">百度</a>
        </div>

<script type="text/javascript" src="../js/vue.js">
            
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    url:'http://www.baidu.com',
                }
            })
        </script>

 

8样式绑定

8.1class样式处理

 

· 对象语法

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .active{
                border: 1px solid red;
                background: orange;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="{active:isActive}">
                样式绑定测试
            </div>
            <button v-on:click="handle">切换</button>
        </div>
        <script type="text/javascript" src="../js/vue.js">
            
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    isActive:true,
                },
                methods:{
                    handle:function(){
                        this.isActive = !this.isActive;
                    }
                }
            })
        </script>
    </body>
</html>

 

· 数组语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .active{
                border: 1px solid red;
                background: orange;
                width: 100px;
                height: 100px;
            }
            .error{
                color: white;
                font: bold;
            }
            .test{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="[activeClass,errorClass,{test:isTest}]">样式绑定测试</div>
            <div v-bind:class="arrClasses">样式数组绑定测试</div>
            <div v-bind:class="objClasses">样式对象测试</div>
            <button v-on:click="handle">切换</button>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
                 样式绑定相关语法细节
                 1、对象绑定和数组绑定可以结合使用
                 2、class绑定的值可以简化操作
                 3、默认的class如何处理？默认的class会保留
             */
            var vm = new Vue({
                el:'#app',
                data:{
                    activeClass:'active',
                    errorClass:'error',
                    isTest:true,
                    arrClasses:['active','error'],
                    objClasses:{
                        active:true,
                        error:true
                    }
                },
                methods:{
                    handle:function(){
                        this.activeClass='';
                        this.errorClass='';
                        this.isTest=!this.isTest;
                        this.objClasses.active = false;
                    }
                }
            })
        </script>
    </body>
</html>

 

8.2style样式处理

 

· 对象语法

· 数组语法

 

9.分支循环结构

 

9.1分支结构

 

·v-if

·v-else

·v-else-if

·v-show

 

<body>
        <div id="app">
            <div v-if="score>=90">优秀</div>
            <div v-else-if="score>=80&&score<90">良好</div>
            <div v-else="score<80">一般</div>
            <div v-show="flag">
                v-show测试
            </div>
            <button v-on:click="handle">切换</button>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    score:90,
                    flag:true,
                },
                methods:{
                    handle:function(){
                        this.flag=!this.flag;
                    }
                }
            })
        </script>
    </body>

 

9.2 v-if与v-show的区别

 

·v-if控制元素是否渲染到页面

·v-show控制元素是否显示（已经渲染到了页面）

9.3循环结构

 

·v-for遍历数组

·key的作用：帮助Vue区分不同的元素，从而提高性能

 

<div id="app">
            <ul>
                <li v-for="item in fruits">{{item}}</li>
            </ul>
            <ul>
                <li :key='index' v-for="(item,index) in myFruits">
                    <span>
                        {{index + '-----' + item.ename}}
                    </span>
                    <span>
                        {{item.cname}}
                    </span>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    fruits:['apple','orange','banana'],
                    myFruits:[{
                        ename:'apple',
                        cname:'苹果'
                    },{
                        ename:'orange',
                        cname:'橘子'
                    },{
                        ename:'banana',
                        cname:'香蕉'
                    }]
                }
            })
        </script>

Tab选项卡案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .tab ul li{
                float: left;
                width: 100px;
                height: 30px;
                border: 1px solid blue;
                list-style: none;
                text-align: center;
                cursor: hand;
            }
            .tab div{display: none;}
            .active{ background: orange;}
            .tab img{width: 400px; height: 300px; border: 1px solid darkgoldenrod;}
            .tab div.current{clear:both;display: block;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="tab">
                <ul>
                    <li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key='item.id' v-for="(item,index) in list">{{item.title}}</li>
                </ul>
                <div :class="currentIndex==index?'current':''" :key='item.id' v-for="(item,index) in list">
                    <img :src="item.path"/>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    currentIndex:0,//当前选项卡索引
                    list:[{
                        id:1,
                        title:'apple',
                        path:'../img/apple.jpg'
                    },{
                        id:2,
                        title:'orange',
                        path:'../img/orange.jpg'
                    },{
                        id:3,
                        title:'banana',
                        path:'../img/banana.jpg'
                    }]
                },
                methods:{
                    change:function(index){
                        this.currentIndex = index;
                    }
                }
            })
        </script>
    </body>
</html>