qka棋牌游戏大厅 当前位置:首页>qka棋牌游戏大厅>正文

qka棋牌游戏大厅

发布时间:2018-11-17

原标题:Vue 2.0基础语法:系统指令

Vue 2.0基础语法:系统指令


本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端。

以下是正文。

Vue初体验

新建一个空的项目,引入vue.js文件。写如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue的版本:2.5.15-->
    <script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
    {{name}}
</div>
</body>

<script>
    //new出来的对象就是MVVM中的 View Module
    var myVue = new Vue({
        el: "#div1", //当前vue对象将接管上面的div区域
        data: {//data就是MVVM中的 module
            name: "smyhvae"
        }
    });
</script>
</html>

显示效果:

如果我们在控制台输入myVue.data+="123",页面会自动更新name的值。

下面来讲一下Vue的各种系统指令。

v-on:注册事件

v-on 的用法举例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本:2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <!--这个div区域就是MVVM中的 View-->
  <div id="div1">
    <!-- 给button节点绑定按钮的点击事件 -->
    {{name}}
    <button v-on:click="change">改变name的值</button>
  </div>


</body>

<script>
  //new出来的对象就是MVVM中的 View Module
  var myVue = new Vue({
    el: "#div1", //当前vue对象将接管上面的div区域
    data: { //data就是MVVM中的 module
      name: "smyhvae"
    },
    //注意,下方这个 `methods` 是Vue中定义方法的关键字,不能改
    methods: {
      change: function() { //上面的button按钮的点击事件
        this.name += "1";
      }
    }
  });
</script>

</html>

上方代码中,我们给button按钮绑定了点击事件。注意,这个button标签要写在div区域里(否则点击事件不生效),因为下方的View module接管的是div区域。

v-on的简写形式

例如:

    <button v-on:click="change">改变name的值</button>

可以简写成:

    <button @click="change">改变name的值</button>

v-on的常用事件

  • v-on:click

  • v-on:keydown

  • v-on:keyup

  • v-on:mousedown

  • v-on:mouseover

  • v-on:submit

  • ....

v-on的事件修饰符

v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下:

  • .stop 阻止冒泡。本质是调用 event.stopPropagation()。

  • .prevent 阻止默认事件。本质是调用 event.preventDefault()。

  • .capture 添加事件监听器时,使用 capture 模式。

  • .self 只有当事件是从侦听器绑定的元素本身触发时,才触发回调。

  • `.{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时,才触发回调。

  • `.native 监听组件根元素的原生事件。

写法示范:

          <!-- click事件 -->
        <button v-on:click="doThis"></button>

        <!-- 缩写 -->
        <button @click="doThis"></button>

        <!-- 内联语句 -->
        <button v-on:click="doThat("hello", $event)"></button>

        <!-- 阻止冒泡 -->
        <button @click.stop="doThis"></button>

        <!-- 阻止默认行为 -->
        <button @click.prevent="doThis"></button>

        <!-- 阻止默认行为,没有表达式 -->
        <form @submit.prevent></form>

        <!--  串联修饰符 -->
        <button @click.stop.prevent="doThis"></button>

举例:(.prevent的用法举例)

现在有一个form表单:

    <form action="http://www.baidu.com">
      <input type="submit" value="表单提交">
    </form>

我们知道,上面这个表单因为type="submit",因此它是一个提交按钮,点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。

现在,我们可以用.prevent来阻止这种默认行为。修改为:点击按钮后,不提交到服务器,而是执行我们自己想要的事件(在submit方法中另行定义)。如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue2.5.16.js"></script>
</head>

<body>
  <div id="app">
    <!-- 阻止表单中submit的默认事件 -->
    <form @submit.prevent action="http://www.baidu.com">
      <!-- 执行自定义的click事件 -->
      <input type="submit" @click="mySubmit" value="表单提交">
    </form>

  </div>
</body>

<script>
  new Vue({
    el: "#app",
    data: {
    },
    methods: {
      mySubmit: function() {
        alert("ok");
      }
    }
  });
