Vue学习day02--指令

标签: vue.js学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习day02</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--vue所控制的这个区域,就是mvvm中的v-->
    <div id="app">
        <p v-cloak>======{{msg}}=====</p>
        <h3 v-text="msg">====</h3>
        <h3 v-text="context">====</h3>
        <h3 v-html="context"></h3>
    </div>
    <script>
        //我们new出来的vm对象,就是我们mvvm中的调度者vm
       var vm =  new Vue({
            el: '#app',//表示当我们new的这实例,要控制页面上哪个区域
           //data就是mvvm中的m,专门用来保存每个页面数据的
           data:{//data属性中,存放的是el中要用到的数据
                msg:'Hello Vue!',//通过Vue提供的指令,很方便吧数据渲染到页面上,不需要操作DOM元素了。
                context:'<h1>hello H1</h1>'
           }
        })
    </script>
</body>
</html>

1、v-clock

解决差值表达式闪烁问题。并且差值表达式前后可以添加任何内容。不会把整个元素内容清空

<p v-cloak>======{{msg}}=====</p>

效果:

2、v-text

没有闪烁问题。会清空覆盖原本的内容

<h3 v-text="msg">====</h3>

效果:

3、v-html

会把内容当做html解析

<h3 v-text="context">====</h3>
<h3 v-html="context"></h3>
var vm =  new Vue({
     el: '#app',//表示当我们new的这实例,要控制页面上哪个区域
    //data就是mvvm中的m,专门用来保存每个页面数据的
    data:{//data属性中,存放的是el中要用到的数据
         msg:'Hello Vue!',//通过Vue提供的指令,很方便吧数据渲染到页面上,不需要操作DOM元素了。
         context:'<h1>hello H1</h1>'
    }

效果:

4、v-bind

用于绑定属性的指令。可以缩写为,“ :  ”冒号

<input type="button" value="按钮" v-bind:title="thistitle">
var vm =  new Vue({
     el: '#app',//表示当我们new的这实例,要控制页面上哪个区域
    //data就是mvvm中的m,专门用来保存每个页面数据的
    data:{//data属性中,存放的是el中要用到的数据
         msg:'Hello Vue!',//通过Vue提供的指令,很方便吧数据渲染到页面上,不需要操作DOM元素了。
         context:'<h1>hello H1</h1>',
         thistitle:'这是一个大按钮'
    }
 })

效果:

5、v-on

用于绑定事件绑定。v-on:可以缩写为,@

<input type="button" value="按钮" v-on:click="show">//缩写@click="show"

var vm =  new Vue({
     el: '#app',//表示当我们new的这实例,要控制页面上哪个区域
    //data就是mvvm中的m,专门用来保存每个页面数据的
    data:{//data属性中,存放的是el中要用到的数据
         msg:'Hello Vue!',//通过Vue提供的指令,很方便吧数据渲染到页面上,不需要操作DOM元素了。
         context:'<h1>hello H1</h1>',
         thistitle:'这是一个大按钮'
    },
    methods:{//methods定义了当前vue实例可用的方法
         show:function () {
             alert("弹框")
         }
    }
 })

效果:

版权声明:本文为No_overtime_apes原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/No_overtime_apes/article/details/105060571

智能推荐

OpenCV学习之路(五)图像的几何变换

在这一章将要学习图像的移动、旋转,仿射变换等 扩展缩放 我们如果想要改变图像的大小,我们就需要对图像进行扩展缩放,opencv提供给我们控制扩展缩放的函数: 参数解释: src:进行扩展缩放的原图片 dst:可以在此处设置缩放因子,也可手动设置尺寸 interpolation:在缩放时我们推荐使用cv2.INTER_AREA, 在扩展时我们推荐使用cv2.INTER_CUBIC(慢) 和 cv2....

2018.8.27

2018.8.27...

HTML 表单元素的基本样式

HTML 表单元素的基本样式 原创 ixygj197875 发布于2018-02-22 17:48:53 阅读数 2296 收藏 更新于2018-05-20 15:35:58 分类专栏: 揭秘 CSS 揭秘 CSS 收起 表单元素主要包括 label、input、textarea、select、datalist、******、progress、meter、output等,以及对表单元素进行分组的 ...

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

猜你喜欢

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...