Vue08 -- 内置指令

v-cloak

描述:v-cloak不需要表达式,在Vue实例结束编译时从绑定的html元素中移除,通常和css的display:none;配合使用。当网速慢时,Vue没有加载出来时会出现“{{xxx}}”的字样,直到vue创建完实例,DOM才会被替换,所以屏幕会出现闪烁,还需要在css代码中加上:[v-cloak]:{display: none!important;} 联合使用即可,但在工程化的项目中使用webpack和vue-router时,项目的vue结构只有一个空的div,剩余的内容都是由路由去挂载完成的,所以不在需要使用,v-cloak只适用于简单的项目中

<!DOCTYPE html>
<html>
<head>
    <title>Vue --- 内置指令</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <style type="text/css">
        [v-cloak]:{
            display: none!important;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘这是一段话‘
            }
        })
    </script>
</body>
</html>

v-once

描述:不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,改变message不会因为改变而使页面数据发生变动。

<!DOCTYPE html>
<html>
<head>
    <title>Vue --- 内置指令</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app" >
        <span v-once>{{message}}</span>
        <div v-once>
            <span>{{message}}</span>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘这是一段话‘
            }
        })
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/lee-xingxing/p/11103938.html

时间: 2024-11-09 03:07:57

Vue08 -- 内置指令的相关文章

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域.这个指令一般会出现在比较小的应用中,比如给个demo什么的... 代码如下: <div ng-init="job='fighter'&quo

Angular2 内置指令 NgFor 和 NgIf 详解

http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的Typescript所以在看下

Angular内置指令

以ng前缀开头的都是内置指令,因此不要以ng开头命名自定义指令.此外还有其他内置指令在标签中不易发现,如<a>和<form>. 一,布尔属性 1  ng-disabled 可以在input,textarea,select,button绑定 例一:按钮一直禁用,直到用户在文本字段中输入内容 <input type="text" ng-model="someProperty" placeholder="TypetoEnable&q

AngularJS内置指令

内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先不要管咬文嚼字,用起来倒是易懂,例如: 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.som

AngularJS 内置指令(二)

下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔 离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app 和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域. ng-app 为AngularJS应用创建$rootScope,ng-controller则会以$rootScope或另外一个 ng-controller 的作用域为原型创建新的子作用域. 1. 子作用域: <!doctype html> <html

Angular内置指令(一)

要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng-class,ng-style ng-disabled 当它的值返回true时表示禁用当前元素,返回false时什么都不做 <body> <!--在文本框输入内容时禁用按钮--> <input type="text" ng-model="name&qu

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

AngularJS中的内置指令

AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情.AngularJS的内置指令包括渲染指令.事件指令和节点指令. 渲染指令 ng-bind: <p ng-bind="something"></p> 相当于: <p>{{something}}</p> ng-bind-template: 如果用ng-bind-template,则相当于: <p ng-bind-templa