</script>

</html>

上方代码中,我们通过.prevent阻止了提交按钮的默认事件,点击按钮后,执行的是mySubmit()方法里的内容。这个方法名是可以随便起的,我们甚至可以起名为submit,反正默认的submit已经失效了。

插值表达式 {{}}

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。
无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会自动更新

{{}}对JavaScript 表达式支持,例如:

{{ number + 1 }}

{{ ok ? "YES" : "NO" }}

{{ name == "smyhvae" ? "true" : "false" }}

{{ message.split("").reverse().join("") }}

但是有个限制就是,每个绑定都只能包含单个表达式,如下表达式无效:

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

v-text

v-text可以将一个变量的值渲染到指定的元素中。例如:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--vue的版本:2.5.15-->
  <script src="vue.js"></script>
</head>

<body>
  <div id="div1">
    <span v-text="name"></span>
  </div>
</body>

<script>
  new Vue({
    el: "#div1",
    data: {
      name: "hello smyhvae"
    }
  });
</script>

</html>

结果:

v-html

v-text是纯文本,而v-html会被解析成html元素。

注意:使用v-html渲染数据可能会非常危险,因为它很容易导致 XSS(跨站脚本) 攻击,使用的时候请谨慎,能够使用{{}}或者v-text实现的不要使用v-html。

v-cloak

v-cloak:保持和元素实例的关联,直到结束编译后自动消失。

这个指令和CSS 规则一起用的时候,可以隐藏未编译的标签直到实例准备完毕。比如说,在网络很慢的情况下,通过v-cloak隐藏元素,当加载完毕后,再显示出来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.js"></script>
  <style>

    /*网络很慢时,在span上加上 v-cloak和css样式控制以后,浏览器在加载时会先把span隐藏起来。
    直到 Vue实例化完毕以后,v-cloak 会自动消失,那么对应的css样式就会失去作用,最终将span中的内容呈现给用户 */
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="div1">
    <span v-cloak>{{name}}</span>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: "#div1",
    data: {
      name: "hello1 smyhvae22"
    }
  });
</script>

</html>

v-bind

v-bind:给html元素或者组件动态绑定一个或多个特性,例如动态绑定style和class。

比如说:

    <img v-bind:src="imageSrc">

    <div v-bind:style="{ fontSize: size + "px" }"></div>

上方代码中的imageSrcsize其实是Vue实例里面的变量。

上面两行代码可以简写成:

    <img :src="imageSrc">

    <div :style="{ fontSize: size + "px" }"></div>

举例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>

<body>
  <div id="div1">
    <!-- value里的值只是简单的字符串 -->
    <input type="text" value="name">
    <!-- 加上 v-bind 之后,value里的值是 Vue 里的变量 -->
    <input type="text" v-bind:value="name">
    <!-- 超链接后面的path是 Vue 里面的变量 -->
    <a v-bind="{href:"http://www.baidu.com/"+path}">超链接</a>

  </div>
</body>

<script src="vue.js"></script>
<script>
  new Vue({
    el: "#div1",
    data: {
      name: "smyhvae",
      path: `2.html`
    }
  });
</script>

</html>

效果:

v-model:双向数据绑定

上面的一段中,我们通过v-bind,给<input>标签绑定了data对象里的name属性。当data -> name的值发生改变时,<input>标签里的内容会自动更新。

可我现在要做的是:我在<input>标签里修改内容,要求data -> name的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用v-model这个属性。

代码举例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">

    <form action="#">
        <input type="text" id="username" v-model="myAccount.username">
        <input type="password" id="pwd" v-model="myAccount.userpwd">

        <input type="submit" v-on:click="submit1" value="注册">

    </form>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        //上面的标签中采用v-model进行双向数据绑定,数据会自动更新到data里面来
        data: {
            name: "smyhvae",
            myAccount: {username: "", userpwd: ""}
        },
        //在methods里绑定各种方法,根据业务需要进行操作
        methods: {
            submit1: function () {
                alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);
            }
        }
    });
