zoukankan      html  css  js  c++  java
  • Vue的基本指令的使用1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            [v-cloak] {
                display: none;
            }
    
        </style>
    </head>
    <body>
    <div id="app">
        <!--    插值表达式将data的值取出放到html中渲染-->
        <div>{{ msg }}</div>
        <!--    插值表达式支持数据的运算-->
        <div>{{ 6 + 1 }}</div>
        <!--    给v-cloak设置一个样式,防止闪烁时跳出源码-->
        <div v-cloak>{{ msg }}</div>
        <!--    v-text可以直接将data的文本值取出放到html中渲染,v-text支持运算-->
        <!--    v-text会覆盖原先有的html内容-->
        <!--    v-text  和 v-html 的区别-->
        <!--    v-text输出的是纯文本,浏览器不会对其再进行html解析-->
        <!--    v-html会将其当html标签解析后输出-->
    
        <div v-text="msg"></div>
        <!--    v-html可以直接渲染data中的html,这可能会导致xss攻击-->
        <div v-html="html"></div>
        <!--   v-pre 将原始内容显示,不进行编译,可提高效率-->
        <!--    显示原始信息跳过编译过程-->
        <!--    一些静态的内容不需要编译加这个指令可以加快渲染-->
    
        <div v-pre>{{666}}</div>
        <!--    v-once只进行一次编译后面数据发生改变时不会再变动,取消数据响应式-->
        <!--    执行一次性的插值【当数据改变时,插值处的内容不会继续更新】-->
    
        <div v-once>{{msg}}</div>
        <!--    v-model是一个可以实现数据的双向绑定的指令,限制在 <input>、<select>、<textarea>、components(组件) 中使用-->
        <!--    双向绑定 当数据发生变化的时候,视图也就发生变化  当视图发生变化的时候,数据也会跟着同步变化-->
        <div v-model>{{msg}}</div>
        <!--    v-on:[事件名]实现事件绑定, 绑定的事件为实例的vue对象中的methods里面的属性-->
        <button v-on:click="test">1</button>
        <!--    v-on:可以简写成@-->
        <button @click="test">2</button>
        <button @click="test2(666)">3</button>
    <!--    test和test2(666)的区别-->
    <!--    如何直接写成方法名,默认是代用该方法,且默认传递一个参数`$event`,-->
        <!--    写成括号形式的可以传递多个参数,方便灵活调用,若无参数,则可以写成函数名形式-->
    </div>
    </body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                "msg": "hello world",
                "html": " <h1>hello</h1>"
            },
            methods: {
                test: function () {
                    this.msg = "666"
                },
                test2: function (data) {
                    console.log(data)
    
                }
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    go websocket
    go websocket 调试报错 request origin not allowed by Upgrader
    uniapp中使用阿里巴巴图标iconfont
    TS视频一
    ReactiveCocoa
    weak 的内部实现原理
    谈Objective-C block的实现
    基础面试总结
    理解 iOS 的内存管理
    URL Scheme
  • 原文地址:https://www.cnblogs.com/ivy-blogs/p/12164299.html
Copyright © 2011-2022 走看看