今日学习总计

vue学习

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

认识Vue.js
Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex
Vue特点和Web开发常见高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
Vue安装方式
方式一. 直接CDN引入
可以选择引入开发环境版本 / 生产环境版本

// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>

// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>
1
2
3
4
5
方式二. 下载和引入

// 开发环境
https://vuejs.org/js/vue.js

// 生产环境
https://vuejs.org/js/vue.min.js
1
2
3
4
5
方式三. NPM安装

通过webpack和CLI的使用

Vue的MVVM
M： Model 数据模型

数据层
数据可能是固定的思数据, 更多的是来自服务器, 从网络上请求下来的数据
V: View 视图模板

视觉层
在前端开发中, 通常是DOM层
作用: 是给用户展示各种信息
VM： View-Model 视图模型

视图模型层
是View和Model沟通的桥梁
一方面实现了Data Binding (数据绑定), 讲Model的改变实时的反应到View中
另一方面实现了DOM Listener (DOM监听), 当DOM发生一些时间 (点击, 滚动, touch等) 时, 可以监听到, 并在需要的情况下改变对应的Data
二. Vue基础语法
语法糖: 简写

生命周期
事物从诞生到消亡的整个过程

模板语法
创建Vue, options可以放什么
el
data
methods
生命周期函数
…
语法
综合
插值操作 Mustache

Mustache语法 (双大括号)
可以直接写变量
可以写简单的表达式
v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html
后面往往跟一个string类型
会将string的html解析出来并渲染

v-text
与Mustache相似, 一般不用, 不灵活

v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind
作用: 动态绑定属性
简写: :

条件判断

v-if
v-else-if
v-else
v-show

当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @
写法:

没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
如果传入某个参数, 同时需要event时, 可以通过$event传入时间
<div id="app">
<h2>点击次数: {{counter}}</h2>
<!--情况一: 方法没有参数-->
<button @click="btnClick1">按钮1</button>
<button @click="btnClick1()">按钮1</button>

<!--情况二: 如果方法有参数-->
<!--1.调用时不传入参数,会默认将event作为第一个参数传入-->
<button @click="btnClick2">按钮2</button>
<!--2.调用时不传入参数,那么参数为undefined-->
<button @click="btnClick2()">按钮2</button>

<!--情况三: 如果方法有参数,并且希望传入event-->
<button @click="btnClick3(10, $event)">按钮3</button>
</div>

<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1() {
console.log('按钮1被点击');
},
btnClick2(payload) {
console.log('按钮2被点击', payload);
},
btnClick3(num, event) {
console.log('按钮3被点击', num, event);
}
}
})
</script>