1. css
2. JavaScript
2.1. 调试
// 在浏览器的控制台打印变量
console.log(num);
2.2. 数据类型
Number
// js不区分小数和整数 Number
123 // 整数
123.1 // 浮点数
1.123e3 // 科学计数法
-99 // 负数
NAN // not a number
Infinity // 无限大
字符串
'abc'
"abc"
// 转义字符
\t
\n
\u4e2d // \u#### Unicode字符
\x41 // Ascll字符
// 多行字符串
let msg = `我爱你,
中国!`
// 模板字符串(必须在多行字符串的引号里面)
<script>
'use strict'
let name = "张三"
let msg = `你好呀, ${name}`
console.log(msg)
</script>
布尔值
true
false
逻辑运算
&& || !
比较运算符
= // 赋值
== // 等于(类型不一样,值一样,也会判断为true)
=== // 绝对等于(类型一样,值一样, 结果true)
NaN === NaN // false
isNaN(NaN) // true
null 和 undefined
null // 空
undefined // 未定义
数组
let arr = [1,2,'a', "hello", null, true] // 数组越界之后 就是 undefined
arr.length // 数组长度
arr.indexOf(2) // 下标索引
arr.slice() // 切片
arr.push() // 压入到尾部
arr.pop() // 弹出尾部的一个元素
arr.shift() // 压入到头部
arr.unshift() // 弹出头部的一个元素
arr.sort() // 排序
arr.join() // 使用特定的字符拼接数组成字符串
arr.concat() // 拼接数组
...
对象
JavaScript中的所有的键都是字符串,值是任意对象!
var person = {
name: "xiaofan",
age: 3,
tags: ['js', 'java','web', '...']
}
// 对象赋值
person.sex = 'nv'
// 使用不存在的对象属性
person.hobby
undefined
// 动态删减属性
delete person.name
// 动态添加属性
person.info = 'info';
// 判断属性值是否在这个对象中 'xxx' in xxx!
'age' in person (person.hasOwnProperty('age'))
2.3. 严格检查模式
2.4. 流程控制
let arr = [100, 200, 'a', 'b', true]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
console.log("============")
for (let i in arr) {
console.log(arr[i])
}
console.log("============")
for (let arrElement of arr) {
console.log(arrElement)
}
console.log("============")
arr.forEach(function (e){
console.log(e)
})
2.5. Map 和 Set
<script>
"use strict"
let map = new Map([['tom', 1000],['jack', 999],['Bob', 888]])
let score = map.get('tom')
console.log(score)
map.set('admin', 123456)
map.delete("tom")
let set = new Set([1,2,3,4,5])
set.delete(1)
console.log(set.has(3))
console.log("======")
for (let number of set) {
console.log(number)
}
</script>
- 注意: 遍历arr的时候 for … in 和for… of 的区别
2.6. 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义方式1
function f1(x) {
console.log(typeof x)
if (x >= 0) {
return x
} else {
return -x
}
}
// 定义方式2
// typeof 检测变量的类型
let f2 = function (x) {
// 手动抛出异常
if (typeof x !== "number") {
throw "Not a num!"
}
if (x >= 0) {
return x
} else {
return -x
}
};
// arguments 获得所有参数
function f3(x) {
console.log(x)
console.log(typeof x)
console.log("=====")
console.log(arguments)
}
// ...rest 标识, 获取剩余的参数
function f4(x, ...rest1) {
console.log(x)
console.log(typeof x)
console.log("=====")
console.log(rest1)
}
</script>
</head>
<body>
</body>
</html>
2.7. 变量的作用域
JQuery. ===> $()
2.8. 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
// 方法1
let xf1 = {
name: '小范',
birth: 1991,
// 方法
age: function () {
let now = new Date().getFullYear();
// this 指向调用它的对象
return now - this.birth;
}
}
// 方法2
function getAge() {
let now = new Date().getFullYear();
// this 指向调用它的对象
return now - this.birth;
}
let xf2 = {
name: '小范儿',
birth: 2000,
age: getAge
}
// xf2.age() ok
// getAge() error
// apply 改变了getAge方法中this的指向
let result1 = getAge.apply(xf1, []);
let result2 = getAge.apply(xf2, []);
console.log(result1, result2)
</script>
</head>
<body>
</body>
</html>
2.9. 内部对象
// 标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
2.9.1. Date
// Date
<script>
let now = new Date();
now.getFullYear();
now.getMonth(); // 0~11月
now.getDate(); // 日
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime(); // 获取时间戳
now.toLocaleString()
now.toUTCString()
</script>
2.9.2. JSON
<script>
'use strict'
let user = {
name: "xiaofan",
age: 3,
set: '男'
}
// 对象转化为json字符串
let jsonUser = JSON.stringify(user);
// Json字符串转换成对象
let userBean = JSON.parse('{"name":"xiaofaner","age":28,"set":"男"}');
</script>
2.9.3. Ajax
- 原生的js写法, xhr异步请求
- jQuery封装好的 方法 $("#name").ajax("")
- axios 请求
2.10 面向对象编程
- 面向对象原型继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
let student = {
name: "qinjiang",
age: 3,
run: function () {
console.log(this.name + " run...")
}
};
let xf = {
name: "xiaofan"
}
// xf 的原型对象是 student
xf.__proto__ = student
// 给ss新增加一个方法
function ss(name) {
this.name = name;
}
ss.prototype.hello = function () {
alert("hello")
}
</script>
</head>
<body>
</body>
</html>
- 面向类继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello student..');
}
}
class SmallStudent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert("我是个小学生..");
}
}
let student = new Student("xiaofan")
let smallStudent = new SmallStudent("xiaofaner", 22)
</script>
</head>
<body>
</body>
</html>
本质:还是原型
2.11. 操作BOM对象
BOM(Browser Object Model): 浏览器对象模型
window 浏览器窗口
navigator 封装了浏览器信息
screen 屏幕尺寸
location 代表当前页面的URL信息
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
reload() //重新加载网页
location.assign('https://jd.com') // 设置新的地址
document 代表当前的页面
history
history.back() // 后退
history.forward() // 前进
2.12. 操作DOM对象(核心)
-
DOM: 文档对象模型
-
获得节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let h1 = document.getElementsByTagName("h1");
let p1 = document.getElementById("p1");
let p2 = document.getElementsByClassName("p2");
let father = document.getElementById("father");
let children = father.children // 获取父节点下的所有子节点
father.lastChild
father.firstChild
</script>
</body>
</html>
- 更新节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1"></div>
<script>
let div = document.getElementById("id1")
// 操作文本
div.innerText = "123";
div.innerHTML = "<strong>123</strong>"
// 操作JS
div.style.color='red'
div.style.fontSize='22px'
div.style.padding='2em'
</script>
</body>
</html>
- 删除结点
- 插入结点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
// 追加节点
// list.appendChild(js)
let newP = document.createElement('p');
newP.id='newP';
newP.innerText = 'Hello xiaofan!';
list.appendChild(newP)
// 设置背景色
let body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = "#ff00f0"
// 把一个新节点插入到一个结点的前面
let ee = document.getElementById("ee");
list.insertBefore(js, ee);
</script>
</body>
</html>
2.13. 操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post">
<p>
<span>用户名:</span><input type="text" id="username"/>
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="1" id="boy" checked /> 男
<input type="radio" name="sex" value="2" id="girl" /> 女
</p>
</form>
<script>
let input_text = document.getElementById("username");
let boy = document.getElementById("boy");
let girl = document.getElementById("girl");
console.log(boy.checked);
boy.checked = true
</script>
</body>
</html>
- 隐藏域表单提交验证,对密码进行加密
// md5远程库 https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--md5工具类-->
<script src="myMd5.js"></script>
</head>
<body>
<form method="post" onsubmit="return check();">
<p>
<span>用户名:</span><input type="text" id="username" name="username"/>
</p>
<p>
<span>密 码:</span><input type="password" id="input-password"/>
</p>
<input type="hidden" id="md5-password" name="password"/>
<input type="submit">
</form>
<script>
function check() {
let name = document.getElementById("username");
let inputPwd = document.getElementById("input-password");
let md5Pwd = document.getElementById("md5-password");
// password.value = md5(password.value)
md5Pwd.value = md5(inputPwd.value);
console.log(name.value)
console.log(inputPwd.value)
console.log(md5Pwd.value)
return false
}
</script>
</body>
</html>
注意:
1.可以把远程库拷贝到本来!
2.onsubmit绑定一个提交检测的函数,当这个函数返回false时,form表单请求会被拦截,当这个函数返回true时,正常提交表单
3. JQuery
3.1. 第一个Jquery程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<script>
// 公式 $(选择器).action(方法)
$("#test-jquery").click(function () {
alert("hello jquery!")
})
</script>
</body>
</html>
3.2. 选择器
3.3. 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动看看
</div>
<script>
$("#divMove").mousemove(function (e) {
$("#mouseMove").text(`x: ${e.pageX}, y: ${e.pageY}`)
})
</script>
</body>
</html>
3.4. JQuery 操作DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
// 获取值
let text1 = $("#test-ul li[name=python]").text();
let text2 = $("#test-ul li[class=js]").text();
console.log(text1)
console.log(text2)
// 设置值
$("#test-ul li[class=js]").text("JS");
// 设置css样式
$("#test-ul li[name=python]").css({ "color": "#ff0011", "background": "blue" })
// 元素的显示和隐藏
$("#test-ul li[name=python]").show()
$("#test-ul li[name=python]").hide()
// 更多查看文档
// https://jquery.cuishifeng.cn/
</script>
</body>
</html>
- 源码之家
- Element UI
- Ant Design
- Bootstrap
3.5. Ajax
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
- Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- jQuery 不是生产者,而是大自然搬运工。
- jQuery Ajax本质就是 XMLHttpRequest,对他进行了封装,方便调用!
3.5.1. 伪造Ajax
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>xiaofan</title>
</head>
<body>
<script type="text/javascript">
'use strict'
window.onload = function(){
let myDate = new Date();
document.getElementById('currentTime').innerText = myDate.toLocaleString()
};
function LoadPage(){
let targetUrl = document.getElementById('url').value;
console.log(targetUrl);
document.getElementById("iframePosition").src = targetUrl;
}
</script>
<div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input id="url" type="text" value="https://www.baidu.com/"/>
<input type="button" value="提交" onclick="LoadPage()">
</p>
</div>
<div>
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>
3.5.2. Ajax格式
jQuery.ajax(...)
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端可接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
4. Vue
4.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>
4.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>
4.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.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
4.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>
4.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>
4.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>
4.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应用
- 创建项目
vue init webpack myvue
- 初始化并运行
cd myvue
npm install
npm run dev
4.9. webpack打包
- 安装并测试
npm install webpack -g
npm install webpack-cli -g
webpack -v
webpack-cli -v
4.10 vue-router路由
-
在当前项目安装 npm install vue-router --save-dev
4.11 vue+elementUI
-
创建工程 hello-vue
vue init webpack hello-vue
-
安装依赖
- 进入工程目录
cd hello-vue
- 安装vue-router
npm 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的版本
- 项目github地址
- 整体效果
4.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
}
]
})
4.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'
}
]
})
4.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>
- 安装axios
cnpm install axios -s
- 安装vue-axios
npm install --save vue-axios