内容概述
插值操作
首先创建一个实例
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>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
<p>{{ sssd }}</p>
</div>
<script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue', // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
sssd:'vue好烦'
}
})
</script>
</body>
</html>
插值操作
如何将data中文本数据,插入到html中?
1.可以通过Mustache语法(双大括号) 如下所示
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ sssd }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue',
sssd:'vue好烦'
}
})
</script>
</body>
v-once
用途:在某些情况下，我们可能不希望界面随意的跟随改变 ,这个时候我们就可以使用v-once的指令
该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变
v-once.png
<body>
<div id="app">
<p v-once>{{ msg }}</p> //msg改变时.页面不会msg不会重新渲染
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue',
}
})
</script>
</body>
v-html
某些情况下，我们从服务器请求到的数据本身就是一个HTML代码,如果我们直接通过{{}}来输出，会将HTML代码也一起输出,我们可能希望的是按照HTML格式进行解析，并且显示对应的内容
指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染
v-html.png
v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
但它不够灵活。建议使用mastache语法
v-pre
将代码原封不动的解析出来，不做任何处理
<body>
<div id="app">
<p v-pre>{{ msg }}</p> //第一个p元素中会直接显示{{message}
<p >{{ msg }}</p> //第二个p元素中的内容会被编译解析出来对应的内容
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue',
}
})
</script>
</body>
v-cloak
将未解析出来的代码块进行隐藏 基本不会用到,
