Vue基础入门讲义-指令

Posted IT-熊猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础入门讲义-指令相关的知识，希望对你有一定的参考价值。

文章目录

1.什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

2.插值表达式

2.1.花括号

格式：

表达式

说明：

  • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
  • 可以直接获取Vue实例中定义的数据或函数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    msg
</div>
<script>
    let app = new Vue(
        el:"#app",
        data:
            msg:"hello vue"
        
    );
</script>
</body>
</html>

2.2.插值闪烁

使用方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的 ，加载完毕后才显示正确数据，称为插值闪烁。类似如下的效果（最新vue是几乎没有此问题）：

2.3.v-text和v-html

使用v-text和v-html指令来替代

说明：

  • v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
  • v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

改造原页面内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    v-text:<span v-text="msg"></span><br>
    v-html:<span v-html="msg"></span><br>
</div>
<script>
    let app = new Vue(
        el:"#app",
        data:
            msg:"<h2>hello, vue.</h2>"
        
    );
</script>
</body>
</html>

效果：

并且不会出现插值闪烁，当没有数据时，会显示空白。

3.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox" value="Java" v-model="language">Java<br>
    <input type="checkbox" value="php" v-model="language">PHP<br>
    <input type="checkbox" value="Swift" v-model="language">Swift<br>
    <h2>
        你选择了：language.join(",")
    </h2>
</div>
<script>
    let app = new Vue(
        el:"#app",
        data:
            language:[]
        
    );
</script>
</body>
</html>
  • 多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
  • radio对应的值是input的value值
  • input 和 textarea 默认对应的model是字符串
  • select 单选对应字符串，多选对应也是数组

效果：

4.v-on

4.1.基本用法

v-on指令用于给页面元素绑定事件。

语法：

v-on:事件名="js片段或函数名"

简写语法：

@事件名="js片段或函数名"

例如 v-on:click='add' 可以简写为 @click='add'

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num = num
    </h2>
</div>
<script>
    let app = new Vue(
        el:"#app",
        data:
            num:1
        ,
        methods:
            decrement()
                this.num--;
            
        
    );
</script>
</body>
</html>

效果：

4.2.事件修饰

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--直接写js片段-->
    <button @click="num++">增加</button>
    <!--使用函数名，该函数必须要在vue实例中定义-->
    <button @click="decrement">减少</button>
    <h2>
        num = num
    </h2>
    <hr>
    事件冒泡测试：<br>
    <div style="background-color: lightblue;width: 100px;height: 100px" @click="print('你点击了div')">
        <button @click.stop="print('点击了button')">点我试试</button>
    </div>
    <br>阻止默认事件：<br>
    <a href="http://www.xxxxxxx.cn" @click.prevent="print('点击超链接')">vue</a>
</div>
<script>
    let app = new Vue(
        el: "#app",
        data: 
            num: 1
        ,
        methods: 
            decrement() 
                this.num--;
            ,
            print(msg) 
                console.log(msg)
            
        
    );
</script>
</body>
</html>

事件修饰符：语法v-on:xxxx.修饰符，常用的修饰符有：

.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

5.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

5.1.遍历数组

语法：

v-for="item in items"
  • items：要遍历的数组，需要在vue的data中定义好。
  • item：循环变量

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="user in users">user.name--user.age--user.gender</li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue(
        el: "#app",//el即element，要渲染的页面元素
        data: 
            users: [
                "name": "bruce", "age": 8, "gender": "男",
                "name": "tom", "age": 12, "gender": "女",
                "name": "jack", "age": 4, "gender": "男"
            ]
        
    );
</script>
</body>
</html>

效果：

5.2.数组角标

在遍历的过程中，如果需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"
  • items：要迭代的数组
  • item：迭代得到的数组元素别名
  • index：迭代到的当前元素索引，从0开始。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users">
            index--user.name--user.age--user.gender
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue(
        el: "#app",//el即element，要渲染的页面元素
        data: 
            users: [
                "name": "bruce", "age": 8, "gender": "男",
                "name": "tom", "age": 12, "gender": "女",
                "name": "jack", "age": 4, "gender": "男"
            ]
        
    );
</script>
</body>
</html>

效果：

5.3.遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，得到的是对象的值
  • 2个参数时，第一个是值，第二个是键
  • 3个参数时，第三个是索引，从0开始

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(user, index) in users" :key="index">
            index--user.name--user.age--user.gender
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value,key,index) in person">
            index--key--value
        </li>
    </ul>
</div>
<sc
以上是关于Vue基础入门讲义-指令的主要内容，如果未能解决你的问题，请参考以下文章
 

 Vue入门基础


 Vue.js 基础指令实例讲解（各种数据绑定表单渲染大总结）——新手入门高手进阶


 Vue基础入门讲义-环境配置


 Vue.js 入门


 新人成长之入门Vue.js指令介绍


 1-Vue-vue.js的快速入门使用，常用指令