1、模板语法之插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法之插值</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
主要研究：{{这里可以写什么}}
1、在data中声明的变量、函数等都可以。
2、常量都可以。
3、只要是合法的javascript表达式，都可以
4、模板表达式都被放在沙盘中，只能访问全局变量的一个白名单，如Math和Date等。
-->
<div id="app">
<!-- data中生命的 -->
<h1>{{msg}}</h1>
<h1>{{sayHello()}}</h1>
<!-- 常量 -->
<h1>{{'bjpowernode 6666'}}</h1>
<!-- javascript表达式 -->
<h1>{{1 + 20 / 3}}</h1>
<!-- Math -->
<h1>{{Math.ceil(3.345)}}</h1>
</div>
<script>
new Vue({
el : '#app',
data : {
msg : 'bjpowernode',
sayHello : function(){
console.log('hello');
}
}
})
</script>
</body>
</html>
2、模板语法之指令语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法之指令语法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
指令语法：
1、什么是指令？有什么作用？
2、Vue框架中的所有指令的名字都以"v-"开始
3、插值是写在标签体当中的，那么指令写在哪里呢？
Vue框架中所有的指令都是以HTML标签的属性形式存在的，例如：
<span 指令是写在这里的></span>
注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。
4、指令的语法规则：
指令的一个完整的语法格式：
<HTML v-指令名:参数="表达式"></HTML>
表达式：
之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么
但是需要注意的是：在指令中的表达式位置不能外层再添加一个{{}}
不是所有的指令都有参数和表达式：
有的指令，不需要参数，也不需要表达式，例如：v-once
有的指令，不需要参数，但是需要表达式，例如: v-if="表达式"
有的指令，即需要参数，又需要表达式，例如: v-bind:参数="表达式"
5、v-once 指令
作用：只渲染元素一次，随后的重新渲染，这可以用于优化更新性能。
6、v-if="表达式" 指令
作用：表达式的执行结果需要是一个布尔类型的数据：true或false
ture：这个指令所在的标签，会被渲染到浏览器当中。
false：这个指令所在的标签，不会被渲染到浏览器当中。
-->
<div id="app">
<h1>{{msg}}</h1>
<h1 v-once>{{msg}}</h1>
<h1 v-if="a > b">{{msg}}</h1>
</div>
<script>
new Vue({
el : '#app',
data : {
msg : 'bjpowernode',
a : 10,
b : 5
}
})
</script>
</body>
</html>
3、v-bind指令详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>v-bind指令详解</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
v-bind指令详解
1、这个指令是干嘛的？
它可以让HTML标签的某个属性的值产生动态的效果
2、v-bind指令的语法格式：
<HTML标签 v-bind:参数="表达式"></HTML标签>
3、v-bind指令的编译原理？
编译前：<HTML标签 v-bind:参数="表达式"></HTML标签>
编译后：<HTML标签 参数="表达式的执行结果"></HTML标签>
在编译的时候v-bind后面的参数名会被编译为HTML标签的属性名
表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化
4、v-bind因为很常用，以下是简写方式：
<img :src="imgPath">
5、什么时候使用插值语法？什么时候使用指令？
凡是标签体当中的内容想要动态，需要使用插值语法。
只要向让HTML标签的属性动态，需要使用指令语法。
-->
<div id="app">
<!--
msg是变量名
原则上v-bind指令后面的这个参数名可以随便写
-->
<span v-bind:xyz="msg"></span>
<!-- 实战 -->
<input type="text" name="username" value="zhangsan"> <br>
<!-- 动态调整 -->
<input type="text" name="username" :value="username"> <br>
</div>
<script>
new Vue({
el : '#app',
data : {
msg : 'bjpowernode',
username : 'lisi'
}
})
</script>
</body>
</html>
4、v-model指令详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model指令详解</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
v-bind和v-model的区别和联系
1、v-bind和v-model这两个指令都可以完成数据绑定。
2、v-bind是单向数据绑定。
data -> 视图
3、v-model是双向数据绑定。
data <- -> 视图
4、v-bind可以使用在任何HTML标签当中，v-model只能使用在表单类元素上
例如：input,select,textarea。因为表单才能给用户提供交互输入的界面。
v-model指令通常也是用在value属性上
5、v-bind和v-model都有简写方式：
v-bind简写方式： v-bind:参数="表达式" ====== :参数="表达式"
v-model简写方式： v-model:value="表达式" ======= v-model="表达式"
-->
<div id="app">
<input type="text" name="username" :value="name2"> <br>
<input type="text" name="username" v-model="name2"> <br>
</div>
<script>
new Vue({
el : '#app',
data : {
name1 : 'zhangsan',
name2 : 'lisi'
}
})
</script>
</body>
</html>
5、初始MVVM分层思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识MVVM分层思想</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1、MVVM是什么？
M：Model（模型/数据）
V：View（视图）
VM：ViewModel（视图模型），VM是MVVM中的核心部分。
2、Vue框架遵循MVVM吗？
虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。
Vue框架基本上也是符合MVVM思想的。
3、MVVM模型当中倡导了Model和View进行了分离
如果Model和View不分离，使用最原始的原生的javascript代码写项目：
如果数据发生任意的改动，接下来我们需要编写大篇幅的操作DOM元素的JS代码。
将Model和View分离之后，出现了一个VM核心，这个VM把所有的脏活累活给做了。
Model和View互相去更新
-->
<!-- V -->
<div id="app">
姓名：<input type="text" name="username" v-model="name1">
</div>
<script>
// VM
const vm = new Vue({
el : '#app',
// M
data : {
name1 : 'zhangsan'
}
})
</script>
</body>
</html>