Vue: 常用指令

创建vue实例

第一个vue实例

<div id="app">{{huanying}}</div>

<script>
    //创建vue实例
    new Vue({
        el: "#app",
        data: {
            huanying: 'Hello Vue!'
        }
    })
</script>

数据模板引擎

v-开头的指令是帮助我们渲染数据用的

v -text 标签内添加文字

<div id="app" v-text="huanying"></div>

<script>

    //v-text 标签内添加文字
    new Vue({
        el: "#app",
        data: {
            huanying: 'Hello Vue!'
        }
    })

</script>

v-text

v -html 标签内添加 <标签>文字</标签>

<div id="app" v-html="huanying"></div>

<script>

    //v-html 可以加<标签>文字</标签>
    new Vue({
        el: "#app",
        data: {
            huanying: '<h1>Hello Vue!</h1>'
        }
    })

</script>

v-html

v -for 循环

<div id="app">

    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <ul>
        <li v-for="s in students">{{s.name}}</li>
    </ul>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            hobbys: ['eat', 'drink', 'sleep', 'shit'],
            students: [
                {
                    name: "an",
                    age: 11,
                    hobby: "sleep"
                },
                {
                    name: "ben",
                    age: 12,
                    hobby: "sleep"
                },
                {
                    name: "carl",
                    age: 13,
                    hobby: "sleep"
                },
            ],
        }
    })

</script>

v-for

v -if 判断, v-if v-else-if v-else

<div id="app">
    <div v-if='name1=="ann"'>
        <h1>如果name=ann显示这一条</h1>
    </div>
    <div v-else-if='name2=="ben"'>
        <h1>如果name=ben显示这一条</h1>
    </div>
    <div v-else>
        <h1>如果是别的,显示这一条</h1>
    </div>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            name1: "ann",
            name2: "ben",
        }
    })
    
</script>

v-if

v -show 根据data中的布尔值操作

<div id="app" v-show="showdata">能显示出来嘛?</div>

<script>

    new Vue({
        el:"#app",
        data:{
            // showdata:false,
            showdata:true,
        }
    })

</script>

v-show

v -bind: 绑定属性

注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>


<div id="app">
    <a v-bind:href="link">click_here</a>
    <div v-bind:class="[isActive]"></div>
</div>

<script>

    new Vue({
        el:"#app",
        data:{
            link:"https://baidu.com",
            isActive:"active",
        }
    })

</script>

</body>
</html>

v-bind

v -on: 在标签上面绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>


<div id="app">
    <h2 :class="{ active:isActive }">点点点</h2>
    <button v-on:click="changeColor">点击变色</button>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            isActive: false
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive;
            },
        }
    })

</script>




</body>
</html>

v-on 点击按钮变色

v -on: 在标签上面绑定事件

用户修改渲染的原始数据后，打印修改后的数据,

我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。

<div id="app">
    <input type="text" v-model="name">
    <input type="checkbox" value="男" v-model="genders">
    <input type="checkbox" value="女" v-model="genders">

    <select name="" id="" v-model="girlfriends">
        <option>ann</option>
        <option>ben</option>
        <option>cat</option>
    </select>


    <hr>

    {{name}}
    {{genders}}
    {{girlfriends}}
</div>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'ann',
            genders: [],
            girlfriends: [],
        }
    })
</script>

</body>
</html>

v-model

计算属性: computed

<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>选项</th>
            <th>填写</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>人物</td>
                <td><input type="text" v-model="who"></td>
            </tr>
            <tr>
                <td>地点</td>
                <td><input type="text" v-model="where"></td>
            </tr>
            <tr>
                <td>干什么</td>
                <td><input type="text" v-model="what"></td>
            </tr>
            <tr>
                <td>组成的话</td>
                <td>{{score}}</td>
           </tr>
        </tbody>
    </table>
    <hr>
    {{who}}
</div>


<script>

    let vm = new Vue({
        el: "#app",
        data: {
            who: "",
            where: "",
            what: "",
        },
        //computed 计算/合并
        computed: {
            score: function () {
                return this.who + this.where + this.what
            }
        },
    })

计算属性

侦听属性/侦听器: watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>科目</th>
            <th>的分</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model="yuwen"></td>
        </tr>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model="shuxue"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model="yingyu"></td>
        </tr>
        <tr>
            <td>的分</td>
            <td>{{score}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{yuwen}}
</div>


<script>

    let vm = new Vue({
        el: "#app",
        data: {
            yuwen: "",
            shuxue: "",
            yingyu: "",
        },
        //computed 计算/合并
        computed: {
            score: function () {
                return this.who + this.where + this.what
            }
        },
        
        // 侦听属性
        watch:{
            yuwen:function () {
                alert('语文成绩变了啊!')
            }
        }
    })

</script>

侦听属性

获取DOM元素: methods

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" 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="./vue.min.js"></script>
    <style>
        .active {
            color: green;
        }
    </style>
</head>
<body>

<div id="app">
    <div ref="myRef">点点点</div>
    <button v-on:click="changeColor">点击变色</button>
</div>


<script>

    let vm = new Vue({
        el: '#app',
        data: {
            isActive: 'active',
        },


        methods: {
            changeColor: function () {
                this.$refs.myRef.className = this.isActive;
            }
        },

    })

</script>

</body>
</html>

获取DOM元素

自定义指令:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" 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="./vue.min.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #5bc0de;
        }
    </style>
</head>
<body>


/* 页面展示的时候 方框移动到右下角 */

<div id="app">
    <div v-bind:class="{ box: isShow}" v-pos.right.bottom="leftBottom">Hello Vue!</div>
</div>


<script>

    Vue.directive("pos", function (el, bindding) {
        if (bindding.value) {
            el.style['position'] = 'fixed';
            for (let key in bindding.modifiers) {
                el.style[key] = 0;
            }
        }
    });

    let vm = new Vue({
        el: "#app",
        data: {
            leftBottom: true,
            isShow: true,
        },
    })

</script>

</body>
</html>

页面展示的时候方框移动到右下角

posted @ 2018-11-07 19:19 Niuli'blog 阅读(178) 评论(0) 收藏举报

刷新页面返回顶部

Niuli'blog

Vue: 常用指令

创建vue实例

第一个vue实例

数据模板引擎

v-开头的指令是帮助我们渲染数据用的

v -text 标签内添加文字

v -html 标签内添加 <标签>文字</标签>

v -for 循环

v -if 判断, v-if v-else-if v-else

v -show 根据data中 的布尔值 操作

v -bind: 绑定属性

v -on: 在标签上面绑定事件

v -on: 在标签上面绑定事件

计算属性: computed

侦听属性/侦听器: watch

获取DOM元素: methods

自定义指令:

公告

v -show 根据data中的布尔值操作