万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 一 ) （建议收藏）
Posted 林深时不见鹿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 一 ) （建议收藏）相关的知识，希望对你有一定的参考价值。
笔记根据B站编程不良人视频整理，视频链接：【编程不良人】VUE全家桶入门到实战，学VUE看这个就够了，已完结！基于企业最流行Vue实战技术， 需要md格式笔记的可以私信我。
目录
1、Vue 引言
渐进式javascript 框架 --摘自官网
# 渐进式
1. 易用 html css javascript
2. 高效 开发前端页面 非常高效
3. 灵活 开发灵活 多样性
# 总结
Vue 是一个javascript 框架 js 简化页面js操作
bootstrap 是一个css框架 封装css
# 后端服务端开发人员:
页面标签 dom jquery js document.getElementById("xxx")
Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM
注意：日后在使用vue过程中页面不要再引入Jquery框架
html css--->javascript(document.getElementById()...) ---->jquery($("#xx")) ---> angularjs --->vue(前后端分离架构核心)
vue 前端系统 <-----JSON-----> 后台系统springcloud
# Vue 作者
尤雨溪 国内的
2、Vue入门
2.1、下载Vuejs
//开发版本:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.2、Vue第一个入门应用
1、vue第一个入门应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body>
<div id="app">
{{msg}}
<h2>{{msg}}</h2>
<span>
<h2>{{msg}}</h2>
<span>
<span>{{msg}}</span>
</span>
</span>
<h3>用户名：{{username}}</h3>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
var app= new Vue({
el:"#app", //element：元素 作用：用来指定vue实例作用范围 日后在el指定的作用范围内可以直接使用{{属性名}}获取data中的属性
data:{ //data：数据 作用：用来给vue实例对象绑定一系列数据
msg: "Vue欢迎您！",
username: "小陈!!",
}
});
</script>
2、vue实例中定义对象，数组等相关数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h2>{{age}}</h2>
<h2>姓名：{{user.name}} 描述：{{user.des}}</h2>
<h2>{{schools[0]}}-{{schools[1]}}-{{schools[2]}}-{{schools[3]}}</h2>
<h2>姓名：{{users[0].name}} 年龄：{{users[0].age}} 生日：{{users[0].bir}}</h2>
<h2>姓名：{{users[1].name}} 年龄：{{users[1].age}} 生日：{{users[1].bir}}</h2>
<h2>姓名：{{users[2].name}} 年龄：{{users[2].age}} 生日：{{users[2].bir}}</h2>
</div>
</body>
</html>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //指定vue作用范围
data:{ //用来给vue实例绑定一系列数据
msg:"百知欢迎您!!!",
age:"23",
user:{name:"小陈",des:"他在百知,百知等你！！"}, //定义对象
schools:["河南校区","北京校区","天津校区","山西校区"], //定义一个数组
users:[
{name:"小王",age:23,bir:"2012-12-01"},
{name:"小李",age:24,bir:"2013-12-01"},
{name:"小赵",age:25,bir:"2014-12-01"},
]
}
});
</script>
3、使用{{属性名}}获取data数据时,使用表达式 运算符等相关操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<!--{{属性名}}：使用这种方式获取数据时，可以进行相关的运算（算数，逻辑），调用获取值类型相关js方法-->
<h2>{{msg + '您好'}}</h2>
<h2>{{msg == 'hello vue'}}</h2>
<h2>{{msg.toUpperCase()}}</h2>
<h2>{{age + 1}}</h2>
<h2>{{age == 23}}</h2>
</div>
</body>
</html>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //指定vue作用范围
data:{ //用来给vue实例绑定一系列数据
msg:"hello vue",
age:23,
}
});
</script>
4、使用vue时el属性指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body >
<div id="app" class="aa">
<h2>{{msg}}</h2>
</div>
</body>
</html>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //指定vue作用范围
// 书写格式：使用css选择器 id选择器 html选择器 类选择器 推荐使用id选择器 id选择器具有唯一性
// 注意事项：不要将el指向body或html标签 Do not mount Vue to <html> or <body> - mount to normal elements instead.
data:{ //用来给vue实例绑定一系列数据
msg:"hello vue",
}
});
</script>
5、总结
# 总结:
1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注意: el属性值不能指定body或html标签
3、v-text和v-html
3.1、v-text
v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
<div id="app" class="aa">
<span >{{ message }}</span>
<span v-text="message"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"百知欢迎您"
}
})
</script>
# 总结
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
3.2、v-html
v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
<div id="app" class="aa">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a href=''>百知欢迎您</a>"
}
})
</script> } }) </script>
3.3、v-text和v-html对比
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body >
<div id="app" class="aa">
<h2>{{msg}} 您好</h2>
<!--vue提供两个指令： v-text v-html 都可以直接根据属性名获取data数据渲染到指定标签内-->
<!--v-text-->
<h2><span v-text="msg"></span> 您好</h2>
<!--
v-text: {{}} 取值区别：
1.使用{{}}取值不会将标签原始数据覆盖 使用v-text获取数据会将标签中原始内容覆盖
2.v-text获取数据时不会出现插值闪烁 {{属性名}} ===> 插值表达式：容易出现插值闪烁 插值闪烁：当网络不好条件情况下使用{{}}方式获取数据
-->
<h2 v-html="msg"></h2>
<!--
共同点：都可以直接根据data中数据名，将数据渲染到标签内部
v-text: v-text将获取数据直接以文本形式渲染到标签内部 innerText
v-html: v-html将获取数据中含有html标签解析之后渲染到对应标签内部 innerHtml
-->
<h1 >{{content}}</h1>
<h1 v-text="content"></h1>
<h1 v-html="content"></h1>
</div>
</body>
</html>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app", //指定vue作用范围
data:{ //用来给vue实例绑定一系列数据
msg:"hello vue",
content : "欢迎来到<a href='http://www.baidu.com'>百度</a>",
}
});
</script>
运行结果：
4、vue中事件绑定(v-on)
4.1、绑定事件基本语法
1、vue事件绑定（一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程</title>
</head>
<body >
<div id="app" >
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h2 v-html="msg"></h2>
<!--
js 事件三要素
1.事件源：发生事件源头称之为事件源，一般指的是html标签
2.事件：发生特定动作 onclick单击 dbclick 双击 onkeyup ......
3.监听器：事件处理器程序 事件处理函数 function(){}
vue 事件：v-on
1.在vue中给对应标签绑定事件可以通过vue提供v-on指令进行事件绑定 ==> v-on:事件名
2.在vue中事件处理函数统一声明在vue实例中methods属性
-->
<!--给button按钮绑定多个事件-->
<input type="button" value="点我" v-on:click="aaa" v-on:mouseover="bbb" 以上是关于万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 一 ) （建议收藏）的主要内容，如果未能解决你的问题，请参考以下文章
万字长文 Vue全家桶从入门到实战，超详细笔记整理 ( 二 ) （建议收藏）
❤️Docker超详细基础教程，快速入门docker首选❤️(万字长文建议收藏)
大数据学习入门到实战教程，精心整理万字长文入门第一章，老奶奶看了都说学会了