vue01基础指令

46次阅读

共计 4955 个字符，预计需要花费 13 分钟才能阅读完成。

前言：很久之前学过 vue，如今开始复习，主要用于自己查看。

1.v-cloak,v-text,v-html,v-on,v-bind

<!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="./lib/vue-2.4.0.js"></script>
    <style>
        [v-cloak] {display: none;}
    </style>
</head>

<body>
    <!-- 表示 vue 控制 id 为 app 的部分 -->
    <div id="app">
        <!-- 使用 v -cloak 解决插值表达式闪烁问题 -->
        <!-- 插值表达式是一个占位符，不会替换整个元素的内容 -->
        <p v-cloak>{{msg}}</p>
        <!-- v-text 覆盖元素中原本的内容，没有闪烁问题 -->
        <h4 v-text="msg">000</h4>
        <!-- 渲染带有 html 内容，覆盖所有内容 -->
        <div v-html="msg2">00</div>
        <!-- 属性绑定指令 v -bind，引号里面解析为 js 代码表达式, 简写 v -bind: 为冒号：-->
        <input type="button" value="按钮 v -bind" v-bind:title="mytitle+msg">
        <!-- 事件绑定 v -on -->
        <!-- 错误，alert 是原生方法，没有在 vue 中定义 -->
        <!-- <input type="button" value="按钮 v -on" v-on:click="alert('hello')"> -->
        <!-- 事件绑定指令 v -on, 简写 v -on: 为冒号 @-->
        <input type="button" value="按钮 v -on" @click="alert">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
            data: {  //data 属性中，存放的是 el 属性用到的数据
                msg: 'hello world!',
                msg2: '<h1> 带标签的 msg</h1>',
                mytitle: 'hello mytitle'
            },
            methods: {alert: () => {alert('hello!')
                }
            },
        })
    </script>
</body>

</html>

2. 事件修饰符，stop,prevent,capture,self,once

<!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="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 表示 vue 控制 id 为 app 的部分 -->
    <div id="app">
        <!-- <div class="inner" @click="divclick"> -->
        <!-- 阻止冒泡 -->
        <!-- <input type="button" @click.stop="inputclick" value="input 按钮"> -->
        <!-- </div> -->
        <!-- 阻止默认行为，不能跳转 -->
        <a href="http://www.baidu.com" @click.prevent="preventdefalut"> 去百度 </a>
        <!-- 捕获触发事件，冒泡事件反过来 -->
        <!-- <div class="inner" @click.capture="divclick">
            <input type="button" @click.stop="inputclick" value="input 按钮">
        </div> -->
        <!-- 实现点击当前元素才能触发，.self 只会阻止自己身上的冒泡 -->
        <!-- <div class="inner" @click.self="divclick" style="width:150px;height:150px;background:pink">
            <input type="button" @click="inputclick" value="input 按钮">
        </div> -->
        <!-- 只触发一次事件处理函数, 意思说下面例子只能阻止默认行为一次，下次就会自动跳转 -->
        <a href="http://www.baidu.com" @click.prevent.once="preventdefalut"> 去百度 </a>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
            data: {//data 属性中，存放的是 el 属性用到的数据},
            methods: {divclick() {console.log('点击了 div')
                },
                inputclick() {console.log('点击了 input')
                },
                preventdefalut() {console.log('阻止默认行为')
                }
            },
        })
    </script>
</body>
</html>

3.v-model 数据双向绑定 

   <div id="app">
        <!-- 只能应用于表单元素，实现表单中的元素和 Model 中的数据的双向绑定 -->
        <input type="text" style="width:100%" v-model="msg">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
            data: {  //data 属性中，存放的是 el 属性用到的数据
                msg: "这是 v -model 例子"
            },
            methods: {}})
    </script>

4.v-on 的属性绑定的使用 – 设置样式外联和内联
4.1 绑定 class 属性 

<!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="./lib/vue-2.4.0.js"></script>
    <style>
        .red {background-color: red;}

        .font-weight {font-weight: bold;}

        .active {font-size: 30px;}
    </style>
</head>

<body>
    <div id="app">
        <!-- 1. 使用数组，使用 v -bind 绑定，注意数组里面加上引号 -->
        <p :class="['red','font-weight']"> 这是 class</p>
        <!-- 2. 三元表达式，flag 在 data 里面，不用加上引号 -->
        <p :class="['red','font-weight',flag?'active':'']"> 这是 class</p>
        <!-- 3. 使用对象来处理三元表达式的冗杂问题 -->
        <p :class="['red','font-weight',{'active':flag}]"> 这是我 class</p>
        <!-- 4. 直接使用对象来处理 -->
        <p :class="{red:flag,'font-weight':flag,active:flag}"> 这是对象的 class</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
            data: {  //data 属性中，存放的是 el 属性用到的数据
                flag: true,
            },
            methods: {}})
    </script>
</body>

</html>

4.2 绑定 style 属性 

<!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="./lib/vue-2.4.0.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <!-- 1. 直接采用数组的形式 -->
        <p :style="msg1"> 这是绑定的 style 属性 </p>
        <!--2. 多个数组的形式 -->
        <p :style="[msg1,msg2]"> 这是绑定的 style 属性 </p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',// 表示 new 出来的 vue 实例，控制页面中的 id 名为 app 的 html 部分
            data: {  //data 属性中，存放的是 el 属性用到的数据
                msg1: {color: 'red', 'font-weight': 800},
                msg2: {background: 'blue'}
            },
            methods: {}})
    </script>
</body>

</html>

5.v-for

<body>
    <div id="app">
        <!-- v-for 普通数组 -->
        <!-- <p v-for="item in list">{{item}}</p> -->
        <!-- v-for 对象数组 -->
        <p v-for="(item,i) in obj" :key="item.id">id 是 {{item.id}}---name 是 {{item.name}}-- 索引是 {{i}}</p>
        <!-- v-for 循环对象 -->
        <!-- <p v-for="(value,key,index) in user">value 值 {{value}}---key 是 {{key}}-- 索引 {{index}}</p> -->
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {list: [0, 1, 2, 3, 4],
                obj: [{ id: 0, name: 'zs0'},
                    {id: 1, name: 'zs1'},
                    {id: 2, name: 'zs2'},
                    {id: 3, name: 'zs3'}
                ],
                user: {
                    name: 'lisi',
                    age: 23,
                    gender: '男'
                }
            },
            methods: {}})
    </script>
</body>

6.v-if 和 v -show

<body>
    <div id="app">
        <input type="button" value="v-if 和 v -show" @click="toggle">
        <!-- v-if 每次都会重新删除和创建元素, 较高的切换性能 -->
        <p v-if="flag">v-if 控制元素 </p>
        <!-- v-show 不会重复进行 dom 操作，只会切换元素的 display：none，较高的初始渲染性能 -->
        <p v-show="flag">v-show 控制元素 </p>
        <!-- 如果涉及到频繁的切换，不要使用 v -if -->
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {flag: false},
            methods: {toggle() {this.flag = !this.flag}
            }
        })
    </script>
</body>

正文完
html5
发表至： javascript
2019-10-05
 0
在单独的js文件里用i18n
关于javascript:手写Promise12promise加入异步逻辑
还不打算去认识一下webpack?
JS每日一题:Webpack如何实现一个Loader？