Vue学习笔记-基础至整合Element-UI
ECMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如Javascript则是规范的具体实现.
VSCode快捷键
- Alt + Shift + F 代码整理
- Ctrl + ` 终端
- 左栏直接 全局搜索
ES6
经常使用Let、Const
- Let 1. 作用域在所处的大括号中 2. 不可声明多次 3.不存在变量提升
- var 1. 全局作用域 2. 一个变量可声明多次 3. var会变量提升未定义undefined
- const 1. 声明之后不允许改变 2. 一旦声明必须切始化
//解构表达式 ，数组直接赋值a，b，c
let arr =[1，2，3]
let [a，b，c] = arr
<!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>
<script>
//解构表达式
let arr = [1, 2, 3]
let [a, b, c] = arr
//对象结构
const person = {
name: "刘邦",
age: 21,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language)
let str = "hhgdaa";
//字符串扩展 API
//str.startsWith,endsWith,includes,
//字符串模板
let ss = ` ahgjdhasdjkf ${name} jfkdsajf ${age} 此模板中也可 `
console.log(ss);
var print = function(obj){
console.log(obj);
}
//箭头函数优化
var print2 = obj =>console.log(obj);
print2("宋康")
var sum = (a,b)=>(a+b)
var sum3 = (a,b)=>{
c = a+b
return c+a
}
console.log(sum(1,2));
console.log(sum3(1,2));
//箭头函数+解构
var hello2= ({name}) => console.log("箭头函数+解构"+name);
hello2(person);
//对象优化
// Object.assign()
console.log(Object.keys(person))
console.log(Object.values(person))
console.log(Object.entries(person))
//对象的函数属性简写
let person3 ={
name:"song",
eat:function(food){console.log(food); },
eat2:food => console.log(food), //箭头函数中不能使用this
eat3(food){ console.log(food); }
}
//深拷贝 ...
let p1 = {name:"kkk",age:18}
let s1 = {...p1}
console.log(s1);
//ES6 import 导入的文件必须指定好了导出 export
//import abc from './xxx.js' 前面的名字要对应另一个文件中导出指定的名字 export{abc}
//export default { sum(a,b){ return a+b } } 此种不需指定
</script>
</body>
</html>
1. Vue安装
npm init -t //初始化项目 生成package.json代表npm来管理的项目
npm install vue //如果报错 修改package.json中的name字段的值 和正在安装的名不同
上如果出现的报错类型用上结局方法：
npm ERR! Refusing to install package with name “vue“ under a package
组件化概念
不同页面就可以共享这些组件，避免重复开发。
2. 安装webpack
npm install webpack -g
3.安装vue脚手架
npm install -g @vue/cli-init
4. 初始化vue项目
vue init webpack appname //vue脚手架 使用webpack模板 初始化一个appname项目
遇到的错误:
无法加载文件 C:\Users…\AppData\Roaming\npm\vue.ps1
因为在此系统禁止运行脚本
#命令行输入
set-ExecutionPolicy RemoteSigned
运行npm run dev
.Vue文件三大要素
<template>
<javascript>
<style>
<router-link to="/hello">我的Vue页面</router-link>` //需要路由.js中配合
<router-view> //动态视图，路由一变 视图会动态改变此区域，部分改变页面使用
<!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>
<id id="app">
{{msg}}
<input type="text" v-model="num">
<button v-on:click="num++">num++</button>
<button v-on:click="cancle">num--</button>
<p>{{name}}年龄 {{num}}</p>
{{msg}}
<a v-bind:href="link">baidu</a>
<span v-bind:class="{active: isActive}" v-bind:style="{color:color1}">span</span>
<br><input type="checkbox" v-model="language" value="java">java<br>
<input type="checkbox" v-model="language" value="sql">sql<br>
<input type="checkbox" v-model="language" value="vue">vue<br>
{{language.join(",")}}
<p>总价: {{totalPrice}}</p>
<!-- //过滤器 -->
<p>性别{{ person.gender | genderFilter }}</p>
<p>性别{{ person.gender | gFilter }}</p>
<!-- //组件复用 -->
<button v-on:click="num++">点击了{{num}}次</button>
<counter></counter>
<counter></counter>
<counter></counter>
<br>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//全局过滤器 要放最上面
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男"
} else {
return "女"
}
})
//全局声明一个组件
Vue.component("counter", {
template: `<button v-on:click="num++">点击了{{num}}次</button>`,
data() { //data必须是一个函数，不能是一个对象，保独立
return { //可以使每一个方法都有独立的num
num: 1
}
}
})
//局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="num++">点击了{{num}}次</button>`,
data() {
return {
num: 1
}
}
}
//数据绑定
let vm = new Vue({
el: "#app", //绑定元素
data: {
name: "嬴政",
num: 29,
msg: "jjjjjj",
link: "https://www.baidu.com",
color1: "red",
isActive: true,
language: [],
person: { gender: 1 }
}, //封装数据
methods: { //封装方法
cancle() {
this.num--;
}
},
computed: { //计算属性
totalPrice() {
//只要动态绑定的数据发生了变化就会触发计算
}
},
watch: { //监听器
num(newVal, oldVal) {
if (newVal > 30) {
this.msg = "年龄超出限制"
this.num = 30
}
if (newVal < 30) {
this.msg = ""
}
}
},
filters: { //过滤器
genderFilter(val) {
if (val == 1) {
return "男"
} else {
return "女"
}
}
},
components: {
'button-counter': buttonCounter
},
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);
}
})
//v-model= 绑定数据 双向绑定
///v-on:click= 绑定事件 @click="" @为简写符号 @click.stop="" 阻止冒泡
//v-test= v-html=
//v-bind:属性名= 单向绑定 :只写：为简写
//按键修饰符： @keyup.up="num++" @keyup.down="num--"
//<li>v-for="{user,index} in users"> {{user}} //index为当前元素的索引 可遍历数组也可遍历map
//<li>v-for="{k，v,i} in users"> {{k,v,i}} //遍历map
//v-if v-else-if //为直接不显示 v-show //为dom隐藏，但代码还有
//计算属性 computed，监听器watch，过滤器filters | 为管道符
</script>
</body>
</html>
Vue生命周期图
5. Element-ui
npm i element-ui //安装Element-ui
# main中导入Element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
router-view 动态视图，路由一变 视图会动态改变此区域
整合Element-UI过程
- 官网复制布局代码，到App.vue
- 抽取其中 <el-main 标签中 内容 成一个独立的Vue组件，此控制的是显示的具体页面内容
<router-view 标签替换 - 配置路由 router/index.js中添加此标签的路由管理
- 查看Element官方文档 <el- menu 标签添加router=“true”属性
- <el-menu-item index="/table" index中控制跳转路由
扫一扫
5398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
