版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44190665/article/details/121043585
我是看这位博主的文章 记录一下自己的实践过程
为了加深一些印象 防止犯困 我也跟着打打字
前端基础
1、ES6 基础
1、let & const
快捷键:!+ Enter 生成模板
let 声明后不能作用于{ } 外, var 可以
let 只能声明一次, var可以声明多次
var 会变量提升(使用在定义之前), let必须先定义 再使用
const一旦初始化后,不能改变
2、解构表达式
数组解构 let arr = [1, 2, 3]; let [a, b, c] = arr
对象解构 const{name: abc, age, language} = person 其中 name: abc 代表把name改名为abc
字符串函数 str.startsWith(); str.ensWith(); str.includes(); str.includes()
字符串模板,`` 支持一个字符串定义为多行
占位符功能 ${}
3、函数优化
支持函数形参默认值 function add(a, b = 1){}
支持不定参数 function fun(...values){}
支持箭头函数 var print = obj => console.log(obj);
支持箭头函数 + 解构函数 var hello2 = ({name}) => console.log("hello," + name);
hello2(person);
4、对象优化
可以获取map的键值对 Object.keys()、Object.values、Object.entries
Object.assgn(target, source1, source2) 合并source1, source2 到target
支持对象名声明简写:如果属性名和属性值的变量名相同可以省略
let someone = {...person} 取出person对象所有的属性拷贝到当前对象
5、map 和 reduce
arr.map() 接收一个函数,将arr中的所有元素用接收到的函数处理好后放入新的数组
arr.reduce() 为数组中的每一个元素依次执行回调函数, 不包括数组中被删除或从未被赋值的元素。
6、promise
优化异步操作。封装ajax
把Ajax 封装到Promis中,赋值为let p
在Ajax中成功使用resolve(data), 失败使用reject(err)
p.then().catch()
7、模块化
export 用于规定模块的对外接口,export 不仅可以导出对象,一切JS变量都可以导出。比如:
基本类型变量、函数、数组、对象
import 用于导入其他模块提供的功能
2、Vue 基础
MVVM思想
M: model 包括数据和一些基本操作
V: view 视图, 页面渲染结果
VM : View-model , 模型与视图间的双向操作(无需开发人员干涉)
视图和数据通过VM绑定起来 model里有变化会自动地通过Directives 填写到视图view中, 视图表单中添加了内容也会自动地通过DOM Listeners 保存到模型中。
官方文档:https://cn.vuejs.org/v2/guide/
1、Vue安装
给当前项目安装vue
npm init -y
npm install vue
引入vue
<script src="./node_modules/vue/dist/vue.js"></script>
2、 v-model, v-on
new VUE
v-model 双向绑定
v-on 绑定事件
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<!-- v-model实现双向绑定。此处代表输入框和vue里的data绑定 -->
<button v-on:click="num++">点赞</button>
<!-- v-on:click绑定事件,实现自增。 -->
<button v-on:click="cancel">取消</button>
<!-- 回调自定义的方法。 此时字符串里代表的函数 -->
<h1> {{name}} ,非常帅,有{{num}}个人为他点赞{{hello()}}</h1>
<!-- 先从vue中拿到值填充到dom,input再改变num值,vue实例更新,然后此处也更新 -->
</div>
<!-- 导入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({ //生成vue对象
el: "#app",//绑定元素 div id="app" // 可以指定恰标签,但是不可以指定body标签
data: { //封装数据
name: "张三", // 也可以使用{} //表单中可以取出
num: 1
},
methods:{ //封装方法
cancel(){
this.num -- ;
},
hello(){
return "1"
}
}
});
// 还可以在html控制台vm.name
//2、双向绑定,模型变化,视图变化。反之亦然。
//3、事件处理
//v-xx:指令
//1、创建vue实例,关联页面的模板,将自己的数据(data)渲染到关联的模板,响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>
</body>
</html>
3、v-text、v-html、v-ref
4、单向绑定v-bind:
花括号只能写在标签体内(<div 标签内> 标签体 </div>
),不能用在标签内。
插值表达式只能用在标签体里,如果我们这么用<a href="{{}}">
是不起作用的,所以要用v-bind
跳转页面<a v-bind:href="link">跳转</a>
用v-bind:
,简写为:
。表示把model绑定到view。可以设置src、title、class等
5、双向绑定v-model
6、v-on事件
7、v-for 遍历
- 可以遍历 数组[] 字典{} 。对于字典
<li v-for="(value, key, index) in object">
- 遍历的时候都加上:key来区分不同数据,提高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>Document</title> </head> <body> <div id="app"> <ul> <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'"> <!-- 1、显示user信息:v-for="item in items" --> 当前索引:{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br> <!-- 2、获取数组下标:v-for="(item,index) in items" --> <!-- 3、遍历对象: v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object" --> 对象信息: <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}};</span> <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 --> </li> </ul> <ul> <li v-for="(num,index) in nums" :key="index"></li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { users: [ { name: '柳岩', gender: '女', age: 21 }, { name: '张三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '刘亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 } ], nums: [1,2,3,4,4] }, }) </script> </body> </html>
8、v-if和v-show
-
在vue实例的data指定一个bool变量,然后v-show赋值即可。show里的字符串也可以比较
-
if是根据表达式的真假,切换元素的显示和隐藏(操作dom元素)
-
区别:show的标签F12一直都在,if的标签会移除,
-
if操作dom树对性能消耗大
9、v-else和v-else-if
10、计算属性和监听器
计算属性computed:属性不是具体值,而是通过一个函数计算出来的,随时变化
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
监听watch:监听属性 watch,我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器:
<!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>
<div id="app">
<!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 -->
<ul>
<li>西游记; 价格:{{xyjPrice}},数量:<input type="number" v-model="xyjNum"> </li>
<li>水浒传; 价格:{{shzPrice}},数量:<input type="number" v-model="shzNum"> </li>
<li>总价:{{totalPrice}}</li>
{{msg}}
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//watch可以让我们监控一个值的变化。从而做出相应的反应。
new Vue({
el: "#app",
data: {
xyjPrice: 99.98,
shzPrice: 98.00,
xyjNum: 1,
shzNum: 1,
msg: ""
},
computed: {
totalPrice(){
return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
}
},
watch: {
xyjNum: function(newVal,oldVal){
if(newVal>=3){
this.msg = "库存超出限制";
this.xyjNum = 3
}else{
this.msg = "";
}
}
},
})
</script>
</body>
</html>
11、过滤器filter
过滤器filter:定义filter组件后,管道符后面跟具体过滤器{{user.gender | gFilter}}
<!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>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 -->
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 全局过滤器
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
},
filters: { // 局部过滤器,只可以在当前vue实例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
</body>
</html>
12、组件化
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同分拆分成立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
在vue里,所有的vue实例都是组件
组件其实也是一个vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定(所以不写el),否则就无法复用了,因此没有el属性。
但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
data必须是一个函数,不再是一个对象。
全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了
<!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">
</head>
<body>
<div id="app">
<button v-on:click="count++">我被点击了 {{count}} 次</button>
每个对象都是独立统计的
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件 // counter标签,代表button
// 把页面中<counter>标签替换为指定的template,而template中的数据用data填充
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {// 如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例:
return {
count: 1 // 数据
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: { // 局部声明的组件
'button-counter': buttonCounter
}
})
</script>
</body>
</html>
13、生命周期和钩子函数
每个vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板、渲染模板等等。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>Document</title>
</head>
<body>
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞!</button>
<h2>{{name}},有{{num}}个人点赞</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
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);
}
});
</script>
</body>
</html>
3. vue-dome
1、全局安装webpack
npm install webpack -g
2、全局安装vue脚手架
npm install -g @vue/cli-init
3、初始化vue项目
在工程文件夹下cmd,输入以下命令初始化vue项目appname为想要起的工程名
vue init webpack appname
如果一直卡在downloading template,配置淘宝镜像
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
初始化成功,运行项目
cd vue-dome
npm run dev
启动成功。
4、vue项目目录结构
5、修改vue项目
1、index.html
其中只有一个div
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
2、main.js
new Vue绑定div
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, //采用router路由
components: { App },//绑定App组件
template: '<App/>'
})
3、App.vue
首先显示一张图片,图片路径为"./assets/logo.png
其中的<router-view/>
是根据url要决定访问的vue,在main.js中提及了使用的是./router
规则
4、router/index.js
routes表示路由规则
当访问/
时, 显示组件Helloword
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
实现点击Hello,显示自己创建的Hello组件
创建hello.vue组件
<template>
<div>
<h1>你好,hello,{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
name: "张三"
}
}
}
</script>
<style>
</style>
编写路由,修改/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/hello' //导入自定义的组件
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
//新增路由
{
path: '/hello',
name: "Hello",
component: Hello
}
]
})
修改App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link to="/hello">去hello</router-link> <!--新增去hello-->
<router-link to="/">去首页</router-link><!--新增去首页-->
<router-view/>
</div>
</template>
运行测试效果
6、快速生成组件模板
1、文件->首选项->用户代码 新建全局代码片段
2、把下面代码粘贴进去
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "生成vue模板"
}
}
在创建组件时直接输入vue
点击回车就可生成模板
4、ElementUI
官方文档:https://element.eleme.cn/#/zh-CN/component/installation
安装
npm install element-ui
在main.js下引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
然后就可以使用elementui之中的组件。