Vue基础以及指令

Vue 基础篇一

Vue框架介绍

之前大家学过HTML，CSS，JS，JQuery，Bootstrap，现在我们要学一个新的框架Vue~

Vue是一个构建数据驱动的web界面的渐进式框架。

目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

能够构建复杂的单页面应用。现在我们开始认识一下Vue~

// HTML 页面
<div id="app">
    <span>你的名字是{{name}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>

// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        name: "Gao_Xin"
    }
});

Vue demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>

<div id="ret">
    {{ name }}
    {{ age }}

</div>
<script>

    const ret = new Vue({
        el:"#ret",
        data:{
            name:'张三',
            age:14
        }

    })
</script>


</body>
</html>

View Code

Vue指令

Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，

它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。

<template>
<div>
  <h2>head</h2>
  <p v-text="msg"></p>
  <p v-html="html"></p>
</div>
</template>

<script>
    export default {
        name: "head",
      data(){
          return {
            msg: "消息",
            html: `<h2>插入h2标题</h2>`

          }
      }

    }
</script>

<style scoped>

</style>

v-test v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>

<div id="ret">
    <p v-text="name"></p>
    <div v-html="hobby"></div>
</div>
</body>

<script>
    const ret = new Vue({
        el:"#ret",
        data:{
            name:'张三',
            hobby:`
                <ul>
                    <li>抽烟</li>
                    <li>喝酒</li>
                    <li>烫头</li>
                </ul>
            `

        }
    })
</script>
</html>

v-test v-html

// HTML页面
<div id="app">
        <label>
            男
            <input type="checkbox" v-model="sex" value="male">
            //  <input type="radio" v-model="sex" value="male">
        </label>
        <label>
            女 
            <input type="checkbox" v-model="sex" value="female">
        </label>
        {{sex}}
</div>  

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>  

// main.js 页面

var app = new Vue({
    el: '#app',
    data: {
        // sex: "male",
        sex: [],
    }
});

v-model input

// HTML 页面
<div id="app">
<div>
        <texteare v-model="article">
        </texteare>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        // sex: "male",
        sex: [],
        article: "这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。"
    }
});

v-model textarea

// HTML页面
<div id="app">
        <!--<select v-model="from">-->
            <!--<option value="1">单选1</option>-->
            <!--<option value="2">单选2</option>-->
        <!--</select>-->
        <!--{{from}}-->
        <select v-model="where" multiple="">
            <option value="1">多选1</option>
            <option value="2">多选2</option>
            <option value="3">多选3</option>
        </select>
        {{where}}
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        from: null,
        where: [],
    }
});

v-model select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="ret">
    <input type="text" v-model="input">
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
    <select name="" v-model="heshang" multiple>
        <option value="1">tangseng</option>
        <option value="2">wukong</option>
        <option value="3">bajie</option>
        <option value="4">shaseng</option>
    </select>
    {{ input }}
    {{ article }}
    {{ heshang }}
</div>

<script>
    const ret = new Vue({
        el:"#ret",
        data:{
            input:'',
            article:'',
            heshang:[1,4],
        }
    })
</script>

</body>
</html>

v-model

/  需求是展示一个人的所有爱好 以及喜欢吃的食物和价格
// HTML 页面  
<div id="app">
<div> 
        <span>你的爱好是</span>
        <ul>
            <li v-for="hobby in hobby_list">{{hobby}}</li>
        </ul>
</div>
<div>
        <span>你喜欢的食物</span>
        <ul>
            <li v-for="food in food_list">{{food.name}}: 价格￥{{food.discount ? food.price*food.discount: food.price}}</li>
        </ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        hobby_list: ["王者毒药","LOL","吃鸡"],
        food_list: [
            {
                name: "葱",
                price: 5,
                discount: .8,
            },
            {
                name: "姜",
                price: 8,
                // discount: .5

            }
        ],
    }
});

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="ret">
    <h1>{{ name }}</h1>
    <p>它的爱好</p>
    <ul>
        <li v-for="(hobby,index) in hobbys":key="index">
           {{ hobby }}{{ index }}
        </li>
    </ul>

    <ul>
        <li v-for="item in array">
            {{ item.name }}年龄是{{ item.age }}
            爱好是{{ item.hobby }}

        </li>
    </ul>

</div>
<script>
    const ret = new Vue({
        el:'#ret',
        data:{
            name:'张三',
            hobbys:['抽烟','喝酒','烫头'],
            array :[{
                name:'李四',
                age:17,
                hobby:'睡觉'
            }]
        }
    })

</script>

</body>
</html>

v-for

// 我们常常见到博客中评论回复的时候 @某某某
// 我们点击这个用户是能够跳转的  那么这个应该是个动态的
// 我们就需要给标签属性进行动态绑定 v-bind
// HTML页面
<style>
        .active {
            background: red;
        }
