<!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>

Vue的基本指令的使用1的更多相关文章

  1. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  2. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  3. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  4. vue 通过自定义指令实现 置顶操作；

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  5. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  6. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  7. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

  8. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  9. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  10. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

随机推荐

  1. 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版【转载】

    前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...

  2. c# 导出excel的两种常见方法

    1,不是用第三方插件(html直接输出) StringBuilder ssb = new StringBuilder(); StringBuilder sb = new StringBuilder() ...

  3. php 生成游戏兑换码（礼包）方法

    最近项目中要做礼包码生成,看了看网上的代码,可以使用php扩展unid 当然我这里并不是用的unid,而是使用的php自带的uniqid,人狠话不多.看代码 /** * 生成礼包接口 100W数据同时 ...

  4. 五分钟学Java：如何学习Java面试必考的网络编程

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 本文思维导图 简介 Java作为一门后端语言,对于网络编程的支持是必不可少的,但是,作为一个经常CRUD的Java工程师,很多时候都不 ...

  5. [UWP]抄抄《CSS 故障艺术》的动画

    1. 前言 什么是故障艺术(Glitch Art 风)?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球.故障艺术它模拟了画面信号 ...

  6. 项目中用到了Redis分布式锁，了解一下背后的原理

    前言 以前在学校做小项目的时候,用到Redis,基本也只是用来当作缓存.现在博主在某金融平台实习,发现Redis在生产中并不只是当作缓存这么简单.在我接触到的项目中,Redis起到了一个分布式锁的作用 ...

  7. wxPython4.0.4关于我们

    源码地址:https://download.csdn.net/download/zy0412326/12154342 wxPython4改版后将AboutBox方特到adv包里面.如果想快速实现GUI ...

  8. 灵感来袭，基于Redis的分布式延迟队列

    延迟队列 延迟队列,也就是一定时间之后将消息体放入队列,然后消费者才能正常消费.比如1分钟之后发送短信,发送邮件,检测数据状态等. Redisson Delayed Queue 如果你项目中使用了re ...

  9. 升级 nop 4.1 Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.

    Incorrect syntax near 'OFFSET'.  Invalid usage of the option NEXT in the FETCH statement. nop.web 项目 ...

  10. 五、运算符的补充与if语句

    1.可变不可变类型 指:对前面所学类型做一个可变和不可变类型的分类 可变类型:值改变,ID不变,证明改的是原值,原值是可以被改变的 不可变类型:值改变,ID也变了,证明是产生新的值,压根没有改变原值, ...