Vue入门与介绍（初学必看）
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
目录
一、Vue是什么
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
官网: 链接
Vue作者：尤雨溪/中国无锡
Vue 的两个核心功能
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
想要更深层次了解的可以去官网去学习
二、Vue的基本用法
1.条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
v-else 为 v-if 添加一个“else 区块”。
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：
案例
当Type值为A为则显示A，为B时显示B，全都不是时显示C
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之判断if-else</title>
</head>
<body>
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<!--导入第一步Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
type:'B'
}
});
</script>
</body>
</html>
测试结果
2.列表渲染
2.1 v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环</title>
</head>
<body>
<div id="app">
<!-- items对应的是下面定义的items 而item对应的是遍历出来的每一项 -->
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:'波哥'},
{message: 'hhhh'}
]
}
});
</script>
</body>
</html>
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。
如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环</title>
</head>
<body>
<div id="app">
<!-- items对应的是下面定义的items 而item对应的是遍历出来的每一项 -->
<li v-for="(item,index) in items">
{{item.message}}
{{index}}
</li>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:'波哥'},
{message: 'hhhh'}
]
}
});
</script>
</body>
</html>
v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似
如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环</title>
</head>
<body>
<div id="app">
<li v-for="{message} in items">
{{message}}
</li>
<!--有index索引时-->
<li v-for="({message},index) in items">
{{message}} {{index}}
</li>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message:'波哥'},
{message: 'hhhh'}
]
}
});
</script>
</body>
</html>
2.2 v-for 与对象
可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys 的返回值来决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环遍历对象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="aa in Book ">
{{aa}}
</li>
</ul>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
Book:{
bid:1,
bname:'jpm',
bprice:34.6,
bjj:'很好看'
}
}
});
</script>
</body>
</html>
可以通过提供第二个参数表示属性名 (例如 key)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环遍历对象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(aa,key) in Book ">
{{key}}:{{aa}}
</li>
</ul>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
Book:{
bid:1,
bname:'jpm',
bprice:34.6,
bjj:'很好看'
}
}
});
</script>
</body>
</html>
第三个参数表示位置索引：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环遍历对象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(aa,key,index) in Book ">
{{key}}:{{aa}}:{{index}}
</li>
</ul>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
Book:{
bid:1,
bname:'jpm',
bprice:34.6,
bjj:'很好看'
}
}
});
</script>
</body>
</html>
三、绑定事件
主要是一个指令methods，这里拿点击事件为例。
方法必须定义在Vue的methods中，v-on：事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue基本元素之循环遍历对象</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">click Me</button>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"呵呵哈哈哈"
},
methods:{//方法必须定义在Vue的methods中，v-on：事件
sayHi:function () {
alert(this.message)
}
}
});
</script>
</body>
</html>
四、双向绑定
什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据也是单项的，这时候就会和双向数据绑定有冲突。
如我们有一个文本框，当我们在文本框输入内容时，后面内容就会同步展示出在后面
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="app">
输入的文本：<input type="text" v-model="message">{{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:null
}
});
</script>
</body>
</html>
五、生命周期
如图
代码解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="d1">
<div>number:{{number}}</div>
<div>{{detail()}}</div>
<input type="text" v-model="number" />
</div>
<script>
var data = {
number:999,
msg:null
};
var vm = new Vue({
el:'#d1',
data:data,
methods:{
detail:function(){
return "使用方法来插值："+this.msg;
}
},
beforeCreate:function(){
console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
console.log(this.msg)//undefined
console.log(document.getElementsByClassName("myp")[0])//undefined
},
created:function(){
console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
this.msg+='!!!'
console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
},
beforeMount:function(){
console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
this.msg+='@@@'
console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log(document.getElementsByClassName("myp")[0])//undefined
console.log('接下来开始render，渲染出真实dom')
},
// render:function(createElement){
// console.log('render')
// return createElement('div','hahaha')
// },
mounted:function(){
console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
console.log(document.getElementsByClassName("myp")[0])
console.log('可以在这里操作真实dom等事情...')
// this.$options.timer = setInterval(function () {
// console.log('setInterval')
// this.msg+='!'
// }.bind(this),500)
},
beforeUpdate:function(){
//这里不能更改数据，否则会陷入死循环
console.log('beforeUpdate:重新渲染之前触发')
console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
},
updated:function(){
//这里不能更改数据，否则会陷入死循环
console.log('updated:数据已经更改完成，dom也重新render完成')
},
beforeDestroy:function(){
console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
}
});
</script>
</body>
</html>
这里我们可以发现，Vue初始化调用四个函数beforeCreate和created 和 beforeMount
和Mountd
当我们修改文本框的值时，就会调用beforeUpdate 和Updated
六、过滤器
过滤器这边分局部过滤器和全局过滤器，其中两个方法用法差不多，而过滤器有分为串联过滤器，过滤器又有带参数的过滤器
串联过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--引用全局过滤器 只要一个-->
<!--{{msg|strSplit}}-->
<!--过滤器串联-->
{{msg|strSplit|strSplit2}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//全局过滤器 过滤方法
Vue.filter('strSplit',function (value) {
console.log(value);
return value.substring(0,5);
}),
//全局过滤器 过滤方法
Vue.filter('strSplit2',function (value) {
console.log(value);
return value.substring(3,5);
})
new Vue({
el:"#app",
data() {
return{
msg:'hello vue'
}
}
});
</script>
</body>
</html>
过滤器传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--引用全局过滤器 只要一个-->
<!--{{msg|strSplit}}-->
<!--过滤器串联-->
{{msg|strSplit|strSplit2}}
<!--过滤器传参-->
{{msg|strSplit3(3,5)}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//全局过滤器 过滤方法
Vue.filter('strSplit',function (value) {
console.log(value);
return value.substring(0,5);
}),
//全局过滤器 过滤方法
Vue.filter('strSplit2',function (value) {
console.log(value);
return value.substring(3,5);
}),
Vue.filter('strSplit3',function (value,a,b) {
console.log(value);
return value.substring(a,b);
})
new Vue({
el:"#app",
data() {
return{
msg:'hello vue'
}
}
});
</script>
</body>
</html>
七、计算属性&监听属性
7.1 计算属性
计算属性指两个变量，有一个变量能够影响到另外一个，而另外一个变量改变不能影响到
如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性&监听属性</title>
</head>
<body>
<div id="app">
<p>计算属性</p>
请输入第一个数：<input v-model="x"/><br>
请输入第二个数：<input v-model="y"/><br>
结果为：{{addFlag}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data() {
return{
x:0,
y:0
}
},
computed:{
//定义计算属性
addFlag:function() {
return parseInt(this.x)+parseInt(this.y)
}
}
});
</script>
</body>
</html>
7.2 监听属性
指变量之间相互影响，如km换算到m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性&监听属性</title>
</head>
<body>
<div id="app">
<p>计算属性</p>
请输入第一个数：<input v-model="x"/><br>
请输入第二个数：<input v-model="y"/><br>
结果为：{{addFlag}}
<p>监听属性</p>
请输入第一个数：<input v-model="km"/><br>
请输入第二个数：<input v-model="m"/><br>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data() {
return{
x:0,
y:0,
km:0,
m:0
}
},
computed:{
//定义计算属性
addFlag:function() {
return parseInt(this.x)+parseInt(this.y)
}
},
watch:{
km:function (v) {
//：之前对应的是被监听的属性，V指的是被监听属性的值
// V代表是千米
// 当v发送变化，那么就会调用方法
this.m= parseInt(v)* 1000;
},
m:function (v) {
this.km = parseInt(v)/1000
}
}
});
</script>
</body>
</html>
八、购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车案例</title>
</head>
<body>
<div id="app">
<p>购物车案例</p>
<table>
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>帽子</td>
<td>
{{aa}}
</td>
<td>
<input v-model="aaa"/>
</td>
<td>
{{aazj}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>
{{bb}}
</td>
<td>
<input v-model="bbb"/>
</td>
<td>
{{bbzj}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>
{{cc}}
</td>
<td>
<input v-model="ccc"/>
</td>
<td>
{{cczj}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{zj}}</td>
</tr>
</table>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data() {
return{
aa:20,
bb:3000,
cc:200,
aaa:1,
bbb:1,
ccc:1
}
},computed:{
aazj(){
return parseInt(this.aa)*parseInt(this.aaa);
},
bbzj(){
return parseInt(this.bb)*parseInt(this.bbb);
},
cczj(){
return parseInt(this.cc)*parseInt(this.ccc);
},
zj(){
return parseInt(this.aazj)+parseInt(this.bbzj)+parseInt(this.cczj);
}
}
});
</script>
</body>
</html>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)