</style>
<div id="app">
   <div>
        <!--<a v-bind:href="my_link">点我</a>-->
        <a v-bind:href="my_link" :class="{active: isActive}">点我 
 </a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        my_link: "http://baidu.com",
        isActive: true,
    }
});

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .alex_color {
            width: 100px;
            height: 100px;
            border: solid 1px red;
        }
        .bg {
            background-color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <p class="alex_color" :class="{bg: is_green}">Alex</p>

    <button @click="my_click(123)">点击戴绿</button>



    <div v-on="{mouseenter: OnMouseEnner, mouseleave: OnMouseLeave}">鼠标移入移出效果</div>

    <div @mouseenter="OnMouseEnner" @mouseleave="OnMouseLeave"></div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            is_green: false,
        },
        methods: {
            my_click: function (data) {
                this.is_green = !this.is_green;
            },
            OnMouseEnner: function () {
                console.log("涛哥")
            },
            OnMouseLeave: function () {
                console.log("旭哥")
            },


        }

    })


</script>
</body>
</html>

v-on v-bind

// 那我们以前的事件绑定在vue中是怎么做到的呢
// HTML页面
<div>
        <span>事件</span>
        <button v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}" v-on:click="onClick(1)">点我</button>
    </div>
    <div>
        <input type="text" v-on="{keyup: onKeyup}">
</div>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        my_link: "http://baidu.com",
        isActive: true,
    },
    methods: {
        onClick: function (a) {
            alert(a)
        },
        onMouseenter: function () {
            console.log("mouse enter")
        },
        onMouseleave: function () {
            console.log("mouse leave")
        },
        onKeyup: function () {
            console.log("key up")
        }
    },
});

v-on

// 我们之前写过权限 我们现在模拟一个简单的权限
// HTML页面
<div>
        <div v-if="role == 'admin' || 'super_admin'">管理员你好</div>
        <div v-else-if="role == 'hr'">待查看简历列表</div>
        <div v-else> 没有权限</div>
</div>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        role: 'admin',
       // role: 'hr',
    },
});

v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="ret">
    <div v-if="role == 'vip'">
        <h1>张三为您服务</h1>
    </div>

    <div v-else-if="role == 'svip'">
        <h1>李四为您服务</h1>
    </div>

    <div v-else>
        <h1>您没有权限</h1>
    </div>


</div>
<script>
    const ret = new Vue({
        el:"#ret",
        data:{
            role:'vip'
        }
    })
</script>

</body>
</html>

v-if

// 现在我们要实现一个功能 点击一个按钮显示文本 再点击取消
// 这种显示和隐藏的功能 vue也帮我们进行了封装
// HTML页面
<div id="app">
    <button @click="on_click()">
        点我
    </button>
    <p v-show="show">提示文本</p>
</div>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        show: false,
    },
    methods: {
        on_click: function () {
            this.show = !this.show
        }
    }

});

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="ret">
    <div v-show="is_show">
        <p>张三</p>

    </div>

</div>
<script>
    const ret = new Vue({
        el:"#ret",
        data:{
            is_show:true,
        }
    })

</script>

</body>
</html>

V-show

//  我们现在要获取用户的注册信息
//  用户名以及手机号 用指令修饰符能够让我们更加便捷
// HTML 页面
<div>
    用户名: <input type="text" v-model.lazy.trim="username"><br>
    {{username}}
    手机号: <input type="text" v-model.number="phone"><br>
    {{phone}}
</div>
// main.js 页面
var app = new Vue({
    el: '#app',
    data: {
        username: "",
        phone: "",
    },
});

指令修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="ret">
    <input type="text" v-model.trim="input">

    <pre>{{ input }}</pre>

    {{ input }}

</div>
<script>
    const ret = new Vue({
        el:'#ret',
        data:{
            input:'',
            article:'',
            heshang:[1,4],
        }
    })
</script>

</body>
</html>

指令修饰符

// 我们现在有个需求 点击元素 让这个元素在浏览器窗口钉住
// 我们只需自定义一个指令，只要给元素绑定指令就可以
// HTML页面
<style>
        .card {
            border: solid 3px red;
            width: 200px;
            height: 100px;
            background: #eeeeee;
            margin-bottom: 5px;
        }
</style>
<div id="app">
 <div class="card" v-pin:true.bottom.right="pinned">
        <button @click="pinned = !pinned">盯住/取消</button>
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
    <div class="card">
        这是一个盒子文本内容
    </div>
</div>
// main.js 页面
Vue.directive('pin', function (el, binding) {
    var binded = binding.value;
    var position = binding.modifiers;
    var warning = binding.arg;
    console.log(position)
    if(binded){
        el.style.position = 'fixed';
        for(var key in position){
            if (position[key]){
                el.style[key] = '20px';
            }
        }
        if (warning === 'true'){
            el.style.background = '#666'
        }

    }
    else {
        el.style.position = 'static';
        el.style.background = "#eeeeee"
    }
});
new Vue({
    el: '#app',
    data: {
        pinned: false,
    }
});

