vue模板语法
vue模板语法
-
- 1、Vue，渐进式Javascript框架。
- 2、Vue模板语法
- 3、Vue模板语法，什么是指令？
- 4、Vue模板语法，v-cloak指令用法。
- 5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。
- 6、Vue模板语法，数据响应式。
- 7、Vue模板语法，双向数据绑定。
- 8、Vue模板语法，事件绑定。
- 9、简单相加计算器。
- 10、Vue模板语法，属性绑定。
- 11、Vue模板语法，样式绑定。
- 12、Vue模板语法，分支循环结构。
- 13、Tab选项卡。
1、Vue，渐进式Javascript框架。
渐进式的含义理解，从左到右递进关系，声明式渲染（最简单的模式）->组件系统（组件化）->客户端路由（局部更新，浏览器的历史回退功能）->集中式状态管理（Vuex做状态管理）->项目构建（大型项目，前后端分离）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<!--
Vue的基本使用步骤
1）、需要提供标签用于填充数据。
2）、引入vue.js库文件。
3）、可以使用vue的语法做功能了。
4）、把vue提供的数据填充到标签。使用插值表达式{
{
}}，作用就是将数据填充到指定的标签的位置。
-->
<!-- {
{
}}叫做插值表达式，将数据填充到html标签中，插值表达式支持基本的计算操作。-->
<div id="app">
<div>{
{
msg}}</div>
<div>{
{
'I love you ' + msg}}</div>
<div>{
{
1 + 2 + 3}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据。
msg: 'hello Vue!'
}
});
</script>
</body>
</html>
2、Vue模板语法
默认语法的功能就是前端渲染，前端渲染即使把数据填充到html标签中。数据（来自服务器） + 模板（html标签） = 前端渲染（产物是静态html内容）。
前端渲染的三种方式。
1）、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2）、使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点是没有专门提高事件机制。
3）、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。
3、Vue模板语法，什么是指令？
1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
2）、Vue指令的本质就是自定义属性。
3）、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。
4、Vue模板语法，v-cloak指令用法。
1）、插值表达式存在的问题，就是闪动。
2）、如果解决该问题，使用v-cloak指令，可以解决闪动的问题。
3）、解决该问题的原理，先隐藏，替换好值之后再显式最终的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--
v-cloak指令的用法。
1）、需要提高样式。
[v-cloak] {
display: none;
}
2）、在插值表达式所在的标签中添加v-cloak指令。
3)、原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显式最终的结果，此时就不会显式{
{
}}这种闪动效果。
-->
<div id="app" v-cloak>
<div>{
{
msg}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
msg: 'hello Vue!'
}
});
</script>
</body>
</html>
5、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。
1）、v-text填充纯文本。特点一、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。
2）、v-html填充html片段。特点一、存在安全问题。特点二、本网站内部数据可以使用，来自第三方数据不可以用。
3）、v-pre填充原始信息。特点一、显式原始信息，跳过编译过程，分析编译过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
msg}}</div>
<!-- v-text没有闪动问题的，用户体验更好，比插值表达式更加好使 -->
<div v-text="msg"></div>
<!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 -->
<div v-html="msg2"></div>
<!-- 显式原始信息，跳过编译过程(分析编译过程) -->
<div v-pre>{
{
msg}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
msg: 'hello Vue!',
msg2: 'hello Vue!
', //可以使用v-html标签展示html代码。
}
});
</script>
</body>
</html>
6、Vue模板语法，数据响应式。
1）、如何理解响应式。html5中的响应式（屏幕尺寸的变化导致样式的变化）、数据的响应式（数据的变化导致页面内容的变化）。
2）、什么是数据绑定。数据绑定就是将数据填充到标签中。
3）、v-once只编译一次。显式内容之后不再具有响应式功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
msg}}</div>
<!-- v-once只编译一次。显式内容之后不再具有响应式功能。 -->
<!-- v-once的应用场景，如果显式的信息后续不需要再修改，可以使用v-once指令，可以可以提高性能，因为Vue就不需要去监听它的变化了。 -->
<div v-once>{
{
info}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
msg: 'hello Vue!',
info: 'hello world Vue !',
}
});
</script>
</body>
</html>
7、Vue模板语法，双向数据绑定。
MVVM设计思想，最只要的理念就是分治，把不同的功能代码放到不同的模块，通过特定的方式建立关联。
1）、M指的是Model，就是data里面的数据，提供数据的。Model通过VM的Data Bindings数据绑定View。
2）、V指的是View，就是所写的模板Dom元素，提供页面展示效果的。View通过VM的DOM Listeners事件监听Model。
3）、VM指的是View-Model，就是控制逻辑，实现控制逻辑将两者结合到一起。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
msg}}</div>
<!-- 主要是用于表单输入域中。 -->
<!-- 双向数据绑定分析，方向一、页面影响数据，方向二、数据影响页面。 -->
<!-- 用户修改页面内容数据会改变，数据改变了影响插值表达式的内容页面改变。 -->
<div>
<input type="text" v-model="msg" />
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
msg: 'hello Vue!',
}
});
</script>
</body>
</html>
8、Vue模板语法，事件绑定。
1）、 Vue如何处理事件？
v-on指令用法：。
v-on简写形式，。
2）、事件函数的调用方式。
直接绑定函数名称：加一。不需要传递事件对象，默认携带事件对象。
调用函数：减一。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
num}}</div>
<!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
<div>
<input type="button" v-on:click="num++" value="加一" />
<input type="button" @click="num--" value="减一" />
<br />
<button v-on:click="add">加一</button>
<button @click="reduce()">减一</button>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
// msg: 'hello Vue!',
num: 1, // num初始化值为1
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
add: function() {
this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
},
reduce: function() {
this.num--;
}
}
});
</script>
</body>
</html>
3）、事件函数的参数传递。如果传参事件对象，固定格式$event。
普通的参数和事件对象：。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
num}}</div>
<!-- 如果逻辑直接写到@click、v-on:click后面，不合理，随着业务量增多，这里变得十分冗余。 -->
<div>
<input type="button" v-on:click="num++" value="加一" />
<input type="button" @click="num--" value="减一" />
<br />
<!--
事件绑定-参数传递。
1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
-->
<!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
<button v-on:click="add">加一</button>
<!-- 这种情况是传递具体的参数 -->
<button @click="reduce(2,3,4)">减二</button>
<!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
<button @click="multip(2,3,$event)">乘二</button>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
// msg: 'hello Vue!',
num: 1, // num初始化值为1
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
add: function() {
console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
},
reduce: function(param1, param2, param3) {
console.log(param1);
console.log(param2);
console.log(param3);
this.num = this.num - param1;
},
multip: function(param1, param2, event) {
console.log(param1);
console.log(param2);
console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
this.num = this.num * param1;
},
}
});
</script>
</body>
</html>
4）、事件修饰符，处理事件的特殊行为。
.stop阻止冒泡：跳转。
.prevent阻止默认行为：跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{
{
num}}</div>
<!-- 冒泡行为，会执行这里的点击事件 -->
<div @click="add0">
<!--
事件绑定-参数传递。
1）、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数。
2）、如果事件绑定函数调用，那么事件对象必须作为最后一个参数进行显式传递，并且事件对象的名称必须是固定的$event。
-->
<!-- v-on:click="add"不需要传递事件对象，默认携带事件对象。 -->
<!-- .stop阻止了冒泡的发生 -->
<button v-on:click.stop="add">加一</button>
<!-- 这种情况是传递具体的参数 -->
<button @click="reduce(2,3,4)">减二</button>
<!-- 传递事件对象，最后一个参数是事件对象，并且$event名称是固定的 -->
<button @click="multip(2,3,$event)">乘二</button>
<!-- 阻止默认行为，典型应用是超链接，默认的时候会发生跳转，.prevent事件修饰符阻止默认行为 -->
<a href="https://www.baidu.com/" @click.stop.prevent="stopBlank">百度</a>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
// msg: 'hello Vue!',
num: 1, // num初始化值为1
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
// 通过点击事件的冒泡触发了该方法的执行。
add0: function() {
this.num++;
},
add: function() {
console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
this.num++; // 此处的this指的是vm即Vue的实例，通过vm可以访问到num。
// 阻止冒泡行为，就不会发生冒泡的行为。可以拿到事件对象就可以阻止冒泡的。
// stopPropagation此方法可以根据事件对象调用阻止冒泡的发生。
// event.stopPropagation();
},
reduce: function(param1, param2, param3) {
console.log(param1);
console.log(param2);
console.log(param3);
this.num = this.num - param1;
},
multip: function(param1, param2, event) {
console.log(param1);
console.log(param2);
console.log(event.target.tagName); // 通过event事件对象可以拿到触发事件的对象。
console.log(event.target.innerHTML); // 通过event事件对象可以拿到内容。
this.num = this.num * param1;
},
stopBlank: function(event) {
// 阻止默认跳转行为，原生Js的api，换成事件修饰符。
// event.preventDefault();
},
}
});
</script>
</body>
</html>
5）、按键修饰符。
.enter回车键：。
.delete删除键：。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<form action="">
<div>账号：<input type="text" v-on:keyup.delete="clearContext" v-model="name" /></div>
<!-- v-on:keyup.enter按键修饰符，通过回车就可以触发事件 -->
<div>密码：<input type="text" v-on:keyup.enter="handleSubmit" v-model="password" /></div>
<div><input type="button" v-on:click="handleSubmit" value="提交"></div>
</form>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
name: '',
password: ''
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handleSubmit: function() {
// 此时可以将表单的内容通过ajax提交到后台
console.log(this.name, this.password)
},
clearContext: function() {
// 按delete键的时候，清空用户名
this.name = '';
this.password = '';
}
}
});
</script>
</body>
</html>
6）、自定义按键修饰符。
全局config.keyCodes对象：Vue.config.keyCodes.f1=112。
注释：keyCodes是一个对象，f1是自定义的，112是一个值，这个值是每一个按键的唯一标识，通过这个事件对象可以获取到这个唯一标识。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup="handle" v-model="info" />
<!-- 13就是Enter的唯一标识，可以使用这种形式v-on:keyup.13，就不用自定义按键了，但是数值的形式不直观 -->
<input type="text" v-on:keyup.13="handle" v-model="info" />
<!-- 事件绑定，自定义按键修饰符，规则，自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode的值。-->
<input type="text" v-on:keyup.f1="handle" v-model="info" />
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// 自定义按键修饰符，可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
info: '',
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
// 可以通过event.keyCode获取到每一个按键的唯一标识
console.log(event.keyCode)
}
}
});
</script>
</body>
</html>
9、简单相加计算器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<!--
1）、通过v-model指令实现数值a和数值b的绑定。
2）、给计算按钮绑定事件，实现计算逻辑。
3）、将计算结果绑定到对应的位置。
-->
<h1>简单计算器</h1>
<div>
<span>数值A：</span>
<span>
<input type="text" v-model="a" />
</span>
</div>
<div>
<span>数值B：</span>
<span>
<input type="text" v-model="b" />
</span>
</div>
<div>
<button @click="handle">计算</button>
</div>
<div>
<span>计算结果：</span>
<span v-text="result"></span>
</div>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
a: '',
b: '',
result: ''
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
// 实现计算结果，默认获取得到的是字符串，这里需要先转换成整数
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
</script>
</body>
</html>
10、Vue模板语法，属性绑定。
1）、Vue如何动态处理属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com">百度</a>
<!-- v-bind指令用法，使用外部的url来填充访问链接 -->
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
url: 'https://www.baidu.com'
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
// 修改url地址
this.url = 'https://cn.vuejs.org/';
}
}
});
</script>
</body>
</html>
2）、v-model的底层实现原理分析，v-model用于实现双向数据绑定。v-model底层用到的是属性绑定和事件绑定的组合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<!-- 通过v-on:input实现，修改数据影响模型中的数据，当input输入框发生变化，触发input事件 -->
<input v-bind:value="msg" v-on:input="handle" />
<!-- 简化形式，通过v-on:input="msg=$event.target.value"可以获取到最新值，将最新值赋值给v-on:input里面的msg -->
<input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value" />
<!-- v-model="msg"数据双向绑定 -->
<input type="text" v-model="msg" />
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
msg: 'hello'
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function(event) {
// 通过拿到event对象就可以操作元素的值
// 覆盖原来的值，影响模型中的数据，而模型中数据改变了进而应该视图中的数据，这就是双向绑定。
// 使用输入域中的最新的数据覆盖原来的数据。
this.msg = event.target.value;
}
}
});
</script>
</body>
</html>
11、Vue模板语法，样式绑定。
1）、通过class样式进行处理，处理标签的属性。
对象语法：。对象形式的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- 传统方式是操作dom的class属性，Vue使用的v-bind:class="{}"来操作属性即可 -->
<!-- 对象形式：v-bind:class="{}"的大括号里面是一个对象，对象是键值对形式的，键是类名，值是属性，控制是否显式 -->
<div v-bind:class="{active : isActive}">哈哈哈</div>
<!-- 对象形式：多个对象 -->
<div v-bind:class="{active : isActive,error : isError}">呵呵呵</div>
<!-- 切换，可以切换是否展示 -->
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
isActive: 'true', // true默认是展示的，isActive其中is开头的一般是标志位，要么是true，要么是false。
isError: 'true', // true显式，false不显示
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
// 控制isActive的值，在true和false之间进行切换，使用!取反来操作
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
</script>
</body>
</html>
数组语法：。数组形式的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!-- 数组形式，绑定样式 -->
<div v-bind:class="[activeClass, errorClass]">哈哈哈</div>
<!-- 切换，可以切换是否展示 -->
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
activeClass: 'active', // activeClass表示的是类名称
errorClass: 'error', //
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
this.activeClass = ''; // 直接将类名置空，就可以去掉这个样式
this.errorClass = '';
}
}
});
</script>
</body>
</html>
2)、样式绑定相关语法细节。
a、对象绑定和数组绑定可以结合使用。
b、class绑定的值可以简化操作。
c、默认的class如何处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
.colors {
color: blue;
}
.base {
font-size: 28px;
}
</style>
</head>
<body>
<div id="app">
<!--
样式绑定相关语法细节。
1、对象绑定和数组绑定可以结合使用。
2、class绑定的值可以简化操作。
3、默认的class如何处理。
-->
<!-- 数组形式和对象样式组合使用，绑定样式，但是如果样式过多，可读性变差 -->
<div v-bind:class="[activeClass, errorClass, {colors: isColor}]">哈哈哈</div>
<!-- 数组形式的简化写法 -->
<div v-bind:class="arrClasses">嘿嘿嘿</div>
<!-- 对象形式的简化写法 -->
<div v-bind:class="objClass">呵呵呵</div>
<!-- 默认的class如何处理，默认的class不会被覆盖，而是结合到了一起 -->
<div class="base" v-bind:class="objClass">哼哼哼</div>
<!-- 切换，可以切换是否展示 -->
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
activeClass: 'active', // activeClass表示的是类名称
errorClass: 'error', //
isColor: true,
arrClasses: ['active', 'error'], // 简化数组形式
objClass: {
// 对象形式的简化
active: true,
error: true,
}
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
this.isColor = !this.isColor; //
this.objClass.error = !this.objClass.error; // 对象形式修改样式
}
}
});
</script>
</body>
</html>
3）、style样式处理，也称为内联样式。
对象语法：。直接写了css样式。
数组语法：。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<!-- 对象形式，如果样式较多，可读性不好 -->
<div v-bind:style="{border: borderStyle, width: widthStyle, height: heightStyle}">哈哈哈</div>
<!-- 对象形式简化用法，通过使用对象形式的一组样式来展示 -->
<div v-bind:style="objStyles">哈哈哈</div>
<!-- 数组语法，里面存放的多个对象的形式 -->
<div v-bind:style="[objStyles, overwiteStyles]"></div>
<!-- 切换，可以切换是否展示 -->
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
borderStyle: '1px solid red', //
widthStyle: '100px', //
heightStyle: '200px',
objStyles: {
border: '1px solid red', //
width: '200px', //
height: '100px',
},
overwiteStyles: {
border: '3px solid orange', //
width: '100px', //
height: '200px',
backgroundColor: 'pink',
}
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
this.heightStyle = '100px'; //
this.objStyles.width = '100px'; // 可以修改对象里面的属性的样式值
this.overwiteStyles.height = '100px'; // 可以修改对象里面的属性的样式值
}
}
});
</script>
</body>
</html>
12、Vue模板语法，分支循环结构。
1）、分支结构，v-if、v-else、v-else-if、v-show。
v-if和v-show的区别，v-if控制元素是否渲染到页面。v-show控制元素是否显式（已经渲染到了页面）。如果一个元素频繁的显式和隐藏就使用v-show，如果一个元素渲染出来之后变化的比较少的话就用v-if，控制的是dom元素的增加或者删除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<input v-model="score" />
<!-- 分支结构，渲染出来的只有一个div，区别于v-show -->
<div v-if="score>= 90">优秀</div>
<div v-else-if="score< 90 && score >= 80">良好</div>
<div v-else-if="score< 80 && score > 70">一般</div>
<div v-else-if="score< 70 && score > 60">及格</div>
<div v-else>不及格</div>
<br />
<!-- v-show的原理，控制元素样式是否显式，就是display:none或者display:block; -->
<!-- 分支结构，v-show，当为false的时候，页面不展示，但是浏览器源码是展示的，false的样式是style="display: none;" -->
<div v-show="flag">测试v-show</div>
<!-- 切换 -->
<button @click="handle">切换</button>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
score: '',
flag: true,
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
handle: function() {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
2）、分支循环结构，循环结构。
a）、v-for遍历数组：
b）、key的作用，帮助vue区分不同的元素，从而提高性能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<span>水果列表：</span>
<!-- 循环遍历 -->
<!-- 使用v-text进行展示，可以避免闪动现象发生 -->
<li v-for="item in fruit" v-text="item"></li>
<!-- 使用插值表达式，可能出现闪动 -->
<!-- <li v-for="item in fruit">{
{
item}}</li> -->
<br />
<span>水果列表：</span>
<!-- 展示的索引和元素，使用空格隔开 -->
<li v-for="(item,index) in fruit">{
{
index + " " + item}}</li>
<!-- 展示形式和上面的一致 -->
<li v-for="(item,index) in fruit">{
{
index}} {
{
item}}</li>
<br />
<span>水果列表：</span>
<!-- 复杂的数组对象结构 -->
<li v-for="item in cfruit">
<!-- 通过点来获取数组对象的属性值 -->
<span>{
{
item.ename}} {
{
item.cname}}</span>
</li>
<br />
<span>水果列表：</span>
<!-- key的作用，帮助vue区分不同的元素，从而提高性能。Vue在处理Dom元素的时候，需要区分兄弟节点之间彼此是不一样的，给每个兄弟节点标注一个唯一标识 -->
<!-- 使用唯一标识，方便区分是那一个元素 -->
<li :key='item.id' v-for="(item,index) in cfruit">
<!-- 通过点来获取数组对象的属性值 -->
<span>{
{
item.ename}} {
{
item.cname}}</span>
</li>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
fruit: ['apple', 'orange', 'banana'],
cfruit: [{
id: 1,
ename: 'apple',
cname: '苹果',
}, {
id: 2,
ename: 'orange',
cname: '橘子',
}, {
id: 3,
ename: 'banana',
cname: '香蕉',
}, ]
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
}
});
</script>
</body>
</html>
3）、分支循环结构，循环结构。
a）、v-for遍历对象：。
b）、v-if和v-for结合使用：。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<!-- v-for遍历对象 -->
<div v-for="(value, key, index) in object">
{
{
index}} {
{
key}} {
{
value}}
</div>
<br />
<!-- v-if和v-for结合使用 -->
<div v-if="value == 22" v-for="(value, key, index) in object">{
{
index}} {
{
key}} {
{
value}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
object: {
name: '张三三',
age: 22,
gender: '男性',
}
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
}
});
</script>
</body>
</html>
13、Tab选项卡。
1）、实现静态ui效果，用传统的方式实现标签结构和样式。
2）、基于数据重构ui效果，将静态的结构和样式重构为基于Vue模板语法的形式，处理事件绑定和js控制逻辑。
3）、总结，Vue模板 + Js控制逻辑 = Vue实例对象，实现前端功能。
4）、声明式编程，模板的结构和最终显示的效果基本一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
.tal ul{
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li{
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid black;
border-right: 1px solid black;
cursor: pointer;
}
.tab ul li:first-child{
border-left: 1px solid black;
}
.tab ul li.active{
background-color: orange;
}
.tab div{
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 0px solid black;
border-top: 0px;
}
.tab div.current{
display: block;
}
</style>
</head>
<body>
<div id="app">
<!-- Tab选项卡。 -->
<div class="tab">
<!-- 展示tab栏 -->
<ul>
<li v-on:click="change(index)" v-bind:class="currentIndex == index ? 'active':''" :key='item.id' v-for="(item,index) in list">{
{
item.title}}</li>
</ul>
<!-- 展示图片 -->
<div v-bind:class="currentIndex == index ? 'current':''" :key='item.id' v-for="(item,index) in list">
<!-- <img v-bind:src="item.path" /> -->
<img :src="item.path" />
</div>
</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
// Vue实例对象将Vue模板和Js控制逻辑粘合到一起，最终实现前端功能
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: {
// 用于提供数据
currentIndex: 0, //选项卡当前的索引
list: [{
id: 1,
title: '小米10Pro',
path: 'img/1.jpg',
}, {
id: 2,
title: '小米9Pro',
path: 'img/2.jpg',
}, {
id: 3,
title: '小米8Pro',
path: 'img/3.jpg',
}],
},
methods: {
// methods属性里面可以定义很多方法的，值是一个对象。方法需要定义到methods属性当中。
change: function(index) {
// 实现选项卡的切换操作，切换的本质就是修改的类名称，操作类名称就是通过currentIndex这个索引的，因为这个索引影响三目运算符的真假
this.currentIndex = index;
}
}
});
</script>
</body>
</html>