前端Vue框架学习（一）基础内容总结
Vue是前端开发主流框架之一，对于开发者来说解决了好多细节问题，方便了开发，提高了效率，下面我就带来Vue2.0的一些基础的内容归纳总结，后期我会归纳Vue3.0的新变化
文章参考：
Vue基础概念
Vue教程
Vue视频教学
生命周期
Vue介绍
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架
- 它采用自底向上增量开发的设计，使得开发者只需关注视图层，易于上手，
- 还便于与第三方库或既有项目整合 通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue概念
渐进式框架：
- 渐进式是主张最少，不强主张，不做职责之外的事情，需要什么就使用什么。
- 一步一步往下走，而不是把所有的东西都用上。
- 比如客户端路由，构建工具等等都有自己的解决方案，它们之间相互独立，不需要全部整合在一起
自底向上逐层应用
就是先写好基础的东西再添加一些效果，逐层添加
MVVM
- MVVM是Model-View-ViewModel的缩写
- Model就是数据部分，也就是你写数据代码的区域，类似于JavaScript对象
- View就是视图部分，也就是DOM
- ViewModel是连接两者的枢纽，可以通过ViewModel来实现双方的通讯，
- 数据变化时，通过DataBingings它能够监听这种变化，及时反馈给视图并做出修改
- 视图变化时，也会通过DOM Listeners来监听并改变Model层的数据
- 这样就保证了视图和数据的一致性；从而实现双向数据绑定的功能
声明式渲染
就是Vue采用一个简洁的模板语法来声明式的将数据渲染进DOM系统
Vue下载和引入
- 我推荐使用npm；因为npm可以方便的和webpack打包工具配合；同时 Vue 也提供配套工具来开发单文件组件
- node环境下运行并输入指令
npm install vue
- 然后使用标签引入即可使用
推荐一个vue开发者工具
初始化
- 需要一个vue实例 里面包含一个配置选项(配置项后面会详细学习)
var vm = new Vue({
el:"#app",
data:{},
methods:{}
})
- 需要一个容器，里面放置一些插值语法，也就是view渲染呈现的内容
<div id="root">
<h1>hello {{name}}</h1>
</div>
- 下面就开始往vue实例里面添加属性
var vm = new Vue({
el:"#app", //用于指定当前vue实例为哪个容器服务 值通常为css选择器选择器字符串
data:{
name:"啦啦啦", // 用于存储数据 且更换CSS选择器里面所选元素的内容 暂时写成一个对象为了方便多个数据更换
},
methods:{} //先暂时不写
})
运行页面会发现出现了 hello 啦啦啦的内容；简单的初入就完成了
如果你在控制台修改vm.name=‘妮妮’ 就会发现页面被修改了 成为 hello 妮妮
总结：
- 我们不再和 HTML 直接交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上
- app容器里面代码依然符合html css 代码规范 只不过混入一些特殊的vue格式规范
- {{}} 此方法可以在 html 代码里使用vue 插值
模板语法
插值
- 文本插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ name }}</span>
<span v-once>这个值不会被改变{{age}}</span> // 添加了v-once表示整个值不会更新
- 原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，可以使用 v-html 指令：
<p v-html="nei">我里面有html文本</p>
然后再配置项里面添加一写html结构
data: {
nei: "我是内部的p
",
}
- 属性
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
<span v-bind:id="dynameic">给我绑定了一个hello的id</span>
data:{
dynameic:"hello", //给上面span标签绑定一个id值
}
这时候span就多了一个值为hello的id
- JavaScript表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持；意味着你直接可以在{{}}里面编写js代码
{{ number + 1 }}
<span>{{ok?'yes':'no'}}</span>
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute
- v-if： 根据表达式的值的 truthiness 来有条件地渲染元素
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 p元素
- v-else：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
<div v-if="Math.random() > 0.5">
Now you see me
div>
<div v-else>
Now you don't
div>
-
v-for：v-for 具有比 v-if 更高的优先级
-
v-on：它用于监听 DOM 事件；值得注意的是它的美称要写在方法配置项里
<div @click="click1">
<div @click.stop="click2">
click me
div>
div>
var app = new Vue({
el: "#app",
data: {},
methods: {
click1: function() {
console.log("click1___");
},
click2: function() {
console.log("click2__");
}
}
})
- v-bind:该指令可以用于响应式地更新 HTML attribute
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性值与表达式 url 的值绑定
计算属性和侦听器
计算属性
- 因为模板内表达式非常便利，但是太多的逻辑会让模板难以维护；对于复杂的逻辑，应当使用计算属性
- 它支持数据缓存，也就是页面重新渲染时，只有数据发生改变才会执行函数
<div id="example">
<p>Original message: "{{ message }}"p>
<p>Computed reversed message: "{{ reversedMessage }}"p>
div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果：
Original message: “Hello”
Computed reversed message: “olleH”
如果我们修改vm里面的值，会发现vm.reversedMessage 的值始终取决于 vm.message 的值。
- 在computed中的，属性都有一个get和一个set方法。当 computed属性的属性值是函数，那么默认是get方法，函数的返回值就是属性的值；当数据变化时，调用set方法。
<div id="demo">{{ fullName }}</div>
<div id="demo">{{ fullName1() }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
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]
}
}
},
methods:{
fullName1:function(){
return this.message.split('').reverse().join('')
}
}
})
现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新
同时你也会发现模板里面调用方法也能出现和计算属性一样的结果；但是两者有什么不同呢
- 使用
computed：定义的函数可以直接作为变量使用
methods：必须调用才能
- 缓存
computed里的数据会被缓存，每次更新都会先对比数据是否发生了变化，减少了渲染时间。
methods里的函数不会被缓存，只要数据有更新，就会执行对应的函数。
侦听器
- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性
- 它可以侦听任何逻辑
- 不支持数据缓存；意味着页面重新渲染时，无论值变不变，都会重新执行
- 接收两个参数，新值和旧值
- 不要使用箭头函数（因为箭头函数没有 this，因此它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的this 指向 window，而不是 Vue 实例）
- 深度监视（deep：true 可以监视对象内部值发生的改变 多层）和普通监视（vue中的watch 默认不可以监视对象内部值发生的改变 只能监视一层）
- Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性
<div id="root">
<h3>今天天气很{{info}}h3>
<button @click="changeWeather">切换天气button>
div>
var vm = new Vue({
el: '#root',
data: {
isHot: true,
},
watch: {
isHot: {
immediate: true, // 默认false 初始化时让handler调用一下
handler(newValue, oldValue) {
console.log("isHot被修改了", newValue, oldValue);
}
}
}
})
// 第二种写法 如果创建时还不知道要监视谁 后期通过用户需求进行监视就用这一种
vm.$watch('isHot', {
immediate: true, // 默认false 初始化时让handler调用一下
handler(newValue, oldValue) {
console.log("isHot被修改了", newValue, oldValue);
}
})
class和style的绑定
绑定HTML
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可
- 对象语法
上传单个字段值
<div v-bind:class="{ active: isActive }">div>
上传多个字段内容
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>
data: {
isActive: true,
hasError: false
}
当然，绑定的数据对象不必内联定义在模板里；利用函数接收
<div v-bind:class="classObject">div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
- 数组语法
我们可以把一个数组传给 v-bind:class
<div v-bind:class="[activeClass, errorClass]">div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
绑定内联样式
<div v-bind:style="styleObject">div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
条件渲染
也就是通过一些指令来说明哪些结构需要显示，哪些不需要显示
如：v-if v-else-if v-show等等上面指令有描述
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if较好。 来自官方文档
列表渲染
v-for
<div id="app">
<li v-for="n in evenNumbers">{{ n }}li>
<span v-for="n in 10">{{n}}span>
div>
var vm = new Vue({
el: "#app",
data: {
numbers: [1, 2, 3, 4, 5]
},
computed: {
evenNumbers: function() {
return this.numbers.filter(function(number) {
return number % 2 === 0
})
}
}
})
- 第二参数（index）用来输出索引值
<ul>
<li v-for="(item ,index) in items" :key="index">{{index}}{{item.message}}li>
ul>
- 第三参数（key）
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略 只适用于不依赖子组件状态或临时 DOM 状态为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute
<li v-for="(value,key) in object" :key="key">{{key}}:{{value}}li>
var vm = new Vue({
el: "#app",
data: {
items: [{
message: "one"
}, {
message: "two"
}],
object: {
title: "lgh",
public: "default",
age: "19"
}
}
})
事件处理
事件处理方法
<div id="example-2">
<button v-on:click="greet">Greetbutton>
div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
也可以内联处理器中的方法
<button v-on:click="say('hi')">Say hibutton>
methods: {
say: function (message) {
alert(message)
}
事件修饰符
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
<a v-on:click.once="doThis">a>
按键修饰符（也就是键盘事件）
<div id="app">
<input type="text" v-on:keyup.enter="submit">
<button v-on:click.ctrl="onClick">Abutton>
<button v-on:click.ctrl.exact="onCtrlClick">Abutton>
<button v-on:click.exact="onClick">Abutton>
div>
var vm = new Vue({
el: "#app",
data: {},
methods: {
submit: function() {
alert("我嗯了enter键盘了")
},
onClick: function() {
alert("alt+shift")
},
onCtrlClick: function() {
alert("only ctrl")
}
}
})
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件
表单输入绑定
你可以用 v-model 指令在表单 、