指令系统：

所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。

在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。

1. v-if   v-else-if   v-else

2. v-show

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. v-bind   简写为 :

4. v-on      简写为 :@

5. v-for

6. v-html

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{padding: 0; margin: 0;}

        .box{width: 100px;height: 100px;background-color: red;}

        .box2{background-color: green;}

        .lunbo ul{width: 180px; overflow: hidden; list-style: none;}

        .lunbo ul li{float: left; width: 30px; height: 30px; background-color: purple; margin-left: 5px; line-height: 30px; text-align: center;

            color: white;}

    </style>

</head>

<body>

<div id="app">

    <!-- 插值语法 react{}  angular{{}}  {% %}  <%= %> -->

    <!-- 除了 if else -->

    <h3>{{123}}</h3>

    <h3>{{msg}}</h3>

    <h3>{{1>2?"真的":"假的"}}</h3>

    <div v-if = 'show'>哈哈哈哈</div>

    <!-- <button v-on:click = 'clickHandler' >切换</button> -->

    <button @click = 'clickHandler' >切换</button>

    <div v-if="Math.random() > 0.5">

          Now you see me

    </div>

    <div v-else>

          Now you don't

    </div>

    <h3 v-show='iShow' v-bind:title="title">我是一个三级标题</h3>

    <img v-bind:src="imgSrc" :title="time" width="100px;height100px;">

    <!--

        v-bind:      简便写法   ：

        v-on:click   简便写法   @click

     -->

    <div class="box" :class="{box2:isGreen,box3:isYellow}"></div>

    <button @click='changeColor'>切换颜色</button>

    <button @click='count+=1'>加{{count}}</button>

    <!--

         声明式的指令

          命令式的

     -->

     <div class='lunbo'>

         <img :src="currentSrc" @mouseenter='closeTimer' @mouseleave='openTimer' width="100" height="100">

         <ul>

             <li v-for = "(item,index) in imgArr" @click='currentHandler(item)'>{{index+1}}</li>

         </ul>

     </div>

     <button @click='nextImg'>下一张</button>

     <div v-html="str"></div>

</div>

<script type="text/javascript" src="./vue.js"></script>

<script type="text/javascript">

    // vue的实例化对象

    // MVVM  model view viewmodel

    // MTV model template view 

    // 指令系统 v-* 

    // 核心思想概念： 数据驱动视图 ，双向的数据绑定

    var app = new Vue({

        el: "#app",

        data: {

            msg:"今天学习vue",

            msg2:"今天学习vue2",

            show:false,

            iShow:true,

            title:"哈哈哈",

            imgSrc:"./5.jpg",

            time: `页面加载于${new Date().toLocaleString()}`,

            isGreen:true,

            isYellow:true,

            count:0,

            imgArr:[

                {id:1,src:'./1.jpg'},

                {id:2,src:'./2.jpg'},

                {id:3,src:'./3.jpg'},

                {id:4,src:'./4.jpg'}

            ],

            currentSrc:"./1.jpg",

            currntIndex:0,

            timer:null,

            str:"<p>嘿嘿嘿</p>"

        },

        created(){

            // 加载dom之前

            // 开启定时器

            // 获取cookie session 提前获取出来

            this.timer = setInterval(this.nextImg,2000)

        },

        methods:{

            clickHandler(){

                this.show = !this.show;

            },

            changeColor(){

                this.isGreen = !this.isGreen

            },

            currentHandler(item){

                this.currentSrc = item.src

            },

            nextImg(){

                if (this.currntIndex == this.imgArr.length-1){

                    this.currntIndex=-1

                }

                this.currntIndex++

                this.currentSrc = this.imgArr[this.currntIndex].src

            },

            closeTimer(){

                clearInterval(this.timer)

            },

            openTimer(){

                this.timer = setInterval(this.nextImg,2000)

            }

        }

    })

    // 直接取操作dom 但是不介意这样用！，应该使用vue对dom操作

    console.log(app)

    console.log(app.$el)

    console.log(app.$data.msg)

    console.log(app.msg)

    console.log(app.msg2)  

