zoukankan html css js c++ java

vue的学习-简单指令（一）

v-text 指令

　　更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
    >
<head>
    <meta charset="UTF-8">
    <title>v-test 指令</title>
</head>
<body>
<div id="app">
    <!-- v-text 指令 等同于 {{msg}} -->
    <span v-text="msg"></span><br>
　　 <span>{{msg}}</span>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            msg: 'Hello Vue'
        },
    })
</script>
</body>
</html>

v-bind 指令

　　动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

　　在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

　　在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

　　没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
    >
<head>
    <meta charset="UTF-8">
    <title>v-bind 指令</title>
</head>
<body>
<div id="app">
    <!-- v-bind 指令 -->
    <span v-bind:title="msg">鼠标悬浮几秒钟查看此处</span>
　　 
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            msg: 'Hello Vue'
        },
    })
</script>
</body>
</html>

v-if 指令 v-else 指令 v-else-if 指令

　　v-if: 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。 v-else: 为 v-if 或者 v-else-if 添加“else 块”。 v-else-if: 表示 v-if 的“else if 块”。可以链式调用。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
    >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- v-if 指令 v-else 指令 v-else-if 指令  判断 -->
    <h4 v-if="ok">YES</h4>
    <h4 v-else="ok">ON</h4>
    <h4 v-if="type === 'A'">A</h4>
    <h4 v-else-if="type === 'B'">B</h4>
    <h4 v-else="type">C</h4>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            ok: true,
            type: "A",
        },
    })
</script>
</body>
</html>

v-for 指令

　　基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
    >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- v-for 指令 循环 -->
    <li v-for="(item, index) in items">{{item.massage}}----{{index+1}}</li>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            items: [
                {"massage": "李辉学习"},
                {"massage": "学习"},
            ],
        },
    })
</script>
</body>
</html>

v-on 指令

　　绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

　　用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

　　在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click="handle('ok', $event)"。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- v-on 指令 事件 -->
    <button v-on:click="sayHi">点击我</button>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
        },
        methods: {   //方法必须定义在 vue的 methods 对象中
            sayHi: function (event) {
                alert(this.msg)
            },
        },
    })
</script>
</body>
</html>

v-model 指令

　　在表单控件或者组件上创建双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    输入的文本：<input v-model="msg" type="text"/>{{msg}}<br>
    输入的文本框：<textarea v-model="msg">{{msg}}</textarea><br>
    点选框：<input type="radio" name="sex" value="男" v-model="lh"/>男
    <input type="radio" name="sex" value="女" v-model="lh"/>女<br>
    <p>选中了性别：{{lh}}</p>
    下拉框：<select v-model="selected">
    <option value="" disabled>--请选择--</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
    <p>选中了：{{selected}}</p>
    <hr>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            msg: "hello vue!",
            lh: "",
            selected: "",
        },
    })
</script>
</body>
</html>

v-html 指令

　　更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>v-html 指令</title>
</head>
<body>
<div id="app">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            rawHtml: 'Hello Vue'
        },
    })
</script>
</body>
</html>

v-show 指令

　　不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>v-show 指令</title>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            ok: false, // true  显示
            rawHtml: 'Hello Vue'
        },
    })
</script>
</body>
</html>

v-slot 指令

　　提供具名插槽或需要接收 prop 的插槽。 (插槽)

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-times slot="todo-times" v-for="time in times" :time="time"></todo-times>
    </todo>

</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    // 定义一个 vue 的组件component
    Vue.component("todo", {
        template: '<div> 
            <slot name="todo-title"></slot> 
            <li> 
            <slot name="todo-times"></slot> 
            </li> 
            </div>',
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<span>{{title}}</span>'
    });
    Vue.component("todo-times",{
        props: ["time"],
        template: '<li>{{time}}</li>'
    });

    let vm = new Vue({
        el: "#app",
        data:{
            title: "李辉",
            times: ["Java","Vue","Spring"]
        },

    })
</script>
</body>
</html>

v-pre 指令

　　跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>v-pre 指令</title>
</head>
<body>
<div id="app">
    <span v-pre>{{ this will not be compiled(这将不会被编译) }}</span>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            message: 'Hello Vue',
        },
    })
</script>
</body>
</html>

v-cloak 指令

　　这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。不会显示，直到编译结束。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>v-cloak 指令</title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app">
    <div v-cloak>
        {{ message }}
    </div>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            message: 'Hello Vue',
        },
    })
</script>
</body>
</html>

v-once 指令

　　只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>v-once 指令</title>
</head>
<body>
<div id="app">
    <!-- 单个元素 -->
    <span v-once>This will never change: {{msg}}</span>
    <!-- 有子元素 -->
    <div v-once>
        <h1>comment</h1>
        <p>{{msg}}</p>
    </div>
    <!-- 组件 -->
    <my-component v-once :comment="msg"></my-component>
    <!-- `v-for` 指令-->
    <ul>
        <li v-for="i in list" v-once>{{i}}</li>
    </ul>
</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            msg: 'Hello Vue',
            list:["Java",'Vue']
        },
    })
</script>
</body>
</html>

注1：插槽

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-times slot="todo-times" v-for="(time, index) in times"
                    :time="time" :index="index" v-on:remove="del"></todo-times>
    </todo>

</div>
<!-- 导入 Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    // 定义一个 vue 的组件component
    Vue.component("todo", {
        template: '<div> 
            <slot name="todo-title"></slot> 
            <li> 
            <slot name="todo-times"></slot> 
            </li> 
            </div>',
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<span>{{title}}</span>'
    });
    Vue.component("todo-times",{
        props: ["time",'index'],
        template: '<li>{{index}}----{{time}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit("remove",index);
            }
        }
    });

    let vm = new Vue({
        el: "#app",
        data:{
            title: "李辉",
            times: ["Java","Vue","Spring"]
        },
        methods: {
            del: function (index) {
                this.times.splice(index, 1)
            }
        }

    })
</script>
</body>
</html>

查看全文

相关阅读:
前端面试题目汇总摘录（HTML 和 CSS篇）
The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第二章)
算法复习：动态规划
 算法复习：回溯法
 算法复习：图
 算法复习：二叉树专题
 算法复习：最短路Dijkstra
算法复习：BFS与DFS
算法复习：标记数组 / 数组

原文地址：https://www.cnblogs.com/lihui123/p/14188627.html