本文详细介绍了Vue.js的基础知识，包括Vue的渐进式特性、与传统开发模式的对比、HelloWorld实例分析、模板语法、指令系统、数据绑定、响应式原理、事件处理、样式绑定、以及分支和循环结构。通过实例展示了Vue的使用方法，如v-model、v-once、v-if/v-show等，并探讨了MVVM设计思想。
2021.2.20
文章目录
Vue基础（一）
Vue概述
Vue：渐进式JavaScript框架
声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建
Vue基本使用
传统开发模式对比
原生JS：
<div id="msg"></div>
<script>
var msg = 'Hello world'
var div = document.getElementById('msg')
div.innerHTML = msg
</script>
jQuery：
<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
var msg = 'Hello world'
$('msg').html(msg)
</script>
Vue：
<div id="app">
<!-- 插值表达式 -->
<div>{{msg}}</div>
<!-- 插值表达式支持一些简单的计算,下行代码页面显示内容为3 -->
<div>{{1+2}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello world'
}
})
</script>
Vue.js之HelloWorld细节分析
1.实例参数分析
- el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
- data：模型数据（值是一个对象）
2.插值表达式用法
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作。
3.Vue代码运行原理分析
- 概述编译过程的概念（Vue语法–>原生语法）
Vue的基本使用步骤
- 需要提供标签用于填充数据
- 引入vue.js库文件
- 可以使用vue的语法做功能了
- 把vue提供的数据填充到第一步提供的标签里
Vue模板语法
模板语法概述
1. 如何理解前端渲染？
即把数据填充到HTML标签中。前端渲染的产物是静态HTML内容。
2.前端渲染方式
- 原生js拼接字符串
- 使用前端模板引擎
- 使用vue特有的模板语法
原生js拼接字符串
基本上就是将数据以字符串的方式拼接到HTML标签中。
缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难。
使用前端模板引擎
与拼接字符串相比，代码会明显规范很多，它拥有自己的一套模板语法规则。
优点：大家都遵循同样的规则写代码，代码可读性提高，方便后期维护。
缺点：没有专门提供事件机制。
vue模板语法概述
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
指令
什么是指令？
- 什么是自定义属性
- 指令的本质就是自定义属性
- 指令的格式：以v-开始（比如：
v-cloak）
v-cloak指令用法
- 插值表达式存在的问题：“闪动”
- 如何解决该问题：使用
v-cloak指令 - 解决该问题的原理：先隐藏，替换好值之后再显示最终的值
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
<script src="../vue.min.js"></script>
<script>
/* v-cloak指令的用法
1.提供属性样式（属性选择器）
[v-cloak]{
display:none;
}
2.在插值表达式所在的标签中添加v-cloak指令
背后原理：先通过样式隐藏内容，然后在内存中进行值得替换，替换好之后在显示
*/
new Vue({
el: '#app',
data: {
msg: 'Hello world'
}
})
</script>
数据绑定指令
v-text填充纯文本- 相比插值表达式更加简洁,没有闪动问题
v-html填充HTML片段- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可以用
v-pre填充原始信息- 显示原始信息，跳过编译过程（分析编译过程）
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{{msg}}</div>
</div>
< src="../vue.min.js"></script>
<>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello world',
msg1: '<h1>HTML</h1>'
}
})
</>
数据响应式
- 如何理解响应式
- html5中的响应式（屏幕尺寸的变化导致样式的变化）
- 数据的响应式（数据的变化导致页面内容的变化）
- 按f12，打开控制台
- 输入vm.msg=123,回车，页面内容修改为123
- 什么是数据绑定
- 数据绑定：将数据填充到标签中
- v-once 只编译一次
- 显示内容之后不再具有响应式功能
- 应用场景，如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。
双向数据绑定
什么是双向数据绑定？
页面内容发生变化，数据也会发生变化；在f12控制台中，数据发生变化，页面内容也会发生变化
双向数据绑定分析
- v-model指令用法
<input type='text' v-model='uname' />
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello world'
}
})
</>
⭐️MVVM设计思想
- M(model)
- V(view)
- VM(View-Model)
整个MVVM的核心设计思想，他所体现的理念，首先是分而治之，把不同的业务的代码放到不同的模块当中，然后在通过特定的逻辑把他们组织到一块，最核心的是双向绑定的方式，从视图（View）到模型（Model）用的是事件监听（DOM Listeners），从模型（Model）到视图（View）用的是数据绑定（Data Bindings）。
事件绑定
Vue如何处理事件？
- v-on指令用法
<input type='button' v-on:click='num++' /> - v-on简写形式
<input type='button' @click='num++' />
<div id="app">
<div>{{num}}</div>
<div>
<!-- <button v-on:click='num++'>点击</button> -->
<button @click='num++'>点击</button>
</div>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
num: 0
}
})
</>
如果把事件的处理逻辑全部写到标签里显然是不合理的，可读性非常的差，标签里的业务逻辑应该抽取到一个方法里，vue中专门提供了一个属性去定义方法，叫methods属性。
事件函数的调用方式
- 直接绑定函数名称
<button v-on:click='say'> Hello </button> - 调用函数（里面可以传参）
<button v-on:click='say()'> Say Hi </button>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='num++'>增加</button>
<button @click='handle'>减少</button>
</div>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function() {
console.log(this === vm);//true
//这里的this是vue的实例对象
this.num--;
}
}
})
</>
事件函数参数传递
- 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say Hi</button>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='handle1'>增加</button>
<button @click='handle2(123,456,$event)'>减少</button>
</div>
</div>
< src="../vue.min.js"></>
<>
//事件绑定-参数传递
//1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
//2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML);
this.num++;
},
handle2: function(p, p1, event) {
console.log(p, p1);
console.log(event.target.tagName);
this.num--;
}
}
})
</>
事件修饰符
- .stop阻止冒泡
<a v-on:click.stop='handle'>跳转</a> - .prevent阻止默认行为
<a v-on:click.prevent='handle'>跳转</a>
<div id="app">
<div>{{num}}</div>
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>增加</button>
</div>
<div>
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
</div>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle0: function() {
this.num++
},
handle1: function(event) {
//传统方式 阻止冒泡
//event.stopPropagation();
},
handle2: function(event) {
//传统方式 阻止默认行为
//event.preventDefault();
}
}
})
</>
按键修饰符
- .enter回车键
<input v-on:keyup.enter='submit'> - .delete删除键
<input v-on:keyup.delete='handle'>
自定义按键修饰符
- 全局config.keyCodes对象
Vue.config.keyCodes.f1=112
<div id="app">
<!-- <input type="text" v-model='info' v-on:keyup.65='handle'> -->
<input type="text" v-model='info' v-on:keyup.aaa='handle'>
</div>
< src="../vue.min.js"></>
<>
/*
事件绑定-自定义按键修饰符
规则：自定义案件修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值，
其实，不用自定义名字，将ascll码直接作为修饰符就可以，但是不够直观。
*/
Vue.config.keyCodes.aaa = 65;
var vm = new Vue({
el: '#app',
data: {
info: ''
},
methods: {
handle: function(event) {
console.log(event.keyCode);
}
}
});
</>
属性绑定
Vue如何动态处理属性？
- v-bind指令用法
<a v-bind:href='url'>跳转</a> - 缩写形式
<a :href='url'>跳转</a>
<div id="app">
<!-- <a href="http://www.baidu.com">百度</a>
这是写死了的情况，现在我们希望这个url根据值得变化填充到这里-->
<!-- <a v-bind:href="url">百度</a> 可以简写-->
<a :href="url">百度</a>
<button v-on:click='handle'>切换</button>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
},
methods: {
handle: function() {
//修改url得地址
this.url = 'http://www.sohu.com'
}
}
})
</>
Note：原生js中提供了两个api，getAttribute()、setAttribute()
v-model的底层实现原理分析
<input v-bind:value='msg' v-on:input='msg=$event.target.value'>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-bind:value='msg' v-on:input='handle'>
<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
<input type="text" v-model='msg'>
</div>
< src="../vue.min.js"></>
<>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function(event) {
//使用输入域中的最新的数据覆盖原来的数据
this.msg = event.target.value;
}
}
})
</>
样式绑定
class样式处理
- 对象语法
<div v-bind:class="{active:isActive}"></div><style> .size { width: 100px; height: 100px; } .active { border: 1px solid red; } .error { background-color: orange; } </style> <div id="app"> <div v-bind:class="{active:isActive,error:isError,size:isSize}"></div> <button v-on:click='handle'>切换</button> </div> <script src="../vue.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { isActive: true, isError: false, isSize: true }, methods: { handle: function() { //控制isActive的值在true和false之间进行切换 this.isActive = !this.isActive; this.isError = !this.isError; } } }) </script> - 数组语法
<div v-bind:class="[activeClass,errorClass]"></div><style> .size { width: 100px; height: 100px; } .active { border: 1px solid red; } .error { background-color: orange; } </style> <div id="app"> <div v-bind:class='[activeClass,errorClass,sizeClass]'>测试</div> <button v-on:click='handle'>切换</button> </div> <script src="../vue.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error', sizeClass: 'size' }, methods: { handle: function() { //直接置空 this.activeClass = ''; } } }) </script>
样式绑定相关语法细节
1.对象绑定和数组绑定可以结合使用
2.class绑定的值可以简化操作
3.默认的class如何处理？默认的class会保留
style样式处理
- 对象语法
<div v-bind:style="{color:activeColor,fontSize:fontsize}"></div> - 数组语法
<div v-bind:style="[baseStyles,overridingStyles]"></div>
<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,overrideStyles]'></div>
<button v-on:click='handle'>切换</button>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px',
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function() {
this.heightStyle = '100px';
this.objStyles.width = '100px'
}
}
})
</script>
分支循环结构
分支结构
分支结构有如下几个指令：
- v-if
- v-else
- v-else-if
- v-show
<div id="app">
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>=60'>一般</div>
<div v-else>比较差</div>
<!--
v-show的原理：控制元素样式是否显示 display:none
-->
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 88,
flag: false
},
methods: {
handle: function() {
//this.flag = true;
this.flag = !this.flag;
}
}
})
</script>
v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示（已经渲染到了页面）
循环结构
- v-for遍历数组
<li v-for='item in list'>{{item}}</li><li v-for='(item,index) in list'>{{item}}+'---'+{{index}}</li> - key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>+'---'+{{index}}</li>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item,index) in fruits'>{{item+'---'+index}}</li>
<li :key='item.id' v-for='(item,index) in myFruits'>
<span>{{item.ename}}</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '苹果'
}, {
id: 2,
ename: 'orange',
cname: '橘子'
}, {
id: 3,
ename: 'pear',
cname: '梨子'
}]
},
})
</script>
- v-for遍历对象
<div v-for='(value,key,index) in object'></div> - v-if和v-for结合使用
<div v-if='value==12' v-for='(value,key,index) in object'></div>
<div id="app">
<div v-for='(v,k,i) in obj'>{{v+'--'+k+'---'+i}}</div>
</div>
<script src="../vue.min.js"></script>
<script>
//使用原生js遍历对象
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for (var key in obj) {
console.log(key, obj[key]);
}
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'lisi',
age: 12,
gender: 'male'
}
}
})
</script>
基础案例
案例1：实现一个加法器
需求分析：
- 通过v-model指令实现数值a和数值b的绑定
- 给计算按钮绑定事件，实现计算逻辑
- 将计算结果绑定到对应位置
<body>
<div id="app">
<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 v-on:click='handle'>计算</button>
</div>
<div>
<span>计算结果：</span>
<span v-text='result'></span>
</div>
</div>
<script src="../vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function() {
//实现计算逻辑
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
</script>
</body>
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
