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. 阿里云SaaS加速器“宜搭”发布宜搭Plus提升6倍研发效率

    9月26日,在杭州云栖大会上,阿里云SaaS加速器的“底座”——“宜搭”正式发布“宜搭Plus”低代码开发平台.开发复杂企业业务系统所需要的领域数据模型.逻辑&服务编排.专业UI页面设计等,都 ...

  2. JLOI 2013 卡牌游戏 bzoj3191

    题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...

  3. XML、JSON、ProtocolBuffer特点比较

    XML JSON PB Lua 数据结构支持 复杂结构 简单结构 较复杂结构 复杂结构 数据保存方式 文本 文本 二进制 文本 数据保存大小 大 一般 小 一般 解析效率 慢 一般 快 稍快 语言支持 ...

  4. vue.js+web storm安装及第一个vue.js

    小白还是自己写一遍吧 1.下载node.js https://nodejs.org/en/download/ 2.安装淘宝镜像(类似于阿里云的maven中央仓库镜像) 安装时间有点长 安装命令:npm ...

  5. sessionStorage 和 localStorage的区别

    sessionStorage.setItem('userName',userName) // 存 sessionStorage.getItem('userName') // 取 sessionStor ...

  6. Mysql优化系列之查询性能优化前篇2

    接前一篇,这一篇主要总结下几个经常要用的命令 命令一:explain+sql mysql> explain select * from servers; +----+-------------+ ...

  7. selenium基础（元素定位）

    selenium的帮助文档: https://selenium-python.readthedocs.io/api.html#module-selenium.common.exceptions 目前支 ...

  8. 2019-8-31-dotnet-core-发布只带必要的依赖文件

    title author date CreateTime categories dotnet core 发布只带必要的依赖文件 lindexi 2019-08-31 16:55:58 +0800 20 ...

  9. Python全栈开发：Ajax全套

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  10. 第二章计算机网络ios 模型

    机构: ISO国际标准化组织: ITU国际电信联盟: ANSI 美国国家标准委员会: ECMA欧洲计算机制作商协会 ITEF因特网特别任务组. 协议:为计算机网路中进行数据交换而建立的规则,标准或约定 ...