一、前端基础知识
1、字符串相关
<!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>Document</title>
</head>
<body>
<script>
// 数组解构
// let arr = [1,2,3];
// // let a = arr[0];
// // let b = arr[1];
// // let c = arr[2];
// let [a,b,c] = arr;
// console.log(a,b,c) // 1,2,3
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 对象解构
const { name: abc, age, language } = person;
console.log(abc, age, language) // jack,21,['java', 'js', 'css']
// 字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello"));// 是否以hello开始:true
console.log(str.endsWith(".vue"));// 是否以.vue结尾:true
console.log(str.includes("e"));// 是否包含e:true
console.log(str.includes("hello"));// 是否包含hello:true
// 字符串模板,多行字符串 ``
let ss = `<div>
<span>hello world<span>
</div>`
console.log(ss); // 这里的字符串是什么样就打印什么样的,空格也算
// 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
function fun() {
return "这是一个函数"
}
let info = `我是${abc},今年${age + 10}了, 我想说: ${fun()};`
console.log(info); // 我是jack,今年31了, 我想说: 这是一个函数
</script>
</body>
</html>
{name}这是解构,你传给我person,我自动给你解构打印name
只能用
reduce
浏览器默认禁止跨域请求解决办法
报错情况是 has been blocked by CORS policy
npm init -y 初始化
代表用npm来管理得
npm install vue@2 这就有了vue得环境,有了这个 文件夹
记得下载2这个版本
vue强大之处在于双向奔赴
页面动态数据变化想到vue
事件是v-on比如点击按钮
v-model 双向绑定 与表单进行实时绑定,让表单得值实时获取到
v-text 将数据填充到标签中
v-on 单击事件,当用户需要点击,按下键盘,滚动鼠标等操作时,想要添加一些自己的逻辑处理时,就可以为特定的元素绑定一些特定的事件。
v-html 内容中有html结构会被解析为标签
内容中有html结构会被解析为标签
v-bind 什么时候出现,什么时候不出现
v-for 对象数组遍历
过滤器和监听器
局部过滤器,全局过滤器
组件
Vue.compont
全局声明一个组件
局部声明一个组件
生命周期钩子函数
一个对象从创建到销毁的过程
动态的数据显示在页面有一个过程,页面渲染也是需要一个过程
首先是显示{{num}}
等挂载完成html才显示出具体的数字
创建前:没有加载,也没有渲染
创建后:数据加载了但是没渲染
挂载前:页面加载了但是没渲染
挂载后:页面渲染了
beforeCreate() {
console.log("=========beforeCreate=============");
console.log("数据模型未加载:" + this.name, this.num);
console.log("方法未加载:" + this.show());
console.log("html模板未加载:" + document.getElementById("num"));
},
created: function () {
console.log("=========created=============");
console.log("数据模型已加载:" + this.name, this.num);
console.log("方法已加载:" + this.show());
console.log("html模板已加载:" + document.getElementById("num"));
console.log("html模板未渲染:" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=========beforeMount=============");
console.log("html模板未渲染:" + document.getElementById("num").innerText);
},
mounted() {
console.log("=========mounted=============");
console.log("html模板已渲染:" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=========beforeUpdate=============");
console.log("数据模型已更新:" + this.num);
console.log("html模板未更新:" + document.getElementById("num").innerText);
},
updated() {
console.log("=========updated=============");
console.log("数据模型已更新:" + this.num);
console.log("html模板已更新:" + document.getElementById("num").innerText);
vue脚手架工程
组件complates三要素
template script style
main.js
main.js 程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.
App.vue
App.vue是项目的主组件,页面入口文件 ,所有页面都在App.vue下进行切换,app.vue负责构建定义及页面组件归集
router
router里的index.js 把准备好路由组件注册到路由里: