1. 模板语法
1.1 模板语法之插值语法
主要研究：{{这里可以写什么}}
- 在 data 中声明的变量、函数等都可以
- 常量都可以。
- 只要是合法的 javascript 表达式，都可以
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单. 如 Math 和 Date 等。
<!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>模板语法之插值语法{{}}</title>
<!-- 安装Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
主要研究：{{这里可以写什么}}
1. 在data中声明的变量、函数等都可以。
2. 常量都可以。
3. 只要是合法的javascript表达式，都可以。
4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。
'Infinity,undefined,NaN,isFinite,isNaN,'
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,'
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,'
'require'
-->
<!-- 准备容器 -->
<div id="app">
<!-- 在data中声明的 -->
<!-- 这里就可以看做在使用msg变量。 -->
<h1>{{msg}}</h1>
<h1>{{sayHello()}}</h1>
<!-- <h1>{{i}}</h1> -->
<!-- <h1>{{sum()}}</h1> -->
<!-- 常量 -->
<h1>{{100}}</h1>
<h1>{{'hello vue!'}}</h1>
<h1>{{3.14}}</h1>
<!-- javascript表达式 -->
<h1>{{1 1}}</h1>
<h1>{{'hello' 'vue'}}</h1>
<h1>{{msg 1}}</h1>
<h1>{{'msg' 1}}</h1>
<h1>{{gender ? '男' : '女'}}</h1>
<h1>{{number 1}}</h1>
<h1>{{'number' 1}}</h1>
<h1>{{msg.split('').reverse().join('')}}</h1>
<!-- 错误的：不是表达式，这是语句。 -->
<!-- <h1>{{var i = 100}}</h1> -->
<!-- 在白名单里面的 -->
<h1>{{Date}}</h1>
<h1>{{Date.now()}}</h1>
<h1>{{Math}}</h1>
<h1>{{Math.ceil(3.14)}}</h1>
</div>
<!-- vue程序 -->
<script>
// 用户自定义的一个全局变量
var i = 100;
// 用户自定义的一个全局函数
function sum() {
console.log("sum.....");
}
new Vue({
el: "#app",
data: {
number: 1,
gender: true,
msg: "abcdef", // 为了方便沟通，以后我们把msg叫做变量。（这行代码就可以看做是变量的声明。）
sayHello: function () {
console.log("hello vue!");
},
},
});
</script>
</body>
</html>1.2 模板语法之指令语法
1.2.1 指令语法
- 什么是指令？有什么作用？
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- Vue 框架中的所有指令的名字都以“v-”开始。
- 插值是写在标签体当中的，那么指令写在哪里呢？
- Vue 框架中所有的指令都是以 HTML 标签的属性形式存在的，例如：、
<span 指令是写在这里的>{{这里是插值语法的位置}}</span>- 注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。
- 是需要先让 Vue 框架进行编译的，编译之后的内容浏览器是可以看懂的。
1.2.2 指令的语法规则
指令的一个完整的语法格式：
<HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
表达式：
- 之前在插值语法中
{{这里可以写什么}}，那么指令中的表达式就可以写什么。实际上是一样的。 - 但是需要注意的是：
在指令中的表达式位置不能外层再添加一个{{}}
不是所有的指令都有参数和表达式： - 有的指令，不需要参数，也不需要表达式，例如：v-once - 有的指令，不需要参数，但是需要表达式，例如：v-if="表达式" - 有的指令，既需要参数，又需要表达式，例如：v-bind:参数="表达式"
1.2.3 v-once 指令
作用：只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
1.2.4 v-if="表达式" 指令
作用：表达式的执行结果需要是
一个布尔类型的数据：true或者false
- true：这个指令所在的标签，会被渲染到浏览器当中。
- false：这个指令所在的标签，不会被渲染到浏览器当中。
1.2.5 v-bind 指令详解
这个指令是干啥的？
它可以让 HTML 标签的某个属性的值产生动态的效果。它是一个负责动态绑定的指令
v-bind 指令的语法格式：
<HTML标签 v-bind:参数="表达式"></HTML标签>
注意：
- 以下代码中 msg 是变量名。
- 注意：原则上 v-bind 指令后面的这个参数名可以随便写。
- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该 HTML 标签支持的属性名。这样才会有意义。
v-bind 指令的编译原理？
- 编译前：`<HTML 标签 v-bind:参数="表达式"></HTML 标签>
- 编译后：
<HTML标签 参数="表达式的执行结果"></HTML标签> - 注意两项：
- 第一：在编译的时候 v-bind 后面的“参数名”会被编译为 HTML 标签的“属性名”
- 第二：表达式会关联 data，当 data 发生改变之后，表达式的执行结果就会发生变化。
- 所以，连带的就会产生动态效果。
v-bind 因为很常用，所以 Vue 框架对该指令提供了一种简写方式：
只是针对 v-bind 提供了以下简写方式： <img :src="imgPath">
什么时候使用插值语法？什么时候使用指令？
- 凡是标签体当中的内容要想动态，需要使用
插值语法。 - 只要向让 HTML 标签的属性动态，需要使用
指令语法。 `
<!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>v-bind指令详解（它是一个负责动态绑定的指令）</title>
<!-- 安装Vue -->
<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因为很常用，所以Vue框架对该指令提供了一种简写方式：
只是针对v-bind提供了以下简写方式：
<img :src="imgPath">
5. 什么时候使用插值语法？什么时候使用指令？
凡是标签体当中的内容要想动态，需要使用插值语法。
只要向让HTML标签的属性动态，需要使用指令语法。
-->
<!-- 准备一个容器 -->
<div id="app">
<!-- 注意：以下代码中 msg 是变量名。 -->
<!-- 注意：原则上v-bind指令后面的这个参数名可以随便写。 -->
<!-- 虽然可以随便写，但大部分情况下，这个参数名还是需要写成该HTML标签支持的属性名。这样才会有意义。 -->
<span v-bind:xyz="msg"></span>
<!-- 这个表达式带有单引号，这个'msg'就不是变量了，是常量。 -->
<span v-bind:xyz="'msg'"></span>
<!-- v-bind实战 -->
<img src="../img/1.jpg" /> <br />
<img v-bind:src="imgPath" /> <br />
<!-- v-bind简写形式 -->
<img :src="imgPath" /> <br />
<!-- 这是一个普通的文本框 -->
<input type="text" name="username" value="zhangsan" /> <br />
<!-- 以下文本框可以让value这个数据变成动态的：这个就是典型的动态数据绑定。 -->
<input type="text" name="username" :value="username" /> <br />
<!-- 使用v-bind也可以让超链接的地址动态 -->
<a href="https://www.baidu.com">走起</a> <br />
<a :href="url">走起2</a> <br />
<!-- 不能采用以下写法吗？ -->
<!--
不能这样，报错了，信息如下：
Interpolation inside attributes has been removed.
Use v-bind or the colon shorthand instead. For example,
instead of <div id="{{ val }}">, use <div :id="val">
属性内部插值这种语法已经被移除了。（可能Vue在以前的版本中是支持这种写法的，但是现在不允许了。）
请使用v-bind或冒号速记来代替。
请使用 <div :id="val"> 来代替 <div id="{{ val }}">
-->
<!-- <a href="{{url}}">走起3</a> -->
<h1>{{msg}}</h1>
</div>
<!-- vue程序 -->
<script>
// 赋值的过程就可以看做是一种绑定的过程。
//let i = 100
new Vue({
el: "#app",
data: {
msg: "Hello Vue!",
imgPath: "../img/1.jpg",
username: "jackson",
url: "https://www.baidu.com",
},
});
</script>
</body>
</html>1.2.6 v-model 指令详解
v-bind 和 v-model 的区别和联系
- v-bind 和 v-model 这两个指令都可以完成数据绑定。
- v-bind 是单向数据绑定。例如 ：
data ===> 视图 - v-model 是双向数据绑定。例如 :
data <===> 视图 - v-bind 可以使用在任何 HTML 标签当中。v-model 只能使用在表单类元素上，例如：
input标签、select标签、textarea标签。 - 为什么 v-model 的使用会有这个限制呢？
- 因为表单类的元素才能给用户提供交互输入的界面。
- v-model 指令通常也是用在 value 属性上面的。
- v-bind 和 v-model 都有简写方式：
- v-bind 简写方式：
v-bind:参数="表达式" 简写为 :参数="表达式" - v-model 简写方式：
v-model:value="表达式" 简写为 v-model="表达式"
- v-bind 简写方式：
<!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>v-model指令详解</title>
<!-- 安装Vue -->
<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的使用会有这个限制呢？
因为表单类的元素才能给用户提供交互输入的界面。
v-model指令通常也是用在value属性上面的。
5. v-bind和v-model都有简写方式：
v-bind简写方式：
v-bind:参数="表达式" 简写为 :参数="表达式"
v-model简写方式：
v-model:value="表达式" 简写为 v-model="表达式"
-->
<!-- 准备一个容器 -->
<div id="app">
v-bind指令：<input type="text" v-bind:value="name1" /><br />
v-model指令：<input type="text" v-model:value="name2" /><br />
<!-- 以下报错了，因为v-model不能使用在这种元素上。 -->
<!-- <a v-model:href="url">百度</a> -->
v-bind指令：<input type="text" :value="name1" /><br />
v-model指令：<input type="text" v-model="name2" /><br />
消息1：<input type="text" :value="msg" /><br />
消息2：<input type="text" v-model="msg" /><br />
</div>
<!-- vue程序 -->
<script>
new Vue({
el: "#app",
data: {
name1: "zhangsan",
name2: "wangwu",
url: "https://www.baidu.com",
msg: "Hello Vue!",
},
});
</script>
</body>
</html>2. MVVM 分层思想
2.1 初始 MVVM 分层思想
一。MVVM 是什么
M：Model（模型/数据） V：View（视图） VM：ViewModel（视图模型）：VM 是 MVVM 中的核心部分。（它起到一个核心的非常重要的作用。）
MVVM 是目前前端开发领域当中非常流行的开发思想。(一种架构模式。)
目前前端的大部分主流框架都实现了这个 MVVM 思想，例如 Vue，React 等。
二。 Vue 框架遵循 MVVM 吗？
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。 Vue 框架基本上也是符合 MVVM 思想的。
三。MVVM 模型当中倡导了 Model 和 View 进行了分离，为什么要分离？
假如 Model 和 View 不分离，使用最原始的原生的 javascript 代码写项目：如果数据发生任意的改动，接下来我们需要编写大篇幅的操作 DOM 元素的 JS 代码
将 Model 和 View 分离之后，出现了一个 VM 核心，这个 VM 把所有的脏活累活给做了，也就是说，当 Model 发生改变之后，VM 自动去更新 View。当 View 发生改动之后，VM 自动去更新 Model。我们再也不需要编写操作 DOM 的 JS 代码了。开发效率提高了很多。
