文章目录
Vue
1、 第一个Vue程序
idea安装vue插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
{{message}}
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: 'hello vue!'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">鼠标悬浮几秒钟查看此处动态绑定的提示信息！</span>
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: 'hello vue!'
}
})
</script>
</body>
</html>
2、基础语法
if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else="type==='C'">C</h1>
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: 'hello vue!',
type: 'A'
}
})
</script>
</body>
</html>
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<p style='color:blue' v-for="item in items">{{item.message}}</p>
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: 'hello vue!',
type: 'A',
items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
}
})
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: 'hello vue!',
type: 'A',
items: [{message: '小范'},{message: '小梁'},{message: '小红'}]
},
methods: {
sayHi: function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<input type="text" v-model="message"/> {{message}}
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<select v-model="selected">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
{{selected}}
</div>
<script>
'use strict'
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
selected: ""
}
})
</script>
</body>
</html>
3、vue组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<xiaofan v-for="item in items" v-bind:xf="item"></xiaofan>
</div>
<script>
'use strict'
Vue.component("xiaofan", {
// 给组件传递数据需要用props
props: ['xf'],
template: '<h1>{{xf}}</h1>'
})
/*Model 数据*/
let vue = new Vue({
el: "#app",
data: {
items: ['java', 'linux', 'python']
}
})
</script>
</body>
</html>
4、网络通信Axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.hobbies}}</div>
</div>
<script type="text/javascript">
'use strict'
let vue = new Vue({
el: '#vue',
// data: {info: {name: "sss"}},
data() {
return {
//请求的返回参数合适，必须和json字符串一样，但可以省略不需要的
info: {
name: null,
age: 0,
hobbies: []
}
}
},
mounted() { // 钩子函数 链式编程
axios.get('../data.json').then(response=>(this.info=response.data))
// axios.get("../data.json").then(response=>(console.log(response.data)))
}
})
</script>
</body>
</html>
参考链接： https://blog.csdn.net/qq_40359381/article/details/106853936
5、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
<p>currentTime1 {{currentTime1()}}</p>
<p>currentTime2 {{currentTime2}}</p>
</div>
<script type="text/javascript">
'use strict'
let vue = new Vue({
el: '#vue',
data: {
message: "xiaofan"
},
methods: {
currentTime1: function () {
return Date.now();
}
},
computed: { //计算属性methods computed的方法名不要重名字，对于不经常变化的内容可以通过这种方式进行缓存，更优
currentTime2: function () {
console.log(this.message);
return Date.now();
}
}
})
</script>
</body>
</html>
6、插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
</todo>
</div>
<script type="text/javascript">
'use strict'
Vue.component("todo-title", {
props: ["title"],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ["item"],
template: '<li>{{item}}</li>'
});
// slot插槽
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
let vue = new Vue({
el: '#vue',
data: {
title: "秦老师",
todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
}
})
</script>
</body>
</html>
7、自定义事件内容分发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="vue">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoitems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
</todo>
</div>
<script type="text/javascript">
'use strict'
Vue.component("todo-title", {
props: ["title"],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
props: ["item","index"],
template: '<li>{{item}}<button v-on:click="remove">删除</button></li>',
// 只能绑定当前组件的方法
methods: {
remove: function (index) {
// 自定义事件分发 $emit(自定义事件名， 下标)
this.$emit('remove', index)
}
}
});
// slot插槽
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
let vue = new Vue({
el: '#vue',
data: {
title: "秦老师",
todoitems: ["狂神说Java", "狂神说Linux", "狂神说Vue", "狂神说Linux", "狂神说Vue"]
},
methods: {
removeItem: function (index) {
this.todoitems.splice(index, 1)
}
}
})
</script>
</body>
</html>
8、 第一个vue-cli项目
-
安装Nodejs
-
node -v
-
npm -v
-
安装Node.js淘宝镜像加速器（cnpm）npm install cnpm -g
-
安装vue-cli cnpm install vue-cli -g
-
测试是否安装成功
-
查看可以寄语那些模板创建vue应用vue list
- 创建项目vue init webpack myvue
-
初始化并运行
cd myvue npm install npm run dev
9、webpack打包
安装并测试
npm install webpack -g
npm install webpack-cli -g
webpack -v
webpack-cli -v
10、vue-router路由
-
在当前项目安装 npm install vue-router --save-dev
-
源码地址：vue-04-router
11、vue+elementUI
创建工程 hello-vue vue init webpack hello-vue
-
安装依赖
-
进入工程目录
cd hello-vue- 安装
vue-routernpm install vue-router --save-dev - 安装
element-ui npm i element-ui -S - 安装依赖
npm install - 安装SASS加载器
cnpm install sass-loader node-sass --save-dev - 启动测试
npm run dev
- 安装
- 注意sass-loader的版本
- 整体效果
12、路由嵌套
import Vue from 'vue'
import VueRouter from "vue-router"
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/main',
component: Main,
children: [ // 嵌套路由
{path: '/user/profile', component: UserProfile},
{path: '/user/list', component: UserList},
{path: '/user/telephone', component: Telephone}
]
},
{
path: '/login',
component: Login
}
]
})
13、参数传递及重定向
方式1
// 传递
<!--name-传组件名 params传递参数，需要对象： v-bind-->
<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
// 接收
import Vue from 'vue'
import VueRouter from "vue-router"
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/main',
component: Main,
children: [ // 嵌套路由
{path: '/user/profile:id', name: 'UserProfile', component: UserProfile},
{path: '/user/list', component: UserList},
{path: '/user/telephone', component: Telephone}
]
},
{
path: '/login',
component: Login
}
]
})
// 展示
<template>
<div>
<h1>个人信息</h1>
{{$route.params.id}}
</div>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
方式2
// 设置props
import Vue from 'vue'
import VueRouter from "vue-router"
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/main',
component: Main,
children: [ // 嵌套路由
{path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
{path: '/user/list', component: UserList},
{path: '/user/telephone', component: Telephone}
]
},
{
path: '/login',
component: Login
}
]
})
// 绑定id
<template>
<div>
<h1>个人信息</h1>
{{$route.params.id}}<br/>
{{id}}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
重定向
import Vue from 'vue'
import VueRouter from "vue-router"
import Main from '../views/Main'
import Login from '../views/Login'
import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'
import Telephone from '../views/user/Telephone'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/main',
component: Main,
children: [ // 嵌套路由
{path: '/user/profile:id', name: 'UserProfile', component: UserProfile, props: true},
{path: '/user/list', component: UserList},
{path: '/user/telephone', component: Telephone}
]
},
{
path: '/login',
component: Login
},
{
path: '/goHome',
redirect: '/main'
}
]
})
14、路由模式和404
export default new VueRouter({
mode: 'history', // 不带#
})
路由钩子
<template>
<div>
<h1>个人信息</h1>
{{$route.params.id}}<br/>
{{id}}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile",
beforeRouteEnter: (to, from, next)=>{
console.log("进入钩子之前");
next(vm => {
vm.getData(); // 进入路由之前，执行我们自定义的getData方法
});
},
beforeRouteLeave: (to, from, next)=>{
console.log("离开钩子之前")
next();
},
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/data.json'
}).then(function (response) {
console.log(response)
});
}
}
}
</script>
<style scoped>
</style>
npm install --save axios vue-axios
15、Vue的生命周期
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
