Vue常用指令

概述

Vue核心思想概念

1 数据驱动视图
2 双向的数据绑定

创建一个vue实例对象

# html页面
<div id='app'>
    <h3>{{title}}</h3>
</div>

# js页面
var app = new Vue(){
    el:'#app',
    data:{
        title:'土豆',
    }
}

// 插值语法可以插运算
{{ 1>2 ? '真':'假' }}

指令系统

v-if, v-else-if, v-else

if判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3 v-if="role == '会员'">会员</h3>
    <h3 v-else-if="role == '白金会员'">白金会员</h3>
    <h3 v-else="role == '白金会员'">员工</h3>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            role: "会员"
        }
    })
</script>
</body>
</html>
v-if
v-show 是控制元素的display属性　　　　(设置css)　　　　 适用于频繁切换
v-if等 是动态的appendchild的方式　　　(会销毁再重建)　　适用于一种操作

v-on(简写@)

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="my_click">按钮</button>
    <button @click="my_click">按钮</button>
    <button @click="my_click" @mouseenter="my_mouseenter" @mouseleave="my_mouseleave">按钮</button>
    <button v-on="{click:my_click,mouseenter:my_mouseenter, mouseleave:my_mouseleave}">按钮</button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            my_click: function () {
                console.log("点我了")
            },
            my_mouseenter: function () {
                console.log("移入")
            },
            my_mouseleave: function () {
                console.log("移出")
            }
        }
    })
</script>
</body>
</html>
v-on

v-show

类似于v-if,但不销毁,而是设置css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
             200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box" v-show="is_show"></div>
    <button v-text="btn_text" @click="my_click"></button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            is_show:true,
            btn_text:"隐藏"
        },
        methods: {
            my_click: function () {
                this.is_show = ! this.is_show;
                if (this.is_show){
                    this.btn_text = "隐藏"
                }else {
                    this.btn_text = "显示"
                }
            }
        }
    })
</script>
</body>
</html>
v-show
v-show 是控制元素的display属性　　　　(设置css)　　　　 适用于频繁切换
v-if等 是动态的appendchild的方式　　　(会销毁再重建)　　适用于一种操作

v-bind(简写:)

绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my_style{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <a v-bind:href="link">Go</a>
    <a :href="link" :class="{my_style: isActive}">Go1</a>
    <div :test="name">{{name}}</div>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            link: "https://www.baidu.com/",
            isActive: true,
            name: ["胡达帕", "湖兄炮", "觉先生"],
        }
    })
</script>
</body>
</html>
v-bind
1 v-bind:class='{box2:isGreen}'        # 如果isGreen是真,则把box2绑定到class上
2 可以把一个数组传给v-bind:class
    
    v-bind:class='[activeclass, errorclass]'
    
    data:{
        activeclass: 'active',
        errorclass: 'text-danger'
    }

    渲染为:
        class = 'active text-danger'
v-bind应用

v-for

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>爱好</h2>
    <div>
        <ul>
            <li v-for="hobby in hobby_list">{{hobby}}</li>
        </ul>
    </div>
    <h2>学生列表</h2>
    <p v-for="obj in student_list">姓名：{{obj.name}}, 年龄：{{obj.age}}</p>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            hobby_list:["妹子1", "妹子2", "妹子3"],
            student_list: [
                {name: "胡大炮", age: 18},
                {name: "胡小炮", age: 8},
                {name: "觉先生", age: 28},
            ]
        }
    })
</script>
</body>
</html>
v-for

v-html

可以解析html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <h1 v-text="name"></h1>
    <div v-html="html"></div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "glh",
            html: `<h3>${this.name}</h3>`
        }
    })
</script>

</body>
</html>
v-html

v-model

双向的数据绑定 = 单向数据绑定+UI事件监听

v-model.lazy = 'msg'　　　　 // 懒惰的监听
v-model.number = 'msg' 　　// 自动将用户的输入值转为数值类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label for="name">用户名:</label>
    <input type="text" v-model="name" id="name" >{{name}}
    <label for="gender">男</label>
    <input type="radio" v-model="gender" id="gender" value="1">
    <label for="gender1">女</label>
    <input type="radio" v-model="gender" id="gender1" value="2"> {{gender}}

    <hr>
    <input type="checkbox" value="男" v-model="gender">男
    <input type="checkbox" value="女" v-model="gender">女
    <input type="checkbox" value="保密" v-model="gender">保密
    {{gender}}
    <hr>
    <select name="" id="" v-model="gender" multiple>
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
    </select>
    {{gender}}
    <hr>
    <textarea name="" cols="30" rows="10" v-model="article"></textarea>
    {{article}}
    <input type="text" v-model.trim.lazy="name">  <!-- 修饰符 -->
    <input type="text" v-model.number="name"> {{typeof name}}
    <pre>{{name}}</pre>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            name:"",
            gender: [],
            article: "文章文章文章文章文章文章文章文章文章文章文章文章文章"
        }
    })
</script>
</body>
</html>
v-model

计算属性

computed:{
    // 默认只有getter方法
    // 计算数据属性 watch监听 (当msg这个数据改变时,监听)
    // reverseStr(){
    //     return this.msg.split('').reverse().join('');
    // }

    // 给reverseStr加set方法
    reverseStr:{
        set:function (newValue) {
            this.msg = newValue;
        },
        get:function () {
            // this.msg = "Hello Luffy" 生效
            return this.msg.split('').reverse().join('');
        }
    }
}
简单语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="chinese"></td>
        </tr>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="english"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum_num}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{avg_num}}</td>
        </tr>
        </tbody>
    </table>

</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            chinese:80,
            math: 100,
            english: 100,
        },
        // 放在缓存  只有在数据改变的时候才更新
        computed:{
            sum_num:function () {
                return  this.chinese + this.math + this.english
            },
            avg_num:function () {
                return Math.round(this.sum_num/3)  // 取整
            }
        }
    })
</script>
</body>
</html>
计算属性

事件

mouseenter    鼠标移动上去
mouseleave    鼠标移走

Vue获取DOM元素

 this.$refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div ref="my_box"></div>
    <div ref="my_box1"></div>
    <button @click="my_click">点我</button>
</div>
<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        methods: {
            my_click: function () {
                let ele = this.$refs.my_box;  // 获取dom
                let ele1 = this.$refs.my_box1;
                console.log(ele);
                ele.innerText = "hello world";
                ele.style.color = "red";
                ele1.innerText = "hahhahah";
                ele1.style.backgroundColor = "red";
            }
        }
    })
</script>
</body>
</html>
vue获取dom元素

vue的生命周期方法

created(){
    // 初始化就执行(通常用来做页面的初始化)
}

mounted(){
    // DOM加载完就执行
}
生命周期方法
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sunch/p/10246207.html