2. Vue模板语法
Vue 使用一种基于HTML的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。
(1)文本插值
最基本的数据绑定形式是文本插值,它使用的是Mustache语法(即双大括号):
我们先把项目目录的src/assect和src/components里的文件全部删除,main.js里的import './assets/main.css'也删除掉。同时把App.vue`的代码全部删除。默认代保留如下:
- 基本写法:
- App.vue
模板语法
{{ msg }}
这个时候我们就可以看到页面结果了
- 使用JavaScript表达式
每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法地写在return后面
模板语法
{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.split('').reverse().join('') }}
- 无效写法
{{ var a = 1 }}
{{ if (ok) { return message } }}
- 原始HTML
双大括号将会将数据插值为纯文本,而不是HTML。若想插入HTML,你需要使用v-htmI指令
假设,我们这么写:
模板语法
{{ rawHtml }}
我们发现,页面并没有识别出来。那改怎么写呢?
模板语法
{{ rawHtml }}