1.v-cloak

作用：解决插值表达式闪烁的问题

当网速过慢时，或者加载数据时间过长时，网页会出现  {{msg}}  的现象

使用方法：

<!--缺陷需要写style样式-->

<style>

            [v-cloak] {

                display: none;

            }

        </style>

<h1 v-cloak>{{meg}}===============</h1>

2.v-text

作用：解决插值表达式闪烁的问题

使用方法：

<!--缺陷：会覆盖元素内部的内容-->

<h1 v-text="meg">==============</h1>

3.v-html

作用：解析html代码

使用方法：

<!--缺陷：会覆盖元素内部的内容-->

<h1 v-text="meg">==============</h1>

4.v-bind

作用：绑定属性，将html的属性转化为vue.js的属性

使用方法

<input type="button" value="按钮" v-bind:title="mytitle+'123456'" />

<!--简写方式-->

<input type="button" value="按钮" :title="mytitle+'123456'" />

5.v-on

作用：绑定事件，将html的事件转化为vue.js的事件

使用方法

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

<!--缩写形式-->

<input type="button" value="按钮" @click="show" />

6.v-model

作用：双向数据的绑定  v-m 和 m-v

使用方法：

<!--缺陷： 只能运用在表单元素中<input type="">-->

<input type="text" v-model="msg" />

以上指令用到的数据

<script>

            var vm = new Vue({ //vm就是 mvvm中的调度者vm

                el: '#app',

                data: {

                    meg: '123',

                    meg2: '<h1>我是一个大大的h1</h1>',

                    mytitle: '这是一个自定义的title'

                },

                methods: { //methods中定义了当前Vue的所有可用方法

                    show: function() {

                        alert('hello');

                    }

                }

            })

        </script>

6.根据以上指令完成一个走马灯

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue-2.4.0.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="button" value="浪起来" @click="lang" />

            <input type="button" value="低调" @click="stop"/>

            <h4>{{msg}}</h4>

        </div>

        <script>

            //在vm实例中 会监听自己data中的数据，只要数据发生改变，就会把最新的数据渲染到页面上去

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '猥琐发育别浪~~~~~~~',

                    intervalId:null

                },

                methods: {

                    lang() {

                        //在vm内部中想要获取  data的数据，或者methods中的方法 要使用this 代表这个vm对象

                        //console.log(this.msg);

                        //var _this = this;

                        //function() {} 的建造函数 ()=> 作用内部的this相当于外部的this

                        this.stop()

                        this.intervalId = setInterval(() => {

                            var start = this.msg.substring(0, 1)

                            var emd = this.msg.substring(1)

                            this.msg = emd + start

                        }, 400)

                    },

                    stop(){

                        clearInterval(this.intervalId)

                    }

                },

            })

        </script>

    </body>

</html>

vue.js_02_vue.js的基础指令的更多相关文章

  1. Vue的介绍及基础指令

    一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...

  2. vue学前班004（基础指令与使用技巧）

    我学vue 的最终目的是为了 做apicloud 和vue 的开发  作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议  官网案例走一遍) 基础指令的学习(结合aui ...

  3. vue.js_06_vue.js的自定义指令和自定义键盘修饰符

    1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...

  4. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  5. Vue.js框架的基础指令

    Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...

  6. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  7. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  8. Vue.JS学习基础

      = 导航   顶部 vue.js介绍 vue.js实例 模板语法 计算属性 样式绑定 条件渲染 列表渲染 事件处理器 表单控件绑定 组件   顶部 vue.js介绍 vue.js实例 模板语法 计 ...

  9. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

随机推荐

  1. Javascript加载talbe(包含分页、数据下载功能)

    效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或 ...

  2. Django项目：堡垒机(Linux服务器主机管理系统)--02--02堡垒机设计后台交互程序

    #main.py #本文件写所有的连接交互动作程序 #————————————————02堡垒机设计后台交互程序 开始———————————————— from django.contrib.auth ...

  3. vue知识点汇总

    一.学习vue必须了解的几个知识点  1.node.js介绍 node是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务.说明白些它仅仅是一个平台,我们使用 ...

  4. Mybatis笔记 - 原始Dao开发方法

    使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.原始Dao的开发方式是基于入门程序的基础上,对 控制程序 进行分层开发,程序员需要 编写 Dao接口 和 ...

  5. ASP.NET的Validform验证表单使用说明

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.引用JS <script type="text/javascr ...

  6. Spring事物管理机制简单学习

    首先spring并不直接管理事物,而是提供了多种事物管理器,他们将事务管理的职责委托给Hibernate或者JTA等持久化机制所提供的相关平台框架的事务来实现. Spring管理事物的接口是org.s ...

  7. git-常见问题解决

    1.fatal: refusing to merge unrelated histories 执行 $git pull origin master –allow-unrelated-histories ...

  8. <每日一题>题目5:生成器表达式面试题

    题目: def demo(): for i in range(4): yield i g = demo() g1 = (i for i in g ) g2 = (i for i in g1) prin ...

  9. 03-css选择器

    <!doctype html><!--声明文档类型 网页文档--> <html><!--根目录标签 父级--> <head><!--网 ...

  10. JS流程控制语句 继续循环continue continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

    继续循环continue continue的作用是仅仅跳过本次循环,而整个循环体继续执行. 语句结构: for(初始条件;判断条件;循环后条件值更新) { if(特殊情况) { continue; } ...