自定义指令以及修饰符参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .card {
            width: 100px;
            height: 100px;
            border: solid 1px red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card" v-pin.left.bottom="is_pin">

    </div>
    <button @click="my_click">点击定位</button>
</div>
<script>
    Vue.directive("pin", function (el, binding) {
        // el 是绑定指令的标签
        //  binding 是指令的信息
        console.log(binding)
        if(binding.value){
            el.style.position = "fixed";
            // el.style.right = 0;
            // el.style.bottom = 0;
            for(let site in binding.modifiers){
                el.style[site] = 0;
            }
        }else {
            el.style.position = "static";
        }
    });

    const app = new Vue({
        el: "#app",
        data: {
          is_pin: false,
        },
        methods: {
            my_click: function () {
                // alert(123)
                this.is_pin = ! this.is_pin
            }
        }
    })
</script>

</body>
</html>

自定义指令

Vue获取DOM元素

  <style>
        .box {
            width: 200px;
            height: 200px;
            border: solid 1px red;
        }
    </style>

</head>
<body>
<div id="app">
    <div  class="box" ref="my_box">
        这是一个盒子
    </div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        mounted(){
            this.$refs.my_box.style.color = "red";
        }
    })
</script>

</body>

获取DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="ret">
    <div ref="box">
        peiqi
    </div>
    <button @click="my_click">点我给盒子加点红</button>


</div>
<script>
    const ret = new Vue({
        el:"#ret",
        methods:{
            my_click:function(){
                console.log(this.$refs.box);
                this.$refs.box.style.color="red"
            }
        }
    })
</script>

</body>
</html>

获取DOM

Vue计算属性

我们的模板表达式非常的便利，但是逻辑复杂的时候，模板会难以维护，vue提供了计算属性。

我们用方法也能达到效果，那么我们为什么要用计算属性呢~

其实在vue中方法和计算属性达到的效果是一样的，但是计算属性是基于依赖进行缓存的，

只有依赖的数据发生改变的时候，才会重新执行计算属性的函数，每次调用都会从缓存中拿之前算好的数据。

而方法是每调用一次，执行一次。

// 现在我们有一个成绩的表格 来计算总分和平均分
// HTML页面
<div id="app">
    <table border="1">
        <thead>
            <th>学科</th>
            <th>分数</th>
        </thead>
        <tbody>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model.number="math"></td>
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英语</td>
               <td><input type="text" v-model.number="english"></td>
            </tr>
            <tr>
                <td>总分</td>
               <!--<td>{{math+physics+english}}</td>-->
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
               <!--<td>{{Math.round((math+physics+english)/3)}}</td>-->
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>
// js 页面
var app = new Vue({
    el: '#app',
    data: {
        math: 90,
        physics:88,
        english: 78,
    },
    computed: {
        sum: function () {
            var total = this.math + this.physics + this.english
            return total
        },
        average: function () {
            var average_num = Math.round(this.sum/3)
            return average_num
        }
    }
});

计算器属性 computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <th>科目</th>
            <th>成绩</th>
        </thead>
        <tbody>
            <tr>
                <td>Python基础</td>
                <td><input type="text" v-model.number="Python"></td>
            </tr>
            <tr>
                <td>Django项目</td>
                <td><input type="text" v-model.number="django"></td>
            </tr>
            <tr>
                <td>数据库</td>
                <td><input type="text" v-model.number="sql"></td>
            </tr>
            <tr>
                <td>Linux</td>
                <td><input type="text" v-model.number="Linux"></td>
            </tr>
            <tr>
                <td>总计</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{avg}}</td>
            </tr>

        </tbody>

    </table>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            Python: 60,
            django: 60,
            sql: 60,
            Linux: 60,
        },
        computed: {
            sum: function () {
                return this.Python + this.django+ this.sql +this.Linux
            },
            avg: function () {
                return  this.sum/4
            }
        }

    })

</script>
</body>
</html>

计算器

Vue过滤器

过滤器是在数据到达用户的最后一步进行简单的过滤处理，复杂的还是要用计算属性或者方法。

// 我们两个需求 一个是价格展示后面自动加“元”
//  单位 毫米和米的转换
// HTML页面
<div>
        <p>价格展示</p>
        <input type="text" v-model="price">
        {{price | currency('USD')}}
</div>
<div>
        <p>换算</p>
        <input type="text" v-model="meters">
        {{meters | meter}}
 </div>
// js 代码
Vue.filter('currency', function (val, unit) {
    val = val || 0;
    var ret = val+ unit
    return ret
});

Vue.filter('meter', function (val) {
    val = val || 0;
    return (val/1000).toFixed(2) + "米"
});
new Vue({
    el: '#app',
    data: {
        price: 10,
        meters: 10,
    }
});

过滤器filter

posted on 2018-10-22 23:36 liangliang123456 阅读(105) 评论(0) 收藏举报

刷新页面返回顶部

liangshuang