本文是Vue.js的学习笔记，介绍了Vue的核心概念和基础用法，包括安装、第一个Vue程序、指令（v-if/v-else/v-for/v-on/v-bind/v-model）、组件、网络通信（Axios）以及计算属性和插槽。通过实例展示了Vue如何实现数据双向绑定、条件渲染、事件处理和数据请求。此外，还提到了Vue组件的定义和数据传递。
Vue
学习笔记，如有错误，请留言指教
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
MVVM:
M: Model 模型层
V: View 视图层
VM： ViewModel： 连接视图和数据的中间层；数据的双向绑定；
Vue2.x
0. 安装
了解 node.js 和 npm 可以使用 npm 安装
方法一： 引入Vue.js：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
方法二： 下载源码： https://cn.vuejs.org/js/vue.js
1. 第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
</body>
<script src="./js/vue2.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message: "hello Vue"
},
})
</script>
</html>
{{xxx}} : mustach语法 可以取出data中的数据， 类似于jsp中的${}
2. Vue指令
Vue中带有v-前缀的，称之为指令，Vue中有很多指令，比如v-if、v-else、v-bind 等等
2.1 判断
-
v-if , v-else
- 比如：用户登录后才可以发布文章
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2 v-if="flag"> <a href="#">发布文章</a> </h2> <h2 v-else> 您还没有登录，请<a href="#">登录</a>后进行发布 </h2> </div> <script src="../js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ flag:false }, }) </script> </body> </html>在控制台输入app.flag = true，即可看到 发布文章
-
v-else-if
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h4 v-if="score >= 90">优秀</h4> <h4 v-else-if="score >= 75">良好</h4> <h4 v-else-if="score >= 60">合格</h4> <h4 v-else>不合格</h4> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ score:80 }, }) </script> </body> </html>
2.2 循环
-
v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script src="./js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ list:["张三","李四","王五","马六"] }, }) </script> </body> </html>v-for取数组下标：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item, index) in list"> {{index + 1}} {{item}} </li> </ul> </div> <script src="./js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ list:["张三","李四","王五","马六"] }, }) </script> </body> </html>
2.3 事件
v-on ： 事件绑定
methods：方法定义在methods中
-
v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button v-on:click="btnClick()">按钮</button> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'Hello' }, methods:{ btnClick(){ alert("按钮被点击"); } }, }) </script> </body> </html> -
v-on可以简写为 @:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button @Click="btnClick">按钮</button> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'Hello' }, methods:{ btnClick(){ alert("按钮被点击！"); } }, }) </script> </body> </html>
2.4 数据绑定
-
数据单向绑定
-
v-bind
-
v-bind可以简写为" : "
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <input type="text" v-bind:value="message"> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'Hello' } }) </script> </body> </html> -
数据双向绑定，当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着变化。
-
v-model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h2>{{message}}</h2> 请输入：<input type="text" v-model="message"> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'' } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h3>{{sex}}</h3> <input type="radio" name="sex" id="male" value="男" v-model="sex"> <label for="male">男</label> <input type="radio" name="sex" id="female" value="女" v-model="sex"> <label for="female">女</label> </div> <script src="./js/vue2.js"></script> <script> const app = new Vue({ el:'#app', data:{ sex:'男' }, }) </script> </body> </html>
3. 组件
-
组件可以自定义便签，自定义该便签的内容
-
比如定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <hello/> <hello></hello> </div> <script src="./js/vue2.js"></script> <script> Vue.component("hello",{ template:"<h2 style='color:red'>Hello</h2>" }); const app = new Vue({ el:'#app' }); </script> </body> </html> -
组件的数据传递(prop)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ol> <xxx v-for="item in items" :key="item.id" :todo="item.name"></xxx> </ol> </div> <script src="./js/vue2.js"></script> <script> Vue.component('xxx',{ props:['todo'], template:` <li> {{todo}} </li> ` }) const app = new Vue({ el:'#app', data:{ items:[ {id:0, name:'篮球'}, {id:1, name:'足球'}, {id:2, name:'羽毛球'}, {id:3, name:'乒乓球'}, {id:'', name:'...'} ] } }) </script> </body> </html>
在之后的代码块中将不包括html的基本框架代码
4. 网络通信
-
Vue推荐使用Axios框架
-
Axios异步通信，类似于AJAX
引入Axios的CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-
模拟后端Json数据
- data.json
{ "id":1001, "name":"张三", "sex":"男", "age":21, "address":{ "street":"成华大道", "city":"成都", "country":"中国" }, "links":[ { "name":"CSDN 博客地址", "url":"https://blog.csdn.net/nyc__" }, { "name":"博客园 地址", "url":"" } ] } -
axios使用方法
<div id="app"> <h2>姓名：{{res.name}}</h2> <h2>年龄：{{res.age}}</h2> <h2>性别：{{res.sex}}</h2> <h2>地址：{{res.address.country}}{{res.address.city}} {{res.address.street}}</h2> <h2>博客：<a :href="res.links[0].url">CSDN博客地址</a></h2> <button @click="btnClick">在控制台输出数据</button> </div> <script src="./js/vue2.js"></script> <script src="./js/axios.min.js"></script> <script> const app = new Vue({ el:'#app', data:{ res:{} }, //这个方法只执行一次，在程序开始前，适合请求初始数据 mounted(){ // axios.get('data.json').then(res=>(console.log(res))); axios.get('data.json').then(response=>(this.res = response.data)); }, methods: { btnClick(){ console.log(this.res); } }, }) </script> -
axios的其他写法
get:
// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 上面的请求也可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });post:
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Axios也有类似ajax的请求方式等等，详情请看Axios官网。
5. 计算属性
- 计算属性写在computed方法中
- 它可以将计算结果保存到一个属性中，并缓存到内存中
- 如果该计算方法没有发生变化，直接使用缓存中的值（比methods高效）
<div id="app">
<h1>{{f1()}}</h1>
<h1>{{f2}}</h1>
</div>
<script src="./js/vue2.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
a:1,
b:2
},
methods:{
f1(){
return this.a+this.b;
}
},
computed:{
f2(){
return this.a+this.b;
}
},
})
</script>
- methods中的方法，每调用一次，就会将方法执行一遍
- computed中的方法，如果方法体没有变化，那么会直接使用缓存中的数据
- computed的方法在mustach语法中不用小括号
6. 插槽slot
-
插槽相当于一个USB接口，你想使用什么设备就连接什么设备就可以了
-
插槽是一个模板，你可以在不同的页面调用同一个模板，插入不同的模块或样式
-
比如京东的标题栏在不同的页面可以插入不同的内容：
<div id="app">
<test>
<span slot="left"><</span>
<span slot="center"> xxx商城 </span>
<span slot="right">=</span>
</test>
</div>
<script src="./js/vue2.js"></script>
<script>
Vue.component('test',{
template:`<div>
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</div>`
})
const app = new Vue({
el:'#app',
data:{
message:'Hello'
}
})
</script>
扫一扫
5761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
