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. Vue+Iview+Node 项目结构和配置

    1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件  config:项目相关配置  driective:指令   router:路由   store:状态管 ...

  2. ArrayList 扩容

    处理容量是0, 第一次add的时候扩充到10 int newCapacity = oldCapacity + (oldCapacity >> 1); // 扩容50% 变成 1.5倍 第二 ...

  3. 第三篇：异步请求遇上for循环怎么做

    场景:读取Excel数据(地名),发送请求到百度地图,从返回的json格式数据取出坐标数据(逗号隔开的两个float型数值),拼接成了分号隔开的一个字符串data,接下来需要利用“百度坐标转换API” ...

  4. python基础语法（数据类型转换）

  5. CVE-2015-0235

    看了下代码,由于各人能力问题,只是了解了漏洞的起因,知道哪里出了问题,但是不知道怎么用阿... 可怜... 这种漏洞,公布出来,只要不给EXP,估计威胁都不大.或者,就是我脑筋太死??? 首先,是网上 ...

  6. [JZOJ3168] 【GDOI2013模拟3】踢足球

    题目 描述 题目大意 有两个队伍,每个队伍各nnn人. 接到球的某个人会再下一刻随机地传给自己人.敌人和射门,射门有概率会中. 每次射门之后球权在对方111号选手. 某个队伍到了RRR分,或者总时间到 ...

  7. 廖雪峰Java14Java操作XML和JSON-1XML-4第三方XML库

    总结: 使用Jackson可以快速在XML和JavaBean之间互相转换 可使用Annotation定制序列化和反序列化

  8. 廖雪峰Java11多线程编程-2线程同步-4wait和notify

    wait和notify synchronized解决了多线程竞争的问题 我们可以在synchronized块中安全的对一个变量进行修改,但是它没有解决多线程协调的问题. 例如设计一个TaskQueue ...

  9. 如何使用C++获取 进程的 绝对路径

    DWORD GetProcessId(IN PCHAR szExeName) { DWORD dwRet = 0; DWORD dwCount = 0; HANDLE hSnapshot = Crea ...

  10. Joomla - 自定义（自定义模块、修改原有模块样式、添加全局JS）

    一.自定义模块 自定义模块 参考 Joomla - 模块系统(新建模块.模块类别.自定义模块)第三点 自定义模块部分 自定义模块布局 参考 Joomla - T3模板(非常好用的4屏响应式模板) 的第 ...