前言
前端现在可以说是百花齐放，开发的效率是不断的提升，前端的三大主流框架 Vue 、Angular 、React 其中 Angular 是2009年诞生的，一开始出来挺火的，后面随着版本的升级，Angular的变化比较大，增加了使用学习的成本，渐渐的失去了优势，React和Vue的原理基本上是一样的，诞生比Vue早，所以Vue结合了Angular和React的优势，占据了江山。
提高开发效率的发展历程：
原生的JS 》 JQuery 类库 》 前端模板引擎 》 Vue.js / Angular.js / React.js ( Vue 减少了DOM操作 虚拟DOM 提高了渲染效率 数据双向绑定)
Vue
Vue 只做 Html + css + js : 视图
网络通信： axios前端通信框架
页面跳转：vue-router
状态管理: vuex
UI 框架
ElementUI 、iview、ice
Vue的发展史：
2013年底尤雨溪个人实验项目开始开发
2014年2月公开发布
2014年11月发布0.11版本
2016年10月发布2.0版本
Vue 基于 MVVM 模式设计的, MVVM （Model View ViewMolde）
MVVM模式：
Model 数据模型
View 负责页面展示
ViewModel 对数据进行处理后再交给页面展示
ViewModel是Vue.js的核心，它是一个Vue的实例
从 View 侧看 ViewModel中的DOM Listeners 会帮我们监测页面上DOM元素的变化，如果有变化，则会更改Model中的数据；
从 Model 侧看 当我们更新 Model 中的数据时 ，Data Bingings 会帮我们更新页面中DOM元素；
提高开发效率的发展历程：
最开始的原生 JS (操作DOM元素) 》 Jquery 类库 》前端模板引擎 》 Vue.js / Angular.js / React.js (其中Vue减少DOM操作，虚拟DIM, 提高了页面渲染效率，实现了数据的双向绑定)
Vue.10 是没有虚拟DOM 在 Vue.2.0改成了虚拟DOM
Vue 生命周期
beforeCreate(){
console.log("beforeCreate")
// 此时数据data和事件方法methods还未绑定到app对象上
},
created(){
console.log("create")
// 数据data和事件方法methods绑定到app对象上
},
beforeMount(){
console.log("beforeMount")
// 渲染之前，根据数据生成的DOM对象是获取不到的
},
mounted(){
console.log("mounted")
// 渲染之后，可以获取数据生成的DOM对象。
},
beforeUpdate(){
// 数据更改， 但内容未更改之前
console.log("beforeUpdate")
},
update(){
// 内容已更改完毕
console.log("update")
},
beforeDestroy(){
// 应用销毁之前
console.log("beforeDestroy")
},
destroyed(){
// 应用销毁之后
console.log("destroyed")
}
Vue 模板语法
插值
文本
Message: {{ msg }}
通过使用 v-once 指令可以一次性的插值，当数据改变时，此处内容不会更新。
这个将不会改变: {{ msg }}
原始 HTML v-html 指令
Using mustaches: {{ rawHtml }}
Using v-html directive:
结果：
Using mustaches: This should be red
Using v-html directive: This should be red
支持使用 Javascript 表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
指令
是带有 v- 前缀的特殊属性。
参数
在指令名之后以冒号表示，eg:
这里 href是参数 ， 告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
v-on指令用来监听DOM事件：
动态参数
2.6.0 新增
从2.6.0开始 ，指令的参数可以用方括号括起来的表达式了。
如果Vue的实例中 data 的attributeName的值为href ,那么这个就为 v-bind:href="url"
v-bind指令的缩写 ：
v-on指令的缩写 @
计算属性
vue的计算属性对于任何复杂的逻辑都可以使用计算属性 computed 。
计算属性默认只有 getter , 可以设置一个 setter
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性的缓存
计算属性是基于响应式依赖进行的缓存，只在相关的依赖发生改变时，才会重新求值。也就是说依赖不发生改变，不会执行函数。会存缓存中获取。
如果不需要缓存，可用方法替换。
computed依赖于data中的变量，只有在它的相关依赖数据发生改变时才会重新求值
watch 只有当监听的变量发生改变的时候才能触发。
Class 绑定
class 对象绑定
写法一：
如下data中：
data:{
isActive： true
}
写法二：
data:{
classObject: {
active:true,
'text-danger':false
}
}
class 数组绑定
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
Style 内联样式绑定
style 对象语法
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定一个样式对象，会更方便
data: {
activeColor: 'red',
fontSize: 30
}
同样的，对象语法常常结合返回对象的计算属性使用。
style 数组语法
Vue条件渲染
指令 v-if 与 v-show 区别：
v-if =“表达式” ， 表达式为false 时，移除DOM中的元素
v-show="表达式" ， 表达式为false 时， 会将DOM元素设置为display:none
性能上 v-if 相比 v-show 更消耗性能 ，如果需要频繁切换使用 v-show
列表渲染
v-for 指令基于一个数组来渲染列表。 v-for 指令需要使用 item in itmes 形式的是特殊语法 items 是源数据数组 item 是被迭代数组元素的别名。
v-for 遍历数组
{{item.message}}
var example = new Vue(){
el: 'example-l',
data: {
items: [
{message: 'Foo'},
{message: 'Bar'}
]
}
}
结果：
Foo
Bar
在 v-for 代码块中，还可以访问所有父作用域中的属性，v-for 的第二个参数为索引。
{{ parentMessage }} - {{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
Parent-0-Foo
Parent-1-Bar
v-for 遍历对象
{{ value }}
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果：
How to do lists in Vue
Jane Doe
2016-04-10
将属性名称和值都遍历出来
{{ name }}: {{ value }
结果：
title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10
{{ index }}. {{ name }}: {{ value }}
v-for 的默认行为会尝试原地修改元素而不是移动它们， 要强制其重新排序元素, 需要使用 特殊属性 key 来提供一个排序提示
事件处理
监听事件 可以用 v-on 指令监听DOM事件
用表达式直接进行计算
eg:
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
键修饰符
系统修饰符
.ctrl
.alt
.shift
.meta
.exact修饰符
2.5.0 新增
.exact 修饰符允许你控制精确的系统修饰符组合触发的事件。
表单输入绑定
v-model 指令在 表单 input 、textarea、select 、radio、checkbox 元素上创建双向数据绑定。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
修饰符
.lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
修饰符可以多个一起使用
Vue组件
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
组件中的data 必须是一个函数
data: function(){
return {
}
}
组件与组件之间传值
父组件给子组件传值
通过 Props 向子组件传递数据
子组件
Vue.component('blog-post', {
// 定义 props 中的属性
props: ['title'],
template: '
})
动态传递Props
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" > 子组件给父组件传值 子组件传父组件需要自定义触发事件 $emit，实现数据的传输 当父级组件监听这个事件时，可以通过 $event 访问抛出的这个值；且必须是用 $event 接收 ... v-on:enlarge-text="postFontSize += $event" >父组件的count : {{count}}
友情链接:
Copyright © 2022 卡塔尔世界杯排名_98世界杯决赛 - dylfjc.com All Rights Reserved.