文章目录
一. Vue基础
认识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>
方式二. 下载和引入
// 开发环境
https://vuejs.org/js/vue.js
// 生产环境
https://vuejs.org/js/vue.min.js
方式三. 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可以放什么
语法
综合
插值操作 Mustache
- Mustache语法 (双大括号)
- 可以直接写变量
- 可以写简单的表达式
v-once
后面不需要跟任何表达式
表示元素和组件只渲染一次, 不会随着数据的改变而变化
v-html
后面往往跟一个string类型
会将string的html解析出来并渲染
v-text
与Mustache相似, 一般不用, 不灵活
v-pre
用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法
v-cloak
在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签
v-bind
作用: 动态绑定属性
简写: :
条件判断
v-show
- 当条件为false的时
v-if: 指令的元素, 不会渲染到dom中
v-show: dom增加一个行内样式display: none
v-on
作用: 绑定事件监听
简写: @
写法:
-
没有参数的情况下, 可以不写(); 如果方法本身有一个参数, 会默认将原生事件event参数传递进去
-
如果传入某个参数, 同时需要event时, 可以通过$event传入时间
点击次数: {
{counter}}
修饰符
作用
实际调用
.stop
阻止事件冒泡
event.stopPropagation()
.prevent
阻止默认事件
event.preventDefault()
{keyCode I keyAlias}
监听某个键盘的键帽
–
.native
监听组件根元素的原生事件
–
.once
只触发一次回调
–
v-for遍历数组
// 遍历过程中, 没有使用索引值
<li v-for="item in names">{
{item}}</li>
// 遍历过程中, 获取索引值
<li v-for="(item, index) in names">{
{index + 1}} - {
{item}}</li>
// 遍历对象的时候, 只有一个值, 活得的是value
// 获取对象的key和value
<li v-for="(value, key) in names">{
{value}} - {
{key}}</li>
// 获取对象的key和value和index
<li v-for="(value, key, index) in names">{
{value}} - {
{key}} - {
{index}}</li>
官方推荐, 使用v-for的时候, 加上一个 key属性
图1
key的作用是为了高效的更新虚拟DOM
key要具有唯一性, 不然就没意义
<li v-for="(item, index) in names" :key="item">{
{index + 1}} - {
{item}}</li>
v-model表单绑定
实现表单元素和数据的双向绑定
<div id="app">
<input type="text" v-model="message">
{
{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
// 界面的message数据改了, data里面的message就改变了, 是双向的
可以将v-model用于textarea元素
<textare v-model="message"></textare>
<p>输入内容: {
{message}} </p>
其他方法实现双向绑定
// v-bind绑定一个value属性
// v-on指令给当前元素绑定input事件
// 下面代码 等同于 使用v-model
<div id="app">
<input type="text" :value="message" @input="message = $event.target.value">
{
{message}}
</div>
cosnt app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
v-model结合radio类型使用
<div id="app">
<label for="male">
<inout type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="male">
<inout type="radio" id="female" value="女" v-model="sex">nv
</label>
<h2>您选择的性别是: {
{sex}}</h2>
</div>
cosnt app = new Vue({
el: '#app',
data: {
sex: '男'
}
})
v-model结合checkbox类型使用
-
单选框
// 需求: 是否同意该协议, 同意后下一步
下一步
cosnt app = new Vue({
el: ‘#app’,
data: {
isAgree: false
}
})
// 点击文字部分也可以选中
-
多选框
您的爱好是: {
{hobbies}}
cosnt app = new Vue({
el: ‘#app’,
data: {
isAgree: false,
hobbies: []
}
})
v-model结合select类型使用
下拉框单选
下拉框多选
值绑定
含义: 动态的给value赋值
1 在前面的value中的值, 都是在定义input的时候直接给定的
2 但真实开发中, input的值可能是从网络获取或定义在data中的
3 可以通过v-bind:value动态的给value绑定值
<div id="app">
<label v-for="item in nums" :for="item">
<inout type="checkbox" value="item" :id="item" v-model="hobbies">{
{item}}
</label>
<h2>您的爱好是: {
{hobbies}}</h2>
</div>
cosnt app = new Vue({
el: '#app',
data: {
hobbies: [],
nums: ['篮球', '足球', '羽毛球']
}
})
修饰符
lazy修饰符
number修饰符
- 前景: 默认情况下, 在输入框中无论输入字母还是数字, 都会被当做字符串类型进行处理
- 作用: 当做数字类型进行处理
trim修饰符
- 前景: 输入的内容首位容易有空格
- 作用: 可以过滤掉内容左右两边的空格
检测数组更新
Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.
Vue中观察数据编译的方法 – 用它们改变数组会触发视觉更新
数组响应式方法
作用
push()
在数组中最后增加元素
pop()
删除数组中最后一个元素
shift()
删除数组中的第一个元素
unshift()
在数组最前面添加元素
splice()
删除 / 插入 / 替换元素
sort()
xx
reverse()
xx
数组未响应
作用
filter()
xxxxxxx
concat()
xxxxxxx
slice()
xxxxxxx
计算属性 computed
使用: 需要将多个数据结合起来进行显示的时候
<div id='app'>
// 使用拼接的方法 -- 语法太过繁琐
<h2>{
{firstName + '' + lastName}}</h2>
<h2>{
{firstName}} {
{lastName}}</h2>
// 使用方法
<h2>{
{getFullName()}}</h2>
// 使用计算属性 -- 看起来最舒服 最好
<h2>{
{fullName}}</h2>
</div>
const app = new Vue({
el: '#app',
data:{
firstName: 'li',
lastName: 'er'
},
// 计算属性
computed: {
fullName: function () {
reture this.firstName + '' + this.lastName
}
},
// 方法
methods: {
getFullName () {
reture this.firstName + '' + this.lastName
}
}
})
计算属性setter和getter
<div id='app'>
<h2>{
{fullName}}</h2>
</div>
const app = new Vue({
el: '#app',
data:{
firstName: 'li',
lastName: 'er'
},
// 计算属性
computed: {
fullName: {
// 一般没有set方法
set: function (value) {
},
// 只读属性
get: function () {
reture this.firstName + '' + this.lastName
}
}
}
})
上面案例的写法是简写. 完整写法是调用了get();
computed / methods区别
多次使用的时候
- methods: 每次都会调用
- computed: 计算机会缓存, 不变的情况下只调用一次
fulters过滤器
<div id='app'>
<h2 {
{aaa | showA}}></h2>
</div>
const app = new Vue({
el: '#app',
data:{
aaa: 'li'
},
// 过滤器
fulters: {
showA (value) {
return;
}
})
三. 组件化开发
组件的基本介绍
注册组件的基本步骤
-
调用Vue.extend()方法 - 创建组件构造器
-
调用Vue.com
