Vue系统指令（一）
插值表达式 { {}}
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。
{
{}}中每个绑定都只能包含单个表达式.
<span>Message: {
{ msg }}</span>
v-cloak
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。- 使用 v-cloak 能解决插值表达式闪烁的问题
<style>
[v-cloak] {
display: none;
}
</style>
<p v-cloak>+++++++++{
{msg}}-----------</p>
v-text
- v-text可以将一个变量的值渲染到指定的元素中
- 默认 v-text 是没有闪烁问题的,因为它是放在属性里的
- 差值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text会覆盖元素中原本的内容。
v-html
- v-text v-html 会覆盖元素中原本的内容,但是 插值表达式 只会替换直接的这个占位符,不会把整个元素的内容清空
v-bind：属性绑定机制
- v-bind： 是Vue中提供的用于绑定属性的指令
- 注意：
v-bind：指令可以被简写为：要绑定的属性； v-bind中可以写合法的JS表达式
V-bind 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 v-cloak 能解决插值表达式闪烁的问题 -->
<p v-cloak>+++++++++{
{msg}}-----------</p>
<h4 v-text='msg'>=========</h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text v-html 会覆盖元素中原本的内容,但是 插值表达式 只会替换直接的这个占位符,不会把整个元素的内容清空 -->
<br>
<div>{
{msg2}}</div>
<div v-text='msg2'></div>
<div v-html='msg2'>123123123</div>
<!-- v-bind： 是Vue中提供的用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle">
<!-- 注意： v-bind：指令可以被简写为 ：要绑定的属性； v-bind中可以写合法的JS表达式 -->
<input type="button" value="简写" :title='mytitle'>
<br><br>
<input type="button" value="按钮" :title='mytitle' v-on:click="show">
<input type="button" value="缩写" :title='mytitle' @click="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>让晚风轻轻吹送了落霞</h1>',
mytitle: '玉树临风美少年，揽镜自顾夜不眠'
},
methods: {
//这个methods属性中定义了当前Vue实例所有可用的方法
show: function() {
alert("yiu yun di ta ~")
}
}
})
</script>
</body>
</html>
v-on：事件绑定机制
v-on:click：点击事件
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script></head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
<!-- 给button节点绑定按钮的点击事件 -->
{
{
name}}
<button v-on:click="change">改变name的值</button>
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: {
//data就是MVVM中的 module
name: 'smyhvae'
},
//注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
//这个 methods 属性中定义了当前Vue实例所有可用的方法
methods: {
change: function() {
//上面的button按钮的点击事件
this.name += '1';
}
}
});</script>
</html>
v-on的简写形式
<input type="button" value="按钮" :title='mytitle' v-on:click="show">
<input type="button" value="缩写" :title='mytitle' @click="show">
v-on的事件修饰符
v-on的常见事件修饰符
v-on提供了很多事件修饰符来辅助实现一些功能。
.stop阻止冒泡。本质是调用event.stopPropagation().prevent阻止默认事件（默认行为）。本质是调用event.preventDefault().capture添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）.self只有当事件在该元素本身触发时（比如不是子元素），才会触发回调.once事件只触发一次.{keyCode | keyAlias}只当事件是从侦听器绑定的元素本身触发时，才触发回调.native监听组件根元素的原生事件
一个事件，允许同时使用多个事件修饰符。
.self只会阻止自己身上冒泡事件的发生，并不会阻止真正的冒泡行为 .self不能代替.stop
M是放数据的，V是展示数据的，bind从M中拿出来当然放不回去，model可以实时存取
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
简单了解Node中的MVC与前端中的MVVM之间的区别
- MVC是后端的分层开发概念；
- M：model层，处理数据crud
- V：view 视图层，可以理解为前端页面
- C：controller 业务逻辑层
- MVVM是前端视图层的概念，主要关注与 视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View, VM ViewModel