主要内容
20
-
13 vue
-
7 React
-
学习特点
- 结合实战项目
- 电商前后台项目
学习方法
-
1.掌握核心知识点
- express 是一个基于Nodejs的web开发框架
- 路由
- 中间件
- Nodejs ？是一个基于chrome v8 引擎的js运行环境
- js 解释器
- 如何学习vue？
- 当你在学vue的时候，你在学什么？
- 指令
- 组件
- 计算属性
- 路由
- 状态管理
- 。。。。
- express 是一个基于Nodejs的web开发框架
-
- 多练习,上手敲代码
- 要达到一定的代码量 至少 5 万行（初步入门） 10万行，进阶
-
- 多思考，多总结
- 尽可能多的列出所学的知识点
- 找出知识点之间的联系
-
用思维导图把当天的内容总结一下
-
每天一定要按时完成当天的作业
-
第二天讲作业
-
放下思想包袱
-
map,filter,forEach
1. vue简介
vue 是一个用于构建用户界面的渐进式框架
vue的技术栈（vue的全家桶）
- vue vue的核心库 ❤️❤️❤️❤️❤️
- vue devtools 调试插件 ❤️
- vue-cli 命令行工具 ❤️❤️❤️❤️❤️
- vue-router 路由 ❤️❤️❤️❤️❤️
- vuex vue 状态管理 ❤️❤️❤️
- vue 服务端渲染 ❤️
vue 开发者是
- 由雨溪
- 2013 开始开发
- 2014 开源 Github
Github:
github 是一个开源社区，代码托管平台
- 168K star
- 371开发者
完善的生态系统
vue 不支持IE8及以下版本的浏览器，
Object.defaineProperty()
Vue的优点：
- 渐进式
- 轻量级
- 双向数据绑定
- 指令系统
- 组件化
- 虚拟DOM
2. vue的的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入vue -->
<script src="./vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<!-- ejs <% %> -->
<!-- vue 底层会通过正则去配置 {{}} -->
<!-- 自定义 <{}> -->
<h1> {{ msg }} </h1>
</div>
<script>
// vue 是一个渐进式的框架
// 实例化vue对象
let app = new Vue({
el: "#app", //element 元素，在这里写某个元素的选择器,设置挂载点，把vue实例挂载到#app。
// data中是保存在vue实例中的数据
data: {
msg: "hello vue"
}
})
</script>
</body>
</html>
3. 设计模式
- mvc
express MVC
- Model 模型 数据模型，数据的操作
- View 视图 模板 ejs，html，jade
- C Controller 控制器 路由
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktntXpCn-1595822018717)(C:\Users\孙潇甜\AppData\Roaming\Typora\typora-user-images\image-20200721200740422.png)]
vue是类似于
- mvvm
- M Model
- V View
- VM ViewModel
4. vue实例
数据
在data中定义数据
使用 {{ }} 在视图上进行输出
{{ }} 插值表达式，又叫 mustache语法
在{{}} 中可以写什么？
可以合法的js表达式
<!-- ejs <% %> -->
<!-- vue 底层会通过正则去配置 {{}} -->
<!-- 自定义 <{}> -->
<!-- {{ }} 插值表达式 -->
<!-- 字符串 -->
<h1> {{ msg }} </h1>
<!-- 数字 -->
<h1> {{ count }} </h1>
<!-- 四则运算 -->
<h1> {{ a + b }} </h1>
<!-- 逻辑运算 & | ！ -->
<h1> {{ !bol }} </h1>
<h1> {{ a > b }} </h1>
<!--- 写小于号时，一定要加上空格！！！！ --->
<h1> {{ a < b }} </h1>
<!-- 三目运算 -->
<h1> {{ a > b ? "哈哈哈" : "呵呵呵" }} </h1>
<!-- 不可以是js语句 -->
<!-- <h1> {{ if(bol){ return 1} }} </h1> -->
函数
// 在这里定义自定义方法
methods: {
// add : function(){
// // console.log(this)
// this.count += 1;
// }
// 如果要在视图上，通过插值输出，要有返回值
add(){
// this.count++;
return this.count + 1;
},
rand(){
return Math.random()*100
}
// 不可以是箭头函数
// add: () =>{
// console.log(this)
// }
},
强烈建议使用 MarkDown
开发中会用到 md
5. vue基本指令
什么是指令？
在vue中，指令是一种特殊的属性，以 v-开头，例如 ：v-text
在vue中，内置了很多指令：
- v-text
<h1 v-text="msg"></h1>
<div id="app">
<h1> {{ msg }} </h1>
<h1 v-text="msg"> 数据请求中... </h1>
</div>
<script>
setTimeout(() =>{
let app = new Vue({
el: "#app",
data:{
msg : "hello vue"
}
})
},2000)
</script>
- v-html
<div id="app">
<div>
{{ richText }}
</div>
<div v-text="richText"></div>
<!-- 解析富文本 -->
<div v-html="richText"></div>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
richText:'<div> <h1> 商品单页 </h1> <p> 锄禾日当午，汗滴禾下土 </p> </div>'
}
})
</script>
- v-if
实现条件渲染
<h1 v-if="isShow"> 为中华崛起而读书 </h1>
- v-else-if
- v-else
<h1 v-if="isShow"> 为中华崛起而读书 </h1>
<h3 v-if="score >= 90"> 优秀 </h3>
<h3 v-else-if="score >= 80 && score < 90"> 良好 </h3>
<h3 v-else-if="score >= 70 && score < 80"> 及格 </h3>
<h3 v-else> 不及格 </h3>
- v-show
<h1 v-if="isShow" > 为中华崛起而读书1 </h1>
<h1 v-show="isShow"> 为中华崛起而读书2 </h1>
v-if 和 v-show 的区别？？？
应用场景：
-
v-if 条件渲染，当某个条件不符合而不渲染时，可以使用v-if
-
v-show 某个元素可能会频繁的显示和隐藏
-
v-for
<div id="app">
<ul>
<li v-for="({id,name,price},i) in foods">
{{ i + 1 }} id:{{ id }}
<h5> 菜名：{{ name }} </h5>
<p> 价格：{{ price.toFixed(2) }} </p>
</li>
</ul>
<ul>
<li v-for="(f,i) in foods">
{{ i + 1 }} id:{{ f.id }} 菜名：{{ f.name }}
价格：{{ f.price }} </li>
</ul>
<ul>
<li v-for="(v,k,i) in user">
{{ i + 1}} - {{ k }} : {{ v }}
</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
foods:[
{id:'1111',name:"宫保鸡丁",price:23.8},
{id:'2222',name:"鱼香肉丝",price:24.8},
{id:'3333',name:"麻婆豆腐",price:25.8},
{id:'4444',name:"地三鲜",price:13.8},
{id:'5555',name:"西红柿炒鸡蛋",price:20.8}
],
user: {
name: "吴邪",
age: 23,
addr:"吴州"
}
}
})
- v-on
v-on:事件名称，例如：v-on:click,简写： @click
绑定事件：
<div id="app">
<h1> {{ count }} </h1>
<button @click="add"> @click </button>
<button v-on:click="add"> click </button>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
count: 0
},
methods: {
add(){
this.count++;
}
},
})
- v-model
<!-- v -->
<div id="app">
<h1> {{text}} </h1>
<!-- v-model 用于表单元素，通过双向数据绑定，可以获取到表单元素的值 -->
<input type="text" v-model="text">
</div>
<script>
// vm
let app = new Vue({
el : "#app",
data:{
text:"hello world123"
},
methods: {
},
})
</script>
Todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<h1> 任务清单 </h1>
<input type="text" v-model="text">
<button @click="addTodo"> 添加任务 </button>
<ul>
<li v-for="t in todos">
{{ t.text }}
</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data:{
text:"",
todos:[
{id:0,text:"俯卧撑100"},
{id:1,text:"跑步5公里"}
]
},
// 定义方法
methods: {
// 添加任务的方法
addTodo(){
// 如果text不为空，再添加到数组中
// 非空校验
if(this.text){
// 向数组中添加对象
this.todos.push({id: this.todos.length ,text: this.text})
// 把text置空
this.text = ''
}
}
},
})
</script>
</body>
</html>
总结：
- v-text
- v-html
- v-if
- v-else-if
- v-else
- v-show display
- v-for 数组，对象
- v-on
- v-model
作业
- 今日内容练习，总结
- 实现视频弹幕功能
- 输入框输入弹幕内容
- 在视频上方弹幕滑动动画
2082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
