Vue简介 与 基础指令

 

Vue框架介绍

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

目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。能够构建复杂的单页面应用。

 

简单示例：

// HTML 页面
<div id="app">
    <span>你的名字是{{name}}</span>
</div>

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

// main.js 页面
// 实例化Vue对象，el 选中HTML中的标签，data存放渲染的数据
var app = new Vue({
    el: '#app',
    data: {
        name: "Gao_Xin"
    }
});

 

Vue指令

 Vue的指令directives本质是js中的自定义属性，指令是Vue模板中最常用的功能，

- 文本相关：

-- v-test 在HTML中渲染文本信息； 本质利用的是 js的 innerText的属性；

-- v-html 在HTML中渲染HTML代码；本质利用的是 js的 innerHTML属性；

<!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">
    <p v-text="name"></p>
    <div v-html="hobby">
    </div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "小黑",
            hobby: `
                <ul>
                <li>学习</li>
                <li>烫头</li>
                <li>抽烟</li>
                <li>喝酒</li>
                <li>大保健</li>
            </ul>
            `
        }
    })
</script>
</body>
</html>

 

- for循环以及逻辑判断：if--else-if--else：

　　-- v-for ：在用这个命令的时候，记得在后面加上:key， 该值一般为index索引值。

<!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">
    <h3>{{name}}</h3>
    <p>他喜欢吃的食物</p>
    <ul>
        <li v-for="(food, index) in foods" :key="index">{{ food }}{{index}}</li>
    </ul>

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

    </ul>



</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "张强强",
            foods: ["豆汁", "泔水", "臭豆腐"],
            array : [{
                name: "旭哥",
                age: 77,
                hobby: "睡觉"
            }]
        }
    })
</script>
</body>
</html>
v-for

　　-- v-if  v-else-if  v-else：

<!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">
   <div v-if="role == 'vip'">
       <h2>张强强为您服务</h2>
   </div>
    <div v-else-if="role == 'svip'">
        <h2>肠炎为您服务</h2>
    </div>
    <div v-else>
        <h2>没有权限</h2>
    </div>


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

// appendChild
// display

</body>
</html>
v-if v-else-if v-else

 

-- v-show：

<!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">
    <div v-show="is_show">
        <p>郝起翰</p>
    </div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            is_show: true,
        }
    })


</script>
</body>
</html>
v-show

 

-- v-on  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>
        <img :src="img.url" alt="" v-for="img in img_list">

    </div>

    <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

 

-- v-model：

<!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">
    <input type="text" v-model="input">
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>

    <select name="" v-model="girl" multiple>
        <option value="1">wangwei </option>
        <option value="2">liangshuang</option>
        <option value="3">jihuifang</option>
        <option value="4">liangying</option>
    </select>

    {{input}}
    {{article}}
    {{girl}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "",
            article: "",
            girl: [1,2],
        }
    })
</script>

</body>
</html>
v-model

 

-- 指令修饰符

<!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">
    <input type="text" v-model.trim="input">
    <!--<input type="text" v-model.lazy.number="input">-->
    <pre>{{input}}</pre>
    <!--{{typeof input}}-->
    {{input}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            input: "",
            article: "",
            girl: [1,2],
        }
    })
</script>
</body>
</html>
指令修饰符

 

-- 自定义指令：

<!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 greenyellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="card" v-duan.top.right="haoxin">

    </div>
    <button @click="my_click">点我改变定位</button>
</div>
<script>
    Vue.directive("duan", function (el, binding) {
        console.log(el);
        console.log(binding);
        if(binding.value){
            el.style.position = "fixed";
            // el.style.bottom = 0;
            // el.style.right = 0;
            for(let site in binding.modifiers){
                el.style[site] = 0;
            }
        }else {
            el.style.position = "static";
        }
    });


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

</body>
</html>
自定义

 

Vue获取DOM元素

 

Vue计算属性

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

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

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

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

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

<!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>

 

posted @ 2018-10-22 18:29  浮生凉年  阅读(193)  评论(0)  编辑  收藏  举报