<!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. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  2. 学习ConcurrentHashMap1.7分段锁原理

    1. 概述 接上一篇 学习 ConcurrentHashMap1.8 并发写机制, 本文主要学习 Segment分段锁 的实现原理. 虽然 JDK1.7 在生产环境已逐渐被 JDK1.8 替代,然而一 ...

  3. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  4. Posix线程编程指南(5)

    Posix线程编程指南(5) 杨沙洲 原文地址:http://www.ibm.com/developerworks/cn/linux/thread/posix_threadapi/part5/ 杂项 ...

  5. 微信小程序开发工具报错对应的服务器证书无效

    提示错误信息:“对应的服务器证书无效.控制台输入 showRequestInfo() 可以获取更详细信息.” 解决方法:详情 -->项目设置 --> 选择“不校验安全域名.TLS版本以及H ...

  6. 今天开dev的时候，config update一下别人的，但是忘了自己改过目录了，导致光看ip，想了半天，为什么接口不对

    今天开dev的时候,config update一下别人的,但是忘了自己改过目录了,导致光看ip,想了半天,为什么接口不对 baseUrl: {     //     // dev: 'http://1 ...

  7. Airtest，Poco，Unity自动化测试集成

    作为一个Game Developer,测试部分是必不可少,程序完成需求首先要进行S0相关的测试,这样确保交付到策划验收和QA验收时是没有阻断性的bug或者显而易见代码缺陷.那么如何去做测试用例呢?肯定 ...

  8. 面试话痨（二）C：JAVA String，别以为你穿个马甲我就不认识你了

    面试话痨系列是从技术广度的角度去回答面试官提的问题,适合萌新观看!   面试官,别再问我火箭怎么造了,我知道螺丝的四种拧法,你想听吗? String相关的题目,是面试中经常考察的点,当面试中遇到了St ...

  9. Mol Cell Proteomics. | A Targeted Mass Spectrometry Strategy for Developing Proteomic Biomarkers: A Case Study of Epithelial Ovarian Cancer(利用靶向质谱策略进行上皮性卵巢癌病例的蛋白质组生物标志物研究) (解读人：王聚)

    文献名:利用靶向质谱策略进行上皮性卵巢癌病例的蛋白质组生物标志物研究 期刊名:Molecular & Cellular Proteomics 发表时间:(2019年7月) IF:5.41 单位 ...

  10. Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

    pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言 想必你一定使用过易企秀或百度H5等微场景生成工具 ...