</script>

</body>

</html>

<!-- 找相关资料

    开发者网络

    上一张；

 -->

vue - 指令系统的更多相关文章

  1. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

  2. vue——指令系统

    指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 在vue中提供了一套为数 ...

  3. vue 指令系统的使用

    所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...

  4. vue指令系统

    一.vue基础 使用vue需在官网上先下载vue.js,网址:https://cn.vuejs.org/v2/guide/installation.html.然后: 在project中引入vue.js ...

  5. 3. Vue - 指令系统

    一.vue指令 (1) v-if // 条件判断 如果条件成立就在页面上生成一个标签并显示出来 (2) v-show //DOM中都存在只是显示与否 (3) v-for //注意 v-bind:key ...

  6. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  7. vue-learning：3-template-{{}}-and-v-html

    插值{{ }} 和 v-html 本节开始,我们按如下顺序学习vue模板API-指令.点击各部分的DEMO可在线查看代码 输出字符串文本内容的插值:{{}} 输出HMTL元素作为内容的指令:v-htm ...

  8. vue-learning：2 - template - directive

    指令 directive 在上一节我们知道,VUE的template模板通过VUE指令API实现与页面的视图层联系.所以本节将聚集在实现视图层交互的VUE指令系统directive的基础使用. 我们先 ...

  9. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

随机推荐

  1. 页面的checkbox框的全选与反选

    if (typeof jQuery == 'undefined') {     alert("请先导入jQuery");} else {    jQuery.extend({    ...

  2. 【Java面试题】45 什么是java序列化，如何实现java序列化？或者请解释Serializable接口的作用。

    我们有时候将一个java对象变成字节流的形式传出去或者从一个字节流中恢复成一个java对象,例如,要将java对象存储到硬盘或者传送给网络上的其他计算机,这个过程我们可以自己写代码去把一个java对象 ...

  3. 清理SYSAUX表空间的WRH$_LATCH_CHILDREN表

    周六 被突然起来的短信 轰醒. 一看有63条短信. 都是来之与监控中的.有关表空间大小超过某个警戒值. 发现 SYSAUX表空间超过了15GB 通过以下代码查看SYSAUX表空间的功能占用情况 SEL ...

  4. Python学习笔记（三）——迭代

    知识点 迭代 迭代 什么是迭代呢?和递归又有什么区别呢? 根据维基百科和网上的资料: 迭代:迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”, ...

  5. xpath的数据和节点类型以及XPath中节点匹配的基本方法

    XPath数据类型  XPath可分为四种数据类型:  节点集(node-set)  节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集.  布尔值(boolean)  ...

  6. Win8快捷键收集大汇总

    键盘党的用户有福了,熟悉操作系统快捷键,提高开发效率. Windows 8 常用快捷键: Windows 键 可在开始屏幕主菜单及最后一个应用程序间循环切换 Windows 键 + C 打开“超级按钮 ...

  7. html 页面模块的常用命名

    头:header         内容:content/container         尾:footer         导航:nav         侧栏:sidebar         栏目: ...

  8. Navicat for MySQL使用手记(上）--创建数据库和表

    在管理MySQL数据库的图形化工具中,最为熟知的就是phpMyAdmin和Mysql-Front了,今天跟大家分享另外一个管理mysql数据库的另外一个利器---Navicat MySQL. Navi ...

  9. JavaScript------生成Guid方法

    转载: http://blog.csdn.net/limm33/article/details/51536529 代码: function newGuid() { var guid = "& ...

  10. Don‘t talk.Just do it.

    对于算法,自己掌握的还是不多.并且我发现对于一个算法的理解非常重要.也许你会发现你貌似会用某总算法但是,他一旦变形,自己就无从下手. 还有就是对于算法.最好每次都自己敲,这样不仅能添加对于算法的熟度. ...