【Vue】黑马vue快速入门笔记
简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建[用户界面]的渐进式[JavaScript]框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持[类库]结合使用时，Vue 也完全能够为复杂的单页应用（[SPA]）提供驱动。
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动
Vue的特点和优势
vue两大特点：响应式编程、组件化。
vue的优势
轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。
轻量级框架
只关注视图层,是一个构建数据的视图集合,大小只有几十kb
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统
简单易学
国人开发,中文文档,不存在语言障碍,易于理解和学习
双向数据绑定
也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。
也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。
这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。
组件化
在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。
Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。
视图,数据,结构分离
使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作
虚拟DOM
现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。
而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。
运行速度更快
像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势
vue的缺点
1、Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。
2、VUE不支持IE8
3、生态环境差不如angular和react
Anglar：现代 Web 开发平台
React：用于构建用户界面的 JavaScript 库
4、社区不大
第一个Vue程序
-
导入开发版本的Vue.js
创建一个
.html文件，然后通过如下方式引入 Vue：<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
创建Vue实例对象，设置el属性和data属性
- el ：挂载点
【Vue实例的作用范围】
Vue会管理el选项命中的元素及其内部的后代元素
【是否可以使用其他的选择器】
可以使用其他的选择器，但是建议使用ID选择器
【是否可以设置其他的dom元素】
可以使用其他的双标签，不能使用HTML和BODY
-
data ：数据对象
Vue实例需要使用的数据都存在data中
data中可以写复杂类型的数据
渲染复杂类型的数据时，遵守js的语法即可
-
methods : 方法
-
使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue测试001</title>
</head>
<body>
{
{ message }}
<div id="app" class="app">
{
{ message }} <!-- "{" 插值表达式-->
<span> {
{ message }} </span>
<h2> {
{ school.name }} {
{ school.mobile }} </h2>
<ul>
<li>{
{ campus[0] }}</li>
<li>{
{ campus[1] }}</li>
</ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
// el:"#app", //在css选择器中“#”是id选择器
//【实际开发使用，避免语义不清晰，只能支持双标签】
//不要把vue挂载到<body>/<HTML>上，挂载在其他的标签上如：div
// el:".app", //在css选择器中"."是class选择器
el:"div", //在css选择器中标签选择器
data:{
message:"Hello!", //基本类型字符串message
school:{
//对象,取对象用"."
name:"CYQAQ",
mobile:"55555"
},
campus:["北京","上海","广州","深圳"] //数组,取数组中元素用索引
}
})
</script>
</body>
</html>
Vue本地应用
- 通过Vue实现常见的网页效果
- 学习Vue指令，以案例巩固知识点
- Vue指令指的是以**v-**开头的一组特殊语法
1.内容绑定，事件绑定
v-text
设置标签/元素的文本值(textContent)
-
默认写法会替换全部内容，使用差值表达式 { {}} 可以替换指定内容
-
内部支持写表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue测试002</title> </head> <body> <div id="app"> <h2 v-text="message+'!'">深圳</h2> <!--注意字符串拼接时 “ ’ 的使用--> <h2 v-text="info+'!'">深圳</h2> <!--vue指令不会显示深圳--> <h2>深圳{ { message + "!"}}</h2> <!--若要部分替换，使用{ {}}--> <h2 v-text="content"></h2> <!--v-text不会解析html--> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"CYQAQ", info:"dididi", content:"<a href='#'>CYQAQ</a>" } }) </script> </body> </html>
v-html
设置标签/元素的innerHTML
-
内容中有html结构会被解析为标签
-
v-text指令无论内容是什么，只会解析为文本
-
解析文本使用v-text，需要解析html结构使用v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue测试003</title> </head> <body> <div id="app"> <p v-html="content"></p> <!--v-html会解析html--> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ //content:"CYQAQ" content:"<a href='https://cn.vuejs.org/v2/guide/'>Vue.js</a>" } }) </script> </body> </html>
v-on基础
为元素绑定事件
-
事件名不需要写on
-
指令可以简写为@
-
绑定的方法定义在methods属性中
-
方法内部通过this关键字可以访问定义在data中数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue测试003</title> </head> <body> <div id="app"> <!--<input type="button" value="事件绑定" v-on:事件名="方法">--> <input type="button" value="事件绑定" v-on:click="doIt"><!--点击事件--> <input type="button" value="事件绑定" v-on:monseenter="doIt"><!--鼠标移入事件--> <input type="button" value="事件绑定" v-on:dblclick="doIt"><!--双击事件--> <input type="button" value="事件绑定" @dblclick="doIt"> <h2 @click="changeFood">{ { food }}</h2> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ food:"炒蛋" }, methods:{ doIt:function(){ //逻辑 alert("做IT"); }, changeFood:function(){ //console.log(this.food); 方法中拿到数据需要用this this.food+="好吃!" } }, }) </script> </body> </html>
计数器应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue_Counter</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div id="app" >
<div class="input-num">
<button @click="sub">
-
</button>
<span>{
{ num }}</span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add
最低0.47元/天 解锁文章
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
