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. python截图+百度ocr（图片识别）+ 百度翻译

    一直想用python做一个截图并自动翻译的工具,恰好最近有时间就在网上找了资料,根据资料以及自己的理解做了一个简单的截图翻译工具.整理一下并把代码放在github给大家参考.界面用python自带的G ...

  2. 如何区分无线AP跟无线路由器

    无线AP是一个无线网络的接入点,俗称“热点”.主要有路由交换接入一体设备和纯接入点设备,一体设备执行接入和路由工作,纯接入设备只负责无线客户端的接入,纯接入设备通常作为无线网络扩展使用,与其他AP或者 ...

  3. 段错误 “段错误（segment fault）”、“非法操作，该内存地址不能read/write” 非法指针解引用造成的错误。

    [root@test after_fc_distributed]# ./ffmpeg-linux64-v3.3.1 -i "concat:mymp3tmp/test_0.mp3|mymp3t ...

  4. VS2010-MFC（常用控件：树形控件Tree Control 上）

    转自:http://www.jizhuomi.com/software/200.html 前面两节讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Contr ...

  5. 【题解】洛谷 P1061 Jam的计数法

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...

  6. 一篇关于Matcher find方法深刻理解的文章

    文章目录 知识点 find find(int var1) reset group(int var1) 源码 故事是这样的 探索 问题解决 方法一: 方法二: 方法三: 总结 知识点 find 首先fi ...

  7. MindManager全部快捷键（官方英文文档+中文翻译）

    MindManager全部快捷键 [中文翻译版] ------------------------------------------------------------- 导图文件 创建一个新的导图 ...

  8. Postman提取返回值

    json响应结果 Postman是做接口测试的,但是很多接口并不是直接就能测试的,需要一些预处理.比如登录的时候,需要传递一个token.如果是网页测试,一般打开登录页面的时候就会自动生成一个toke ...

  9. 解决jquery调用NET webservice跨域的问题

    声明,解决方案由网上收集而来,个人整理.有别人的,也有我的. 一.webserive端 1.web.config 需要在web.config的configuration节点中加入如下的黑体部分内容. ...

  10. BezierCode 工具使用

    概要 今天无意间看到一个视频,发现了一款绘画Bezier 图形绘制并自动生成OC代码的神器, 因此马上先记录下. 之前一直很纠结如果程序员自己去绘制图片,久那么使用bezier 自己去画吗? 答案是: ...