Vue模板，数据和指令

模板，数据和指令

三者的英文名称也有必要列举一下：

模板： Template
数据：Data
指令：Directive

在学习Vue的概念框架时，要时刻回想到Vue的核心是什么。

Vue的核心是将数据显示到页面上。

为达到这一目的，我们使用模板来实现。

而为普通的HTML添加特殊属性，则需要借助指令来完成。

指令非常强大，可以用它来告诉Vue要实现的效果以及如何处理提供给Vue的数据。

下面看个例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body><div id="app"><p v-if="isMorning">早上好！</p><p v-if="isAfternoon">中午好！</p><p v-if="isEvening">下午好！</p></div><script>var hours = new Date().getHours()var app = new Vue({el: '#app',data: {isMorning: hours < 12,isAfternoon: hours >= 12 && hours < 18,isEvening: hours >= 18},created() {// 应用启动时执行console.log("应用启动...")}})</script>
</body>
</html>

在div中，可以用v-if来做判断，使用定义在data字段中的属性来决定输出的结果。

不过这种写法本身并不是响应式编程，因为随着时间变化，页面并不会随之更新。

就上面这种写法而言，可以优化为下面的方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body><div id="app"><p v-if="hours < 12">早上好！</p><p v-if="hours >= 12 && hours < 18">中午好！</p><p v-if="hours >= 18">下午好！</p></div><script>var app = new Vue({el: '#app',data: {hours: new Date().getHours()},created() {// 应用启动时执行console.log("应用启动...")}})</script>
</body>
</html>

核心在于，虽然v-if后面跟着的是字符串，但是能用被el指向的Vue实例中定义的数据。

通过这两个简单例子，可以看到一种编程模式：在JS中实现业务逻辑，在模板中实现视图逻辑。

暂时还没开始的话题是，计算属性，后面会展开。

小总结

模板就是能够用非HTML元素编码的显示标签，这和在Python Flask框架中用得到的Jinja模板是相同的道理，在模板中使用的简单的逻辑称之为指令。在JS代码块中定义函数和数据，主要关注的是业务逻辑。

参考

《Vue.js快跑：构建触手可及的高性能Web应用》

END.

Vue模板，数据和指令相关推荐

vue 模板 html 表达式,Vue 模板template、指令directive、修饰符
模板 template template的三种写法写法一:Vue完整版,写在HTML里 //html {{n}} +1 //vue new Vue({ el: '#xxx', data(){ ret ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue 模板字符串循环_使用React四年后转而使用Vue，是一种什么样的体验？
全文共1825字,预计学习时长5分钟图源:unsplash 过去四年来,笔者都是用React框架工作,最近开始使用Vue了.尽管两者有一些概念上的差异--Vue受到了Angular的影响,但在Rea ...
用vue语法写html,Vue -- 模板语法
Vue 模板语法 1.vue 和大多数后台语言,甚至是和art-template 这种前端模板库一样,都有一套,特定的语法来把数据渲染在html上. Mustache -- 大胡子语法 1.大胡子的语 ...
Vue.js 内置指令
回顾一下第2.2节,我们己经介绍过指令(Directive)的概念了,Vue.js的指令是带有特殊前缀v-的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上. 其实我们已经用到过很多Vue内 ...
vue模板语法是什么？
在项目中,可以看到很多.vue结尾的文件,它们是什么呢? 1)vue文件是单文件组件后缀名是.vue webpack会使用额外的loader来处理它一个.vue文件就是一个组件(页面) 整个项目( ...
前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...

Vue模板，数据和指令

模板，数据和指令

参考

Vue模板，数据和指令相关推荐

最新文章

热门文章