Vue第二篇 Vue的常用指令

01-demo

<!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="app">
{{name}}

</div>
<script>
    // let ele = document.getElementById("app");
    // ele.innerText = "hello";

    const app = new Vue({
        el: "#app",
        data: {
            name: "alex"
        }
    })

</script>

</body>
</html>

02-v-text以及v-html

<!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="app">
    <h2 v-text="name"></h2>
    <h3 v-text="age"></h3>
    <h3>他的爱好是</h3>
    <div v-html="hobby">


    </div>
</div>
<script>
    // 先获取h2标签
    // innerText
    // innerHtml
    const app = new Vue({
        el: "#app",
        data: {
            name: "夏雨豪",
            age: 18,
            hobby: `<ul>
                    <li>学习</li>
                    <li>舔狗</li>
                    <li>吸猫</li>
                </ul>`
        }
    })
</script>
</body>
</html>

　03-v-for

<!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="app">
    <ul>
        <li v-for="(course, index) in course_list" :key="index">{{course}}{{index}}</li>
    </ul>
    <ul>
        <li v-for="(stu, index) in s1">{{stu.name}}{{stu.age}}</li>
    </ul>

</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            course_list: ["Python", "Linux", "Vue", "Go"],
            s1: [
                {
                    name: "袁承明",
                    age: 19
                },
                {
                    name: "李沁洋",
                    age: 20
                }
            ]
        }
    })
</script>
</body>
</html>

04-v-bind

<!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>
    <style>
        .my_active {
             200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{my_active: is_show}">

    </div>
    <img :src="my_src" alt="">

</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            is_show: false,
            my_src: "https://hcdn1.luffycity.com/static/frontend/activity/banner-PC7%E5%A4%A9%20(1)_1542264332.6512344.png"
        }
    })
</script>

</body>
</html>

05-v-on

<!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="app">
    <button @click="my_click('打游戏')" v-on="{mouseenter: my_enter, mouseleave: my_leave}">点击弹出look</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            my_click: function (x) {
                alert("luke" + x)
            },
            my_enter: function () {
                console.log("鼠标移入事件")
            },
            my_leave: function () {
                console.log("鼠标移出事件")
            }
        }
    })
</script>

</body>
</html>

06-v-if

<!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="app">
    <div v-if="role == 'admin'">管理员你好</div>
    <div v-else-if="role == 'hr'">查看简历</div>
    <div v-else>没有权限</div>
</div>
<script>
    // appendChild
    const app = new Vue({
        el: "#app",
        data: {
            role: "admin"
        }
    })
</script>

</body>
</html>

07-v-show

<!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="app">
    <div v-show="admin">管理员你好</div>
    <div v-show="hr">查看简历</div>
    <div v-show="others">没有权限</div>
    <button @click="my_click">点击显示或隐藏</button>
    <h2 v-show="is_show">吴栋</h2>
</div>
<script>
    // display
    const app = new Vue({
        el: "#app",
        data: {
            admin: true,
            hr: false,
            others: false,
            is_show: false
        },
        methods: {
            my_click: function () {
                this.is_show = !this.is_show
            }
        }

    })
</script>

</body>
</html>

08-v-mode以及指令修饰符

<!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="app">
    <input type="text" v-model.lazy.trim="username">
    {{username}}
    <pre>{{username}}</pre>
    <hr>
    <input type="text" v-model.lazy.number="phone">
    {{phone}}
    {{typeof phone}}
    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
    {{article}}

    <select name="" id="" v-model="choices" multiple>
        <option value="1">xiayuhao</option>
        <option value="2">yaunchengming</option>
        <option value="3">liqinyang</option>
    </select>
    {{choices}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            username: "",
            article: "",
            choices: ["1"],
            phone: ""
        }
    })
</script>

</body>
</html>

　09-自定义指令　

<!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>
    <style>
        .my_box {
             200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="my_box" v-pin.left.bottom="pinned">

    </div>

    <h1 v-my_text="name"></h1>
</div>
<script>
    Vue.directive("pin", function (el, binding) {
        console.log(el);
        // el 是我们绑定指令的标签元素
        console.log(binding);
        // binding 指令的所有信息
        let gps = binding.modifiers;
        // {right: true, top: true}
        if(binding.value){
            // 给div定位到浏览器的右下角
            el.style.position = "fixed";
            // el.style.right = 0;
            // el.style.bottom = 0;
            for(let posi in gps){
                el.style[posi] = 0;
            }
        }
        else {
            el.style.position = "static";
        }
    });

    // 自定义的v-text
    Vue.directive("my_text", function (el, binding) {
        el.innerText = binding.value;
    });



    const app = new Vue({
        el: "#app",
        data: {
            pinned: true,
            name: "gaoxin"
        }

    })
</script>

</body>
</html>

01-获取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="app">
    <div ref="my_box"></div>

    <button v-on:click="my_click">点击显示文本</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        methods: {
            my_click: function () {
                // 给div标签加入文本
                let ele = this.$refs.my_box;
                console.log(ele)
                ele.innerText = "夏雨豪"
            }
        }
    })
