Vue 学习整理
第一个vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First vue</title>
</head>
<body>
<!-- 模板 view层 -->
<div>
<div id = "app">
<h1>{{message}}</h1>
</div>
</div>
<!--导入vue cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 业务层 -->
<script>
var vm = new Vue({
el:"#app",
<!-- model 层 数据层 -->
data:{
message:"Hallo,vue"
}
})
</script>
</body>
</html>
- 先加载{{message}}模板，再由模板渲染数据
v-if / v-for
v-if 指令：判断语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 页面</title>
</head>
<body>
<div id = "app">
<h1 v-if="message">yes</h1>
<h1 v-else>no</h1>
<h1 v-if="type==='A'">a</h1>
<h1 v-else-if="type==='B'">b</h1>
<h1 v-else-if="type==='C'">c</h1>
<h1 v-else>d</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:false,
type:'A'
}
})
</script>
</body>
</html>
v-for 指令：循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 页面</title>
</head>
<body>
<div id = "app">
<li v-for="(item,index) in type">
{{item.massage}}---{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
type:[
{massage: "第一条"},
{massage: "第二条"},
{massage: "第三条"}
]
}
})
</script>
</body>
</html>
事件处理
methods：所有的事件都在methods中
按钮绑定
<!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">点击有惊喜</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"Hallo,word"
},
<!--所有的事件都要绑定在methods中-->
methods:{
sayHi:function (event){
alert(this.message);
}
}
})
</script>
</body>
</html>
按钮双向绑定
v-model 指令： 双向绑定–一变百变即所有调用该数值的地方都变，只能用在表单操作。
view 层数据改变直接影响data数据层，data层属性值改变影响view层数值变化。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue 页面</title>
</head>
<body>
<div id="app">
<!--双向绑定-->
输入文本：<textarea v-model="massage"></textarea><!-- 文本域 -->
{{massage}}
<input type="text" v-model="massage"> <!-- 输入框 -->
<textarea >{{massage}}</textarea>
<p>
<input type="radio" name="sex" value="男" v-model="type"> 男
<input type="radio" name="sex" value="女" v-model="type"> 女
</p>
<p>
选中了：{{type}}
</p>
<!--下拉框操作-->
<select v-model="type">
<option value="null" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>
选中了：{{type}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
massage:"Hallo",
checked:true,
type:""
}
})
</script>
</body>
</html>
vue 组件
自定义标签：可复用的vue实例
练习内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 页面</title>
</head>
<body>
<div id = "app">
<!--组件-->
<lxx v-for="item in items" v-bind:li="item"></lxx>
<!--items:数据集合，item:遍历出来的单个数据，v-bind：动态绑定传递prop-->
<!--组件复用，template为一个函数，保证每次复用返回的是一个独立的对象，单个对象不影响其他对象数据-->
<lxx v-for="item in items" v-bind:li="item"></lxx>
<lxx v-for="item in items" v-bind:li="item"></lxx>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
<!--定义一个Vue组件-->
Vue.component("lxx",{
props:['li'],
template:'<li>{{li}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","c++","linux"]
}
})
</script>
</body>
</html>
Axios异步通信
Axios：实现ajax异步通信
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue 页面</title>
<!--手动解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id = "app" v-clock>
<!--提取显示元素-->
<div>{{info.name}}</div>
<div>{{info.page}}</div>
<div>{{info.address.class}}</div>
<!--绑定跳转链接-->
<a v-bind:href="info.url">点我</a>
</div>
<!--引入Java.js在线cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--引入Axios在线cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
info:{
class:null,
page:null,
url:null,
address:{
name:null,
page:null
}
}
}
},
<!--钩子函数-->
mounted(){
axios.get('data.json'). then(response=>(this.info=response.data));
}
})
</script>
</body>
</html>
计算属性
Vue特性！计算出来的结果保存在属性中，保存在内存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--调用方法必须使用（）调用-->
<p>{{currentTime1()}}</p>
<!--调用计算属性不需要（）-->
<p>{{currentTime2}}</p>
</div>
<!--引入Java.js在线cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--引入Axios在线cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message:"Hallo"
},
methods: {
currentTime1:function (){
return Date.now();
}
},
<!--computed 计算属性-->
<!--methods，computed方法名最好不要重名 methods优先级高-->
<!--调用methods方法时，每次都要重新计算，而如果不常用数据可以用内存缓存起来，节省系统开销，浏览器返回结果保存在内存中，只有其中出现增删改查时立刻刷新缓存数据重新计算（myBatis特性）从内存中调用，快！节省资源！-->
computed: {
currentTime2:function (){
this.message;
return Date.now();
}
}
})
</script>
</body>
</html>
插槽slot
插槽要写在组件里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<lxx>
<!--Vue注重视图层动态变化，所有数据都可操作-->
<lxx_title slot="lxx_title" :title="title"></lxx_title>
<lxx_items slot="lxx_items" v-for="item in lxxitems" :item="item"></lxx_items>
</lxx>
</div>
<!--引入Java.js在线cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--引入Axios在线cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
<!--整体模板 slot可理解为给插槽预留的插口-->
Vue.component("lxx",{
template:
'<div>\
<slot name="lxx_title"></slot>\
<ul>\
<slot name="lxx_items"></slot>\
</ul>\
</div>'
});
<!--插槽-->
Vue.component("lxx_title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("lxx_items",{
props: ['item'],
template:'<li>{{item}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
title:"emmmmmm",
lxxitems:['java','linux','c']
}
})
</script>
</body>
</html>
自定义事件内容分发
在前面slot基础上实现对遍历出来的数据手动删除，删除方法写在Vue实例模块中，删除按钮在组件中，不能由组件直接调用实例中的方法，需要使用自定义事件在视图层将事件及参数互相传递，达到视图层同时调用组件及实例中方法的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 页面</title>
</head>
<body>
<div id = "app">
<lxx>
<!--Vue注重视图层动态变化，所有数据都可操作-->
<lxx_title slot="lxx_title" :title="title"></lxx_title>
<!--key绑定组件中的index；v-on绑定两个删除事件；intem，v-bind绑定removeItems方法俩参数-->
<lxx_items slot="lxx_items" v-for="(item,index) in lxxitems"
:item="item" v-bind:index="index"
v-on:remove="removeItems(index)" :key="index"></lxx_items>
</lxx>
</div>
<!--引入Java.js在线cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!--引入Axios在线cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
<!--整体模板,slot可理解为给插槽预留的插口-->
Vue.component("lxx",{
template:
'<div>\
<slot name="lxx_title"></slot>\
<ul>\
<slot name="lxx_items"></slot>\
</ul>\
</div>'
});
<!--插槽-->
Vue.component("lxx_title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("lxx_items",{
props: ['item','index'],
template:'<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
methods: {
remove:function (index){
alert("想好了？")
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:"#app",
data:{
title:"emmmmmm",
lxxitems:['java','linux','c']
},
methods: {
<!--index 下标 -->
removeItems:function (index){
this.lxxitems.splice(index,1);
}
}
})
</script>
</body>
</html>
webpack
vue-router
页面跳转四大核心：
- main.js: 主函数级别！
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from "./router"
Vue.config.productionTip = flase;
new Vue({
el:'#app',
router,
compoent:{App},
template:'<App/>'
});
- App.vue : 主页面模板
<template>
<router-link to="./main"></router-link>
<router-link to="./content"></router-link>
<!--页面跳转展示区 跳转链接与展示区缺一不可-->
<router-view></router-view>
</template>
<script>
import Content from './components/Content'
import Main from './components/Main'
export default{
name :'App'
}
</script>
- index.js : 配置的路由
import { Router } from "express";
import Vue from "vue";
import VueRouter from "vue-router"
import Content from "../components/Content"
import Main from "../components/Main"
Vue.use(VueRouter);
export default new VueRouter({
routers:[
{
path:'./Content',
name:'content',
component: Content,
},
{
path:'./Main',
name:'main',
component: Main
}
]
})
- compontents ：组件
<template>
<h1>首页</h1>
</template>
<script>
export default{
name:"Main"
}
</script>
<template>
<h1>内容页</h1>
</template>
<script>
export default{
name:"Content"
}
</script>
Element ui
略
|