Vue数据接收与指令详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Shmily____/article/details/81256515

本文介绍了Vue如何接收数据，并详细讲解了Vue的各种指令，包括数据输出、条件渲染、列表渲染、属性绑定和事件绑定等。重点阐述了v-text、v-if、v-for、v-model和v-on的用法及它们之间的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的数据接收

首先我们new一个vue的实例

id值为app的div的区域是我们的一个模板区域

接收数据使用双大括号里面写变量或者函数都可以

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

<body>

<div id="app">

电影名：{{name}}

上映日期：{{time}}

这部电影是{{type(time)}} 电影

<div v-bind:title="name">

        hover me!!!

</div>

</div>

<script type="text/javascript">

  new Vue ({

     el:"#app",

     data:{

            name:"后来的我们",

            time:"2018"

     },

     methods:{type:function(time){

            return time>2000?"新":"旧";

        }

     }

  })

</script>

</div>

</body>

</html>

Vue的指令：

指令：根据不同的需求和结构进行结构渲染，写在标签属性的位置，以v-开头，格式为v-"指令"="表达式"，指令会根据指令和表达式的不同对标签产生影响

v-text、v-html、v-cloak、v-once、v-pre（内容输出指令）data中的数据如果通过{{}}输出，里面的标签也会作为字符串输出，这里主要是考虑到安全性的问题，但使用v-html就可以保证输出的标签变成标签了，v-once则会让{{}}中的数据只显示第一次的结果，不会跟着数据变化而变化
v-show、v-if、v-else、v-ele-if（条件渲染指令）v-show和v-if的区别，一个是根据布尔值隐藏和显示元素，一个是根据布尔值决定是否创建该元素，if经常和else配合使用，例如我们可以做一个登陆显示欢迎，未登录显示请登录的一个效果
v-for（列表渲染指令）通过v-for="u,index of users" {{u}}来遍历users这个数据，根据数组的数量动态生成多个元素，其中index是它的key值，数组则是下标，后面的users变量也可以写成一个数值，如10就会遍历出1-10的数字
v-bind、v-model（属性绑定指令）属性的值不会被{{}}等方式改变，值得内容被看成一个字符串，vue不会处理，例如你想绑定属性的值和vue的数据，那么写成v-bind:属性名="表达式"去绑定；特殊的style属性可以用一个json的写法来处理每个样式及其对应的值；而class除了可以用表达式外还可以用数组，vue会自动将数组解析成用空格拆分的多个class的值，或者写一个json，key为class的值，value是布尔值，当value为true时该class被添加进去，否则不会被添加进去，v-bind:比较常用可以省略为:
而v-model不能指定绑定的属性名，它会自动根据当前元素决定绑定的属性名，如input会自动绑定value，而且当绑定属性的值发生了变化会同步改变数据的值，即它支持双向数据流
数据流：单项数据流--数据→视图（数据发生变化视图同步变化，视图发生变化数据无影响）；双向数据流--数据↔视图（两边的值任何一个发生变化时，另一个同步变化）
v-on（事件绑定指令）把函数绑定到元素的事件上，它的参数为事件类型，如v-on:click="表达式"，v-on:也比较常用可以省略为@

vue数据接收

Vue的数据接收