</script>

</html>

此时,便可实现我们刚刚要求的双向数据绑定的效果。

v-for:for循环

作用:根据数组中的元素遍历指定模板内容生成内容。

引入

比如说,如果我想给一个ul中的多个li分别赋值1、2、3...。如果不用循环,就要挨个赋值:

<body>
  <div id="app">
    <ul>
      <li>{{list[0]}}</li>
      <li>{{list[1]}}</li>
      <li>{{list[2]}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      list: [1, 2, 3]
    }

  });
</script>

效果:

为了实现上面的效果,如果我用v-for进行赋值,代码就简洁很多了:

<body>
  <div id="app">
    <ul>
      <!-- 使用v-for对多个li进行遍历赋值 -->
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
</body>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      list: [1, 2, 3]
    }

  });
</script>

接下来,我们详细讲一下v-for的用法。需要声明的是,Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法

数组的遍历赋值

针对下面这样的数组:

<script>
  new Vue({
    el: "#app",
    data: {
      arr1: [2, 5, 3, 1, 1],
    }
  });
</script>

将数组中的赋给li:

      <li v-for="item in arr1">{{item}}</li>

将数组中的值和index赋给li:

      <!-- 括号里如果写两个参数:第一个参数代表值,第二个参数代表index -->
      <li v-for="(item,index) in arr1">值:{{item}} --- 索引:{{index}}</li>

效果如下:

对象的遍历赋值

针对下面这样的对象:

<script>
  new Vue({
    el: "#app",
    data: {
      obj1: {
        name: "smyhvae",
        age: "26",
        gender: "男"
      }
    }
  });
</script>

将上面的obj1对象的数据赋值给li,写法如下:

<body>
  <div id="app">
    <ul>
      <!-- 括号里如果写两个参数:则第一个参数代表value,第二个参数代表key -->
      <li v-for="(value,key) in obj1">值:{{value}} --- 键:{{key}} </li>

      <h3>---分隔线---</h3>

      <!-- 括号里如果写三个参数:则第一个参数代表value,第二个参数代表key,第三个参数代表index -->
      <li v-for="(value,key,index) in obj1">值:{{value}} --- 键:{{key}} --- index:{{index}} </li>
    </ul>
  </div>
</body>

效果如下:

v-if:设置元素的显示和隐藏

作用:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。

在切换时,元素和它的数据绑定会被销毁并重建。

举例如下:(点击按钮时,切换和隐藏盒子)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">显示/隐藏</button>
    <div v-if="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果如下:

v-show:设置元素的显示和隐藏

作用:根据表达式的真假条件,来切换元素的 display 属性。如果为false,则在元素上添加 display:none属性;否则移除display:none属性。

举例如下:(点击按钮时,切换和隐藏盒子)

我们直接把上一段代码中的v-if改成v-show就可以了:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <button v-on:click="toggle">显示/隐藏</button>
    <div v-show="isShow">我是盒子</div>
  </div>
</body>

<script>
  new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    methods: {
      toggle: function() {
        this.isShow = !this.isShow;
      }
    }
  });
</script>

</html>

效果如下:

v-if和v-show的区别

v-ifv-show都能够实现对一个元素的隐藏和显示操作。但是v-if是添加/删除DOM元素,而v-show是在这个元素上添加/移除style="display:none"属性。

我的公众号

想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam)。

扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:

当前文章:http://www.radiokey.biz/5mqiq.html

发布时间:2018-11-17 04:46:36

方块战争电脑版下载 杰克棋牌官网 杰克棋牌下载安装 金贝棋牌网页版 来一把麻将手机版视频 领域棋牌游戏官方下载 棋牌代理赚钱吗? 万豪棋牌游戏电脑下载 赢三张棋牌游戏 最新棋牌游官网

92915 76278 51971 27205 37727 6532512015 60461 66111

责任编辑:通卓侯

随机推荐