本文介绍了谷粒商城前端开发的基础，涵盖了ES6的关键特性，如let和const、解构赋值、函数优化、对象优化等，并详细讲解了Vue的基础用法，包括插值表达式、指令、组件化以及使用Vue脚手架和Element-UI进行项目开发的方法。
文章目录
前端
- 前后端对比
ES6
ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。ECMAScript是规范，JS的规范的具体实现。
- vscode打开文件夹，创建es6文件夹打开
- 在es6文件中，创建文件，shift+! 回车快速生成html
- 右键—Open with Live Server打开浏览器查看
- shift+alt+f 整理代码
let&&const
- var在{}之外也起作用，类似全局变量，let在{}之外不起作用
- var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
- var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）
- const声明之后不允许改变
<!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>
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
// {
// var a = 1;
// let b = 2;
// }
// console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
// var m = 1
// var m = 2
// let n = 3
// let n = 4
// console.log(m) // 2
// console.log(n) // Identifier 'n' has already been declared
// var 会变量提升
// let 不存在变量提升
// console.log(x); // undefined
// var x = 10;
// console.log(y); //ReferenceError: y is not defined
// let y = 20;
// const
// 1. const声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>
</body>
</html>
解构表达式
- 数组解构：支持let arr = [1,2,3]; let [a,b,c] = arr;
- 对象解构：const { name: abc, age, language } = person; 冒号代表改名
- 字符串函数： 支持一个字符串为多行 占位符功能 ${}
<!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>
函数优化
- 原来想要函数默认值得这么写 b = b || 1 ;
- 现在可以直接写了：function add(a, b = 1) { }
- 函数不定参数：function fun(…values) { }
- 支持箭头函数（lambda表达式）
- 还支持使用{}结构传入对象的成员
<!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>
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10)); // 11
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
return a + b;
}
console.log(add2(20)); // 21
//不定参数
function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4
// 箭头函数
// 以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
var print = obj => console.log(obj);
print("hello"); // hello
// var sum = function (a, b) {
// c = a + b;
// return a + c;
// }
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12)); // 23
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20)) // 40
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello," + person.name) // hello,jack
}
//箭头函数+解构
var hello2 = (obj) => console.log("hello," +obj.name);
hello2(person); // hello,jack
var hello3 = ({name}) => console.log("hello," +name);
hello3(person); // hello,jack
</script>
</body>
</html>
对象优化
- 可以获取map的键值对的信息，Object.keys()、values、entries
- Object.assgn(target,source1,source2) 合并为 target
- const person2 = { age, name } ：属性名和值相同可以声明对象简写
- 对象的函数属性简写
- …代表取出该对象所有属性拷贝到当前对象。let someone = { …p1 }
<!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>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));
// ["name", "age", "language"]
console.log(Object.values(person));
// ["jack", 21, Array(3)] // ['java', 'js', 'css']
console.log(Object.entries(person));
// [Array(2), Array(2), Array(2)]
// 0: (2) ['name', 'jack']、1: (2) ['age', 21]、2: (2) ['language', Array(3)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
// target为目标对象，将其中的合并
Object.assign(target, source1, source2);
console.log(target); // {a:1,b:2,c:3}
// 声明对象简写
const age = 23
const name = "张三"
const person1 = { age: age, name: name } // {age: 23, name: '张三'}
const person2 = { age, name }// 如果属性名和值相同的就可以，声明对象简写
console.log(person2);
// 对象的函数属性简写
let person3 = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数this不能使用，对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉"); // jack在吃香蕉
person3.eat2("苹果"); // jack在吃苹果
person3.eat3("橘子"); // jack在吃橘子
// 对象拓展运算符
// 拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
// 合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 }
console.log(p2) // {age: 15, name: 'Amy'}
</script>
</body>
</html>
map和reduce
<!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>
// 数组中新增了map和reduce方法。
// map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item=> item*2);
console.log(arr); // [2, 40, -10, 6]
// reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
// [2, 40, -10, 6]
// arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
*/
let result = arr.reduce((a,b)=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a + b;
},100); // 初始值100开始+
console.log(result)
/**
上一次处理后：100
当前正在处理：2
上一次处理后：102
当前正在处理：40
上一次处理后：142
当前正在处理：-10
上一次处理后：132
当前正在处理：6
138
*/
</script>
</body>
</html>
promise
- 以前嵌套ajax的时候很繁琐。
- 解决方案： 把Ajax封装到Promise中，赋值给let p 在Ajax中成功使用resolve(data)，交给then处理， 失败使用reject(err)，交给catch处理p.then().catch()
// 创建json文件：corse_score_10.json 课程10的分数
{
"id": 100,
"score": 90
}
// user.json 用户
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
// user_corse_1.json 用户1的课程
{
"id": 10,
"name": "chinese"
}
<!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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
//1、查出当前用户信息
//2、按照当前用户的id查出他的课程
//3、按照当前课程id查出分数
// 三个json文件的调用，会非常复杂
// $.ajax({
// url: "mock/user.json",
// success(data) {
// console.log("查询用户：", data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data) {
// console.log("查询到课程：", data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data) {
// console.log("查询到分数：", data);
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出现异常了：" + error);
// }
// });
// 1、Promise可以封装异步操作
let p = new Promise((resolve, reject) => { //传入成功解析，失败拒绝
//1、异步操作
$.ajax({
url: "mock/user.json",
// 成功
success: function (data) {
console.log("查询用户成功:", data)
resolve(data);
},
// 失败
error: function (err) {
reject(err);
}
});
});
// 成功以后做什么，成功后调用then，将data往里面传
p.then((obj) => {
return new Promise((resolve, reject) => {
// 继续异步操作
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data);
},
error: function (err) {
reject(err)
}
});
})
}).then((data) => { // 成功以后继续操作
console.log("上一步的结果", data)
// 继续异步操作
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data)
},
error: function (err) {
}
});
})
// 抽取上面的流程，定义一个方法，来发请求的方法
function get(url, data) { // 自己定义一个方法整合一下
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
// 递归调用方法
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{ //失败的话catch
console.log("出现异常",err)
});
</script>
</body>
</html>
模块化
- 模块化就是把代码进行拆分，方便重复利用。
- 类似于java中的导包， 而JS换了个概念，是导模块。
- 模块功能主要有两个命令构成 export 和import
- export用于规定模块的对外接口 ：不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
- import用于导入其他模块提供的功能，导入的时候，如果该js导出没有声明变量名（比如：export default{。。}），则可以随意起名，反之不行
// user.js
var name = "jack"
var age = 21
function add(a,b){
return a + b;
}
export {name,age,add}
// hello.js
// export const util = {
// sum(a, b) {
// return a + b;
// }
// }
export default {
sum(a, b) {
return a + b;
}
}
// export {util}
//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
// main.js
// 导入的时候，如果该js导出没有声明变量名（比如：export default{。。}），则可以随意起名，反之不行
import abc from "./hello.js"
import {name,add} from "./user.js"
abc.sum(1,2); // 3
console.log(name); // jack
add(1,3); // 4
Vue
官网：https://cn.vuejs.org/v2/guide/
- MVVM思想
- M：model 包括数据和一些基本操作
- V：view 视图，页面渲染结果
- VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
- 视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，
- 视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。
基础案例
-
可以直接导入CDN：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -
使用npm安装vue：进入项目路径终端：
npm init -y：初始化、npm install vue安装vue，注意项目名不能和vue同名 -
然后创建html页面就可以使用。有什么语法不懂就复制代码看运行结果就容易懂了
-
在VSCode中安装vue 2 snippets语法提示插件，在谷歌浏览器中安装vue.js devtools：
-
谷歌应用商店：https://chrome.google.com/webstore/category/extensions 搜索Vue.js devtools
v-xx：指令
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。
<!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 src="./node_modules/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="num">
<!-- v-model实现双向绑定 -->
<!-- v-on:click绑定事件，实现自增 -->
<button v-on:click="num++">点赞</button>
<!-- 回到自定义的方法 -->
<button v-on:click="cancel()">取消</button>
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
</div>
<script>
// 1、vue声明式渲染
let vm = new Vue({ // 生成vue对象，vue中的el、data、methods
el: "#app",// 绑定元素 div id="app"
data: { // 封装数据
name: "张三", // 也可以使用{{}} 表单中可以取出
num: 1
},
methods: { // 封装方法
cancel() {
this.num--;
},
hello() {
return "1"
}
}
});
// 2、双向绑定：v-model，模型变化，视图变化。反之亦然。
// 3、事件处理：v-on:click
// 还可以在html控制台实时操作vm中的属性：vm.name
</script>
</body>
</html>
v-text、v-html.html
- v-html：可以转义html标签
- v-text：可以解决延迟加载闪烁问题
<!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 src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
{{msg}} {{1+1}} {{hello()}} <br/>
<!-- 用v-html取内容 -->
<span v-html="msg"></span>
<br/>
<!-- 原样显示 -->
<span v-text="msg"></span>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"<h1>Hello</h1>",
},
methods:{
hello(){
return "World"
}
}
})
</script>
</body>
</html>
插值表达式
- 花括号{{}}：只能写在标签体内，不能用在标签内。
- 用v-bind解决 {{}}，必须有返回值
单向绑定v-bind
- 给html标签的属性绑定值，href、class、style、、
- 可以缩写，：就用冒号
<!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 src="../node_modules/vue/dist/vue.js"></script>
<!-- 给html标签的属性绑定 -->
<div id="app">
<a v-bind:href="link">gogogo</a>
<!-- class,style {class名：加上？}-->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
:style="{color: color1,fontSize: size}">你好</span>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
link: "http://www.baidu.com",
isActive:true, // 表示是否将属性添加到class属性中
hasError:true,
color1:'red',
size:'36px'
}
})
</script>
</body>
</html>
双向绑定v-model
- 表单项，自定义组件，input、、、
- 双向表示，页面变内部属性也变
<!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 src="../node_modules/vue/dist/vue.js"></script>
<!-- 表单项，自定义组件 -->
<div id="app">
精通的语言：<br>
<input type="checkbox" v-model="language" value="Java"> java<br/>
<input type="checkbox" v-model="language" value="PHP"> PHP<br/>
<input type="checkbox" v-model="language" value="Python"> Python<br/>
选中了 {{language.join(",")}}
<!-- join拼接里面的值用逗号隔开 -->
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
</body>
</html>
v-on
- 绑定事件，事件修饰符
- 简写为：@
<!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 src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="cancel()">取消</button>
<!-- -->
<h1>有{{num}}个赞</h1>
<!-- 事件修饰符 -->
<!-- .once：只有第一次才生效 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<!-- .stop 阻止冒泡，不要传到上一层的v-on -->
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<!--.prevent：阻止默认行为，就是不让他跳转 -->
<!--.prevent.stop：阻止默认行为，并且阻止往上冒泡，就是只执行一次hello -->
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
<!-- 按键修饰符： -->
<!-- keyup.up：按键盘上键 -->
<!-- click.ctrl：ctrl+单击 -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"> <br />
提示：
</div>
<script>
new Vue({
el:"#app",
data:{
num: 1
},
methods:{
cancel(){
this.num--;
},
hello(){
alert("点击了")
}
}
})
</script>
</body>
</html>
v-for
<!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>
<!-- 遍历数组users-->
<li v-for="(user,indexA) in users" :key="user.name" v-if="user.gender == '女'">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{indexA}} ==> {{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>
<!-- 遍历常规数组nums，:key 我们用索引来区分-->
<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>
v-if和v-show
- v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。为false会删除标签
- v-show，当得到结果为true时，所在的元素才会被显示。为false只是隐藏了
<!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-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。
-->
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我....</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
v-else和v-else-if
- 和java的if，else if类似
- v-if优先级高于v-for
<!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">
<button v-on:click="random=Math.random()">点我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！ >= 0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！ >= 0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！ >= 0.2
</h1>
<h1 v-else>
看到我啦？！ < 0.2
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: { random: 1 }
})
</script>
</body>
</html>
计算属性和侦听器
- computed：计算数据，比如购物车总共多少钱
- 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(newVal,oldVal){
if(newVal>=3){
this.msg = "库存超出限制";
this.xyjNum = 3
}else{
this.msg = "";
}
}
},
})
</script>
</body>
</html>
过滤器
- filters过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
<!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 表示用genderFilter过滤一下-->
{{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: {
// filters 定义局部过滤器，只可以在当前vue实例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
</body>
</html>
组件化
- 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相 同的部分。
- 例如可能会有相同的头部导航。 但是如果每个页面都自开发，这无疑增加了我们开发的成本。所以我们会把页面 的不同分拆分成立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
- 在vue里，所有的vue实例都是组件 组件其实也是一个vue实例，因此它在定义时也会接收：data、methods、生命周期函等 不同的是组件不会与页面的元素綁定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组了 data必须是一个函数，不再是一个对象。
<!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">
<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、全局声明注册一个组件
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {
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>
生命周期钩子函数
<!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>
使用Vue脚手架进行开发
- 全局安装webpack
- npm install webpack -g ：全局安装vue脚手架
- npm install -g @vue/cli-init
- 初始化vue项目：
vue init webpack appname：vue脚手架使用webpack模板初始化一个appname项目 - 启动vue项目：项目的package.json中有scripts，代表我们能运行的命令 npm start = npm run dev: 启动项目 npm run build：将项目打包
使用element-ui
-
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
-
npm i element-ui -S 在 main.js 中写入以下内容：
-
import ElementUI from ‘element-ui’;
-
import ‘element-ui/lib/theme-chalk/index.css’;
-
Vue.use(ElementUI);
扫一扫
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