</script>

</body>
</html>

02-计算属性

<!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="app">
    <table>
        <thead>
            <tr>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </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>Mysql</td>
                <td><input type="text" v-model.number="mysql"></td>
            </tr>
            <tr>
                <td>总分</td>
                <td>{{total}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <!--<td>{{(python+django+mysql)/3}}</td>-->
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>

    {{sum}}
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            python: "",
            django: "",
            mysql: "",
            sum: this.python + this.django + this.mysql,
            // sum: null
        },
        methods: {

        },
        computed: {
            total: function () {
                return this.python + this.django + this.mysql
            },
            average: function () {
                return this.total/3
            }
        }
    })
</script>

</body>
</html>

03-数据的监听

<!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="app">
    {{name}}
    <br>
    {{hobby}}
    <br>
    {{obj}}
    <br>
    <button @click="my_click">点我改变数据</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "夏雨豪",
            hobby: ["舔狗", "烫头"],
            obj: {
                girl: "李文周",
                age: 36
            }
        },
        methods: {
            my_click: function () {
                // 修改数据
                // this.name = "夏雨荷";
                // this.hobby.push("腹黑")
                // this.hobby[0] = "吸猫";
                // console.log(this.hobby)
                // app.$set(this.hobby, 0, "吸猫")
                // this.obj.age = 18;
                //  this.obj["sex"] = "女";
                app.$set(this.obj, "sex", "女")
            }
        },
        watch: {
            name: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal);
                    // 可以通知乾隆~~
                }
            },
            hobby: {
                handler: function (val, oldVal) {
                    // 改变数组的长度的时候新旧值相同
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            },
            obj: {
                handler: function (val, oldVal) {
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            }

        }
    })
</script>

</body>
</html>

总结：

前端内容回顾
	HTML 超文本标记语言 帮助我们构建页面结构
	CSS  层叠样式表    给我们的页面结构渲染样式
	JS   脚本语言      用于用户的交互
	JQuery  对js语法的封装
	Bootstrap  封装样式
Vue的简介
	借鉴后端的MVC架构模式 
	是MVVM架构  Model  View ViewModel
	主要思想是数据驱动视图 
	从获取DOM渲染DOM的操作中解脱出来
Vue的常用指令
	-- v-text   innerText
	-- v-html   innerHtml
	-- v-for
	-- v-if v-else-if v-else   appendChild
	-- v-show  display
	-- v-bind  绑定属性 简写:
	-- v-on    绑定事件 简写@
	-- v-model 数据的双向绑定
		-- input
		-- textarea
		-- select
	-- 指令修饰符
		-- .lazy
		-- .number
		-- .trim
	-- 自定义的指令
		-- Vue.dirctive("指令名称", function(el, binding){
				el 绑定指令的标签元素
				binding 指令的所有信息组成的对象
					value  指令绑定数据的值
					modifiers 指令修饰符
					
		})

获取DOM
		-- 给标签加ref属性  ref="xxxx"
		-- this.$refs.xxxx
	计算属性
		computed
		放入缓存 当数据改变的时候才会重新执行计算
		跟data中数据的区别
	数据的监听
		-- watch去监听
		-- 字符串
			-- 监听到改变新的值和旧的值不同的
		-- 数组
			-- 只能监听到长度的变化 新旧值相同的
			-- 改变数组值的时候监听不到
				必须用$set(array, index, value) 
				新旧值相同的
		-- 对象
			-- 只能监听到value的改变  必须深度监听
			-- 增加对象的key 必须用$set(obj, key, value)
			-- 新旧值相同的

相关阅读:
IE6/IE7下：inline-block不兼容的问题
 ie6、ie7下overflow失效
 display:inline、block、inline-block三者之间的区别
 分割线用CSS样式做出来的效果
 jQuery实现鼠标点击div外的地方div隐藏消失的效果
 IE6下面的浮动问题
 [zabbix]zabbix分区表操作步骤
 [转载]系统管理：update-alternatives
zabbix调优PPT
mysql修改密码
原文地址：https://www.cnblogs.com/cavalier-chen/p/10096329.html