vue模板语法
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: '<h1>hello Vue!</h1>', //可以使用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指令用法:<input type="button" v-on:click="num++" />。
v-on简写形式,<input type="button" @click="num++"/>。
2)、事件函数的调用方式。
直接绑定函数名称:<button v-on:click="add">
加一</button>
。不需要传递事件对象,默认携带事件对象。
调用函数:<button @click="reduce()">
减一</button>
。
<!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。
普通的参数和事件对象:<button @click="say("hi",$event)">Say Hi</button>
。
<!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
阻止冒泡:<a v-on:click.stop="">
跳转</a>
。
.prevent
阻止默认行为:<a v-on:click.prevent="">
跳转</a>
。
<!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
回车键:<input v-on:keyup.enter='submit'>
。
.delete
删除键:<input v-on:keyup.delete='handle'>
。
<!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如何动态处理属性。
v-bind
指令用法:<a v-bind:href='url'>
跳转</a>
。
缩写形式:<a :href='url'>
跳转</a>
<!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底层用到的是属性绑定和事件绑定的组合。<input v-bind:value="msg" v-on:input="msg=$event.target.value" />
<!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
样式进行处理,处理标签的属性。
对象语法:<div v-bind:class="{active:isActive}"></div>
。对象形式的。
<!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>
数组语法:<div v-bind:class="[activeClass, errorClass]"></div>
。数组形式的。
<!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样式处理,也称为内联样式。
对象语法:<div v-bind:style="{color: activeColor,fontSize: fontSize}"></div>
。直接写了css样式。
数组语法:<div v-bind:class="[baseStyles, overridingStyles]"></div>
。
<!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遍历数组:
<li v-for="item in list">{{item}}</li>
。
<li v-for="(item, index) in list">{{item}} + '---' + {{index}}</li>
。
b)、key的作用,帮助vue区分不同的元素,从而提高性能。
<li :key='item.id' v-for="(item,index) in list">{{item}} + '---' + {{index}}</li>
。
<!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遍历对象:<div v-for='(value, key, index) in object'></div>
。
b)、v-if和v-for结合使用:<div v-if='value == 12' v-for='(value, key, index) in object'></div>
。
<!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>