Vue语法基础一（内部指令）
Vue官方提供了14个内部指令，本节只覆盖6个（v-text、v-html、v-model、v-pre、v-cloak、v-once），剩下8个（v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-slot）将在后续章节陆续涉及。另外将插值表达式也一并介绍。
一、 插值表达式
插值表达式采用双大括号的Mustache语法，一般用来绑定数据，也可以用来运算或调用方法。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门title>
head>
<body>
<div id="app">
<div>{{msg}}div>
<div>{{1+2+3}}div>
<div>{{add(12, 13)}}div>
div>
<script src="../lib/vue.js">script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
},
methods: {
add(x, y) {
return x + y;
}
}
})
script>
body>
html>
为了精简，后面模板代码不再贴出。
二、v-once指令
插值表达式的值会随着数据的改变而改变。而v-once可以让插值表达式只编译一次，内容显示之后就不再具备数据响应式的功能。
<div id="app"> <div v-once>{{msg}}div> <div>{{msg}}div> div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello World' } }) script>
在浏览器控制台中手动改变msg的值，被v-once修饰的的值不变，而没有被v-once修饰的值会随数据改变而改变。
三、v-cloak指令
该指令可以用来解决插值表达式闪烁的问题，但并不常用，闪烁是个小问题。
<style> [v-cloak] { display: none; } style> <span v-cloak> {{msg}} span> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) script>
四、v-text指令
v-text也可以用来绑定数据，并且它没有闪烁问题。但是工作中使用插值表达式居多，插值表达式更直观和灵活，闪烁的缺陷也微不足道。
<span v-text="msg">span> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) script>
五、v-html指令
v-html指令可以解析数据中包含的标签。
<div v-html="msg">div> <script> new Vue({ el: '#app', data: { msg: 'Hello World
' } }) script>
六、v-pre指令
v-pre指令可以阻止解析数据区内容，原样显示。
<div v-pre>{{msg}}div> <script> new Vue({ el: '#app', data: { msg: 'Hello World' } }) script>
这时候，{{msg}}不会被'Hello World'替换，而是原样显示{{msg}}
七、v-model指令
v-model指令用来将视图和模型进行双向数据绑定
<div id="app"> {{msg}} <br> <input type="text" v-model="msg"> div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello World' } }) script>
通过input输入框改变msg的值，这是视图改变模型的内容；而msg值的变化又会改变视图中{{msg}}的值，这是模型改变视图的内容，Vue正是一个MVVM的框架。
最后简单说一下mvvm，mvvm是model、view、view-model的缩写。
model: 模型，或叫数据，也就是JS对象。
view：视图，指dom对象。
但是model和view之间不可以直接交互，必须通过vm（view-model），Vue提供了这个交互的桥梁。view通过事件监听去修改model的值，而model通过数据绑定去修改view的值。这样就实现了双向数据绑定。
PS：本系列文章同步更新于资浅码农的公众号