Vue (读音 /vju/,类似于 view) 是中国的大神尤雨溪开发的,为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型,避免直接操作DOM , 降低DOM操作的复杂性。
“渐进式框架” 非常简单,就是用你想用或者能用的功能特性,你不想用的部分功能可以先不用。VUE不强求你一次性 接受并使用它的全部功能特性
npm init ‐y
npm install 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=, initial-scale=1.0" >
<title>Documenttitle>
head>
<body>
<div id="app">
<h1> {{name}} ,你好h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el:"#app",//绑定元素
data: {
name:"李白"
},
});
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=, initial-scale=1.0" >
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">登录button>
<button v-on:click="num--">登出button>
<h1> {{name}} ,你好,当前登录第{{num}}次h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
// 1.new Vue实例,每个vue应用都是通过Vue函数创建一个Vue实例开始的
new Vue({
el:"#app", //挂载的模板
data: { //绑定的数据 当数据属性的值发生改变时,视图会进行重新渲染,响应式的
name:"李白",
num:1
},
//方法:声明方法可以实现更复杂的操作,声明methods属性中
methods: {
nowDate(){
return new Date();
},
loginout(){
this.num--;
}
},
});
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>Documenttitle>
head>
<body>
<div id="app">
<div v-text="message">div>
<div v-html="message">div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data: {
message: "您好!"
},
});
script>
body>
html>
vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来 看一下使用两个指令各有什么效果
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>Documenttitle>
head>
<body>
<div id="app">
<button @click="vif=!vif">切换显示隐藏button>
<div v-if="vif" style="background-color: aqua;height: 200px;width: 200px;">
v-if
div>
<hr>
<button @click="vshow=!vshow">切换显示隐藏button>
<div v-show="vshow" style="background-color: red;height: 200px;width: 200px;">
v-show
div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data() {
return {
vif:true,
vshow:true
}
}
})
script>
body>
html>
事实上,vif的条件渲染和JavaScript条件判断语 句中的if、else、else if非常类似
与vif一起使用, 如果value为false, 将当前标签输出到页面中
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>Documenttitle>
head>
<body>
<div id="app">
<div v-if="num === 1">
1
div>
<div v-else-if="num === 2">
2
div>
<div v-else>
3
div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data() {
return {
num:1
}
},
})
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>Documenttitle>
head>
<body>
<div id="app">
<div v-for="(item, index) in musics" :key="index">{{item.name}}div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data() {
return {
musics:[{name:"十年"},{name:"歌唱祖国"}]
}
},
})
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>Documenttitle>
head>
<body>
<div id="app">
<button v-on:click="fun1()">点击触发事件button>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data() {
return {
}
},
methods: {
fun1(){
alert("OK");
}
},
})
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>Documenttitle>
head>
<body>
<div id="app">
<div v-bind:title="title">悬停查看信息div>
<div>
<a v-bind:href="href">百度a>
div>
<div>
<img v-bind:src="src">
div>
<div>
<button v‐bind:disabled="disabled">禁用按钮button>
div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
title: "您好!",
href: 'https://www.baidu.com/',
src: 'http://img2.mukewang.com/szimg/5df1deec09ba554712000676‐360‐202.png',
disabled: true
}
})
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>Documenttitle>
head>
<body>
<div id="app">
<div>
<label>年龄:label>
<input v-model="age"/>
div>
<div>当前输入的年龄是: {{age}}div>
<button @click="add">加一岁button>
<button @click="alertYear">弹出年龄button>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data:{
age:10
},
methods: {
add(){
this.age = this.age+1;
},
alertYear(){
alert(this.age);
}
},
})
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>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in car" >
{{item.pname}} --- 商品价格:{{item.price}} --- 库存:{{item.stock}}
数量:<input type="number" v-model="item.num" style="width: 30px;" />
li>
<li><strong>总价:strong>{{calcSum}}li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data:{
car:[
{pname:'Iphone 12',price:7999,stock:10,num:1},
{pname:'小米11',price:3599,stock:3,num:4},
],
},
// methods : 当方法中使用的数据发生改变,方法会自动调用
methods: {
// calcSum(){
// let sum=0;
// this.car.forEach(item => {
// sum+=item.price*item.num;
// });
// return sum;
// }
},
computed:{
calcSum(){
let sum=0;
this.car.forEach(item => {
sum+=item.price*item.num;
});
return sum;
}
}
})
script>
body>
html>
方法和计算属性的区别:声明发生不一样,调用不一样,方法要用(), 计算属性调用不要加()
如果不使用计算属性,在 methods 里定义了一个方法,也可以实现相同的效果,甚至该方法还可以接受参数,使用起来 更灵活。
原因就是:计算属性是基于它的依赖缓存的。前面我们介绍过,计算属性的改变取决于其所依赖数据的变化,所以只要 依赖数据不发生改变,计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算,只会获取缓存的值。而我 们每次调用 methods 都会重新计算一遍,这样将会消耗一部分性能。当然,如何你不希望对数据进行缓存,那么可以用 方法来代替。
通过侦听器来监听数据的变化,进行相应的逻辑处理。
监听对象类型数据的某个属性进行侦听。
案例
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>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in car" >
{{item.pname}} --- 商品价格:{{item.price}} --- 库存:{{item.stock}}
数量:<input type="number" v-model="item.num" style="width: 30px;" />
li>
<li><strong>总价:strong>{{calcSum}}li>
<li v-html="message">li>
<li v-html="warn()">li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
new Vue({
el:"#app",
data:{
car:[
{pname:'Iphone 12',price:7999,stock:10,num:1},
{pname:'小米11',price:3599,stock:3,num:4},
],
message:"",
},
// methods : 当方法中使用的数据发生改变,方法会自动调用
methods: {
//方法侦听属性
warn(){
let message="";
this.car.forEach(item => {
if(item.num>item.stock){
message+=`${item.pname}的库存超出限制
`
}
});
return message;
}
},
computed:{
calcSum(){
let sum=0;
this.car.forEach(item => {
sum+=item.price*item.num;
});
return sum;
}
},
watch:{
//要侦听的数据: 数组
car:{
handler(newvalue,oldvalue){
this.message="";
this.car.forEach(item => {
if(item.num>item.stock){
this.message+=`${item.pname}的库存超出限制
`
}
})
},
deep:true //深度侦听器
},
//基础类型侦听,将侦听数据作为函数就可以了
message(newvalue,oldvalue){
console.info(newvalue,oldvalue);
}
}
})
script>
body>
html>
方法: 方法中任意数据发生了改变就会自动调用方法可以调用,进行返回值
侦听器:需要指定具体的侦听数据,只有被具体指定的侦听数据发生了改变才会触发不能像方法那样去调用, 而是靠vue自动触发
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>过滤器title>
head>
<body>
<div id="app">
<ul>
<li v-for="user in userList">
姓名:{{user.name}};性别:{{formateGender(user.gender)}}
{{user.gender | filterGender}}
li>
ul>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'xushu', gender: 1 },
{ id: 2, name: 'zhuge', gender: 0 }
]
},
methods: {
formateGender(gender){
if(gender==1){
return "~男"
}else{
return "~女"
}
}
},
// 专门针对数据过滤
filters:{
filterGender(gender){
if(gender==1){
return "!男"
}else{
return "!女"
}
}
}
})
script>
body>
html>
组件是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的 小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
在编写组件时,我们需要不断思考如何提高组件的可复用性。
组件是可复用的 Vue 实例, 我们可以把页面中在多个场景中重复使用的部分,抽出为一个组件进行复用。组件大大提高 了代码的复用率。
全局组件可以在任何其他组件内使用,所以当我们设计的组件,需要在不同地方使用的时候,我们应当注册全局组件。
我们也可以在 Vue 实例选项中注册局部组件,这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例 的 components 对象属性,以组件名作为 key 值,以属性对象作为 value。由于局部组件只能在当前的 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=, initial-scale=1.0" >
<title>Documenttitle>
head>
<body>
<div id="app">
<biaoge>biaoge>
div>
<div id="app2">
<biaobiao>biaobiao>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
// 1.全局組件: 在所有的Vue实例中使用
/*
1.1 命名:不要使用驼峰命名, 可以使用中划线的方式命名
1.2 模板: 必须的
1.3 数据:一定要函数的方式声明
*/
Vue.component("biaoge",{
template:`{{num}}`,
data() {
return {
num:1
}
},
})
//1.定义局部组件
const biaobaio = {
template:`{{num}}`,
data() {
return {
num:40
}
},
}
new Vue({
el:"#app",
data() {
return {
}
}
})
new Vue({
el:"#app2",
data() {
return {
}
},
// 2.定义局部组件
components:{
"biaobiao":biaobaio
}
})
script>
body>
html>
从上面这幅图中,我们可以看到 vue 生命周期可以分为八个阶段,分别是:
在实例初始化之后,此时的数据观察和事件机制都未形成,不能获得 DOM 节点。
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始。
在挂载开始之前被调用:这个过程是在模版已经在内存中编译完成, render 函数首次被调用,此时完成了虚拟 DOM 的 构建,但并未被渲染。
这个过程在模版挂载之后被调用,页面完成渲染,所以在这之后,我们可以操作和访问 DOM 元素。
当数据更新时调用,在这一阶段 DOM 会和更改过的内容同步。
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避 免在此期间更改状态,因为这可能会导致更新无限循环。
实例销毁之前调用。在这一步,实例仍然完全可用。
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会 被销毁。 实例代码:
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>Documenttitle>
head>
<body>
<div id = "app">
<span id="name">{{ name }}span>
<button @click="updateName">更新button>
<button @click="destroy">销毁button>
div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
name:'hello !'
},
methods : {
updateName() {
console.log('准备修改名字啦!')
this.name = 'hello hello!'
},
destroy(){
vm.$destroy()
}
},
beforeCreate() {
// 此时页面数据未初始化
console.log('beforeCreate:' + this.name) // beforeCreate: undefined
},
created() {
// 页面数据已经初始化
console.log('created:' + this.name) // beforeCreate: hello !
},
beforeMount() {
console.log('beforeMount:' + this.name) // beforeCreate: hello !
console.log("html模板未渲染:" + document.getElementById("name").innerText);
},
mounted() {
console.log('mounted:' + this.name) // beforeCreate: hello !
console.log("html模板已渲染:" + document.getElementById("name").innerText);
},
// 点击更新按钮后会先触发 beforeUpdate
beforeUpdate() {
console.log('beforeUpdate:' + this.name) // beforeCreate: hello
console.log("html模板未更新:" + document.getElementById("name").innerText);
},
updated() {
console.log('updated:' + this.name) // updated hello 中国 !
console.log("html模板已更新:" + document.getElementById("name").innerText);
},
// 点击销毁按钮后会先触发 beforeDestroy
beforeDestroy(){
console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
console.log("销毁前:" + document.getElementById("name").innerText);
},
destroyed(){
console.log('destroyed: success') // destroyed: success
// 在这之后点击页面 更新 按钮将无任何效果
console.log("销毁后:" + document.getElementById("name").innerText);
}
});
script>
html>
npm install vue‐router
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>Documenttitle>
head>
<body>
<div id="app">
<div>
<router-link to="/index">首页router-link>
<router-link to="/product">商品router-link>
<router-view>router-view>
div>
div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script src="./node_modules/vue-router/dist/vue-router.js">script>
<script type="text/javascript">
let Index = Vue.component("index", {
template: `Hello,欢迎使用来到小米商城!`
});
let Product = Vue.component("product", {
template: `- 1. Iphone11
- 2. 小米11
`
});
// 4.使用路由管理模板, 将url跟模板进行绑定
const router = new VueRouter({
routes: [{
path: "/index",
component: Index
},
{
path: "/product",
component: Product
},
]
})
var vm = new Vue({
el: '#app',
router
})
script>
html>
特性
npm install axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in users">
{{item}}
li>
ul>
div>
body>
<script src="./node_modules/vue/dist/vue.js">script>
<script src="./node_modules/axios/dist/axios.js">script>
<script>
//1. 还没有调用getAllUsers方法
let vm = new Vue({
el: "#app",
data() {
return {
users: []
}
},
mounted() {
this.getAllUsers();
},
methods: {
getAllUsers() {
axios.get('http://localhost:8811/user/getAllUsers'
//, {
// params: {
// ID: 12345
// }
// }
)
//不使用箭头函数,用this.user不可以,因为在这个this是指Axios
// .then(function(response){
// vm.users = response.data.data;
// })
// 当使用箭头函数 this 指向的是外层
.then(response => {
this.users = response.data.data;
})
.catch(function (error) {
console.log(error);
});
}
},
})
script>
html>
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
自行官网安装cli,然后在文件夹中创建vue脚手架项目
vue create vuehello