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>
Vue的基本指令的使用1的更多相关文章
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- vue 通过自定义指令实现 置顶操作；
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Vue(九) 自定义指令
前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
随机推荐
- Java反射之Class类
接下来的几章,我们谈一谈java的反射机制. 反射就是从一个java类中映射出一个java类或是一个实例.通常在很多框架中都用到反射,比如常用的ssm框架,在配置文件中总是会写到类的全名,框架通过读取 ...
- 使用mitmproxy抓包手机APP的配置步骤
转: https://www.jianshu.com/p/8ee3f9f46d7a 注意 1. 手机安装完证书之后还有一步 “证书信任设置” 操作 2. 手机设置代理的时候 ip地址和电脑本机是一样的
- Python装饰器及内置函数
装饰器 听名字应该知道这是一个装饰的东西,我们今天就来讲解一下装饰器,有的铁子们应该听说,有的没有听说过.没有关系我告诉你们这是一个很神奇的东西 这个有多神奇呢? 我们先来复习一下闭包 def fun ...
- 区间DP（力扣1000.合并石头的最低成本）
一.区间DP 顾名思义区间DP就是在区间上进行动态规划,先求出一段区间上的最优解,在合并成整个大区间的最优解,方法主要有记忆化搜素和递归的形式. 顺便提一下动态规划的成立条件是满足最优子结构和无后效性 ...
- C# MP3播放帮助类
本文为原创文章如需转载请注明出处: /// <summary> /// ************************************************* /// 类名:M ...
- MySQL设置外键报错 #1452 - Cannot add or update a child row: a foreign key constraint fails 解决方法
MySQL数据库,当我尝试在A表中设置B表的主键为外键时,报出错误:#1452 - Cannot add or update a child row: a foreign key constraint ...
- 下载网页中的 pdf 各种姿势，教你如何 carry 各种网页上的 pdf 文档。
关联词: PDF 下载 FLASH 网页 HTML 报告 内嵌 浏览器 文档 FlexPaperViewer swfobject. 这个需求是最近帮一个妹子处理一下各大高校网站里的 PDF 文档下载, ...
- Spring Cloud 系列之 Netflix Hystrix 服务监控
Actuator Hystrix 除了可以实现服务容错之外,还提供了近乎实时的监控功能,将服务执行结果和运行指标,请求数量成功数量等等这些状态通过 Actuator 进行收集,然后访问 /actuat ...
- Web_XML
第1章 XML简介 “当 XML(扩展标记语言)于 1998 年 2 月被引入软件工业界时,它给整个行业带来了一场风暴.有史以来第一次,这个世界拥有了一种用来结构化文档和数据的通用且适应性强的格式,它 ...
- [Docker02]Docker_registry
部署Docker仓库 Docker registry #检查端口5000是否被占用 netstat -tunlp | grep 5000 # the local host ip is 172.17.0 ...