此笔记是我在拉勾学习课程过程中的总结，文字原创，笔记里很多技巧和知识是老师总结的，如果有侵权，请联系本人！
vue框架基础
vue.js简介
传统网页开发
请求数据->生成结构->监听变化
元素变化->发送请求->更新结构
DOM操作与逻辑代码混合，可维护性差，模块之间依赖关系复杂，
vue.js
渐进式 JavaScript框架
vue.js核心特性
数据驱动视图
数据变化自动更新到对应元素，无需操作dom，称为单向数据绑定
-
对于输入框等可输入元素，可设置双向数据绑定
·双向数据绑定在数据绑定的基础上，可以自动元素输入内容更新给数据，实现数据与元素内容的双向绑定
实现原理
vue.js的数据驱动视图基于MVVM模型实现
-
MVVM(Model – View – ViewModel )是一种软件开发思想
model层，代表数据
view层代表视图模板
viewmodel层，代表业务逻辑处理代码
优缺点
基于MVVM模型实现了数据驱动解放DOM操作
view与model处理分离，降低代码耦合
双向绑定bug调试难度大
大型项目的view和model过多，维护成本高
组件化开发
允许封装为自定义的HTML标签，复用时书写自定义标签名即可
组件可以封装结构，逻辑代码、样式，提高了开发效率和可维护性。
vue下载
本地引入
• 开发版本：https://cn.vuejs.org/js/vue.js
• 生产版本：https://cn.vuejs.org/js/vue.min.js
cdn 引入
• 最新稳定版： https://cdn.jsdelivr.net/npm/vue
• 指定版本：
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
npm 安装
• 最新稳定版：
• npm install vue
• 指定版本
• npm install vue@2.6.12
基础语法
vue实例
通过vue函数创建的对象，是vue功能的基础
var vm = new Vue({
//选项内容
})
el选项
用于选取一个DOM 元素作为vue实例挂载目标
只有挂载在元素内部才能被vue处理，外部为普通的html元素
代表mvvm中的view层
设置方式
- 可以为css选择器格式的字符串或者HTMLElement实例，但是不能为html或者body
并且不可为选中的类数组，只能是类数组中的某个元素
var vm = new Vue({
el:'#app'
})
var app = document.querySelector('#app');
var vm = new Vue({
el:app
})
挂载完毕后可以用vm.$el进行访问
var vm = new Vue({
el:'#app'
})
console.log(vm.$el)
- 未设置el的vue实例，可以通过vm.$mount()进行挂载，参数形式与el规则相同
<!-- 挂载元素 -->
<div id="app"></div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'
})
console.log(vm.$el);
var app = document.querySelector("#app");
var vm = new Vue({
el:app
})
console.log(vm.$el);
var app = document.getElementById('app');
var vm = new Vue();
// vm.$mount('#app');
vm.$mount(app);
console.log(vm.$el);
</script>
插值表达式
- 挂载元素可以使用Vue.js模板语法，模板中可以通过插值表达式进行动态内容设置，写法是{{}}
注意：
· 插值表达式只能书写在标签内容区域，可以与其他内容混合
· 内部只能书写JavaScript表达式，不能写语句
<div id="app">
<ul>
<li>第一段示例内容：{{10 + 10 + 29}}</li>
<li>第二段示例内容：{{ 22 > 3 ? '22比2大':'22比3小'}}</li>
<!-- <li id="{{ 1+2}}"></li> -->
<!-- <li>{{ var num = 10; }}</li> -->
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
data选项
-
用于存储vue实例需要使用的数据，值为对象类型。
data本质就是存储数据
data中可以存储对象，可以存储一个或多个数据以供视图操作
操作数据：
data中的数据可以通过 vm.$data数据 或者 vm.数据 访问
data中的数据可以直接在视图中通过插值表达式访问
data中的数据是响应式数据，发生改变时，视图自动更新
data中存在数据时，索引操作与length操作无法自动更新视图，可以借助Vue.set()方法替代操作。
<div id="app">
<!-- <p>{{ title }}</p> -->
<ul>
<li>{{ arr[0] }}</li>
<li>{{ arr[1] }}</li>
<li>{{ arr[2] }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
// title:'标题文本'，
arr : ['内容1','内容2','内容3']
}
})
// vm.arr.pop()数组的操作依旧可以实现，但是length和索引功能无法使用
Vue.set(vm.arr,1,'这是新的内容')
// vm.title = '这是新文本'
// 访问data数据
console.log(vm.$data.title);
console.log(vm.title);
</script>
method 选项
用于存储在vue实例中使用的函数
methods中的方法可以通过 vm.方法名 访问
方法中的this为vm实例，可以便捷的访问 vm 数据等功能
<div id="app">
<p>{{ title1.split('-').join('') }}</p>
<p>{{ title2.split('-').join('') }}</p>
<p>{{ fn(title1) }}</p>
<p>{{ fn(title2) }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
prefix:'处理结果为：',
title1:'a-b-c-d-e',
title2:'x-y-z'
},
methods:{
fn(value){
this.fn1();
this.fn2();
return this.prefix + value.split('-').join('');
},
fn1 () {
console.log('执行了fn1');
},
fn2 () {
console.log('执行了fn2');
}
}
})
console.log(vm);
</script>
vue.js指令
本质是HTML自定义属性，是给框架识别的标记
以 v- 开头的自定义属性都是 vue 指令
内容处理功能
v-once指令
- 使元素内部的插值表达式只生效一次
<body>
<div id="app">
<p>此内容会随着数据变化而自动变化：{{content}}</p>
<p v-once>此内容不会随着数据变化而自动变化：{{content}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:'元素内容'
}
})
</script>
v-text指令
- 元素内容整体替换为指定纯文本数据
<div id="app">
<p v-text="content">这是 p 标签的原始内容</p>
<p v-text="100">这是 p 标签的原始内容</p><!-- 一般不直接指定数值 -->
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:'文本内容',
content2:'<span>这是span内容</span>'
}
})
</script>
v-html指令
作用：
- 元素内容整体替换为指定的 html 文本
<div id="app">
<p v-html="content">这是原始内容</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
// content:'这是新内容',
content:'<span>这是span内容</span>'
}
})
</script>
属性绑定
v-bind指令
动态绑定HTML属性
与插值表达式类似，v-bind中也允许使用表达式
如果一次绑定多个属性，还可以绑定对象
<div id="app">
<p v-bind:title="myTitle">这是p标签内容</p>
<p :title='myTitle'>这是p标签的内功</p>
<p :class="'num'+ 1 + 2 + 3">111</p>
<p :class="prefix + num">222</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
myTitle:'这是属性',
prefix:'demo',
num:10
}
})
</script>
<div id="app">
<p v-bind="attrObj">这是 p 标签的内容</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vn = new Vue({
el:'#app',
data:{
attrObj:{
id : 'box',
title:"市里内容",
class : "clearFix",
'datatitle': "这是data-title的内容"
}
}
})
</script>
Class绑定
class可以通过v-bind绑定，也可以与class属性共存
对于class绑定，vue.js中还提供了特殊处理方式
<div id="app">
<p v-bind:class="cls1">标签内容</p>
<p class="a" :class="cls2">标签内容</p>
<!-- 下面是错误写法 -->
<!-- <p class="a b c" :class="cls1 cls2 cls3"></p> -->
<!-- <p :class='cls'></p> -->
<!-- <p :class="bool ? cls1 : cls2"></p> -->
<p :class='{x: isX, y: false, z: true}'></p>
<p :calss='["a", classB,{c: isC}]'></p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
classB: 'B',
isC: true
// bool:'ture',
// cls:'q e w',
// cls1: 'x',
// cls2: 'y',
// cls3: 'z'
}
})
</script>
Style绑定
style 是 HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存。
当我们希望给元素绑定多个样式对象时，可以设置为数组
<div id="app">
<p :style="[baseStyle, styleObj1]">第一个 p 标签</p>
<p :style="[baseStyle, styleObj2]">第二个 p 标签</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 公共样式
baseStyle: {
width: '100px',
height: '100px'
},
styleObj1: {
backgroundColor: 'red'
},
styleObj2: {
backgroundColor: 'blue'
}
}
});
</script>
渲染指令
v-for 指令
用于遍历数据渲染结构，常用数组与对象均可遍历
使用v-for 的同时，应该始终指定唯一的 key 属性，可以提高渲染性能，避免出现绑定的错误
<div id="app">
<ul>
<li v-for="(item , index) in itemList" :key="item.id">
输入框{{ item.value }}: <input type="text">
</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
itemList: [
{
id:1,
value: 2
},
{
id: 2,
value:3
},
{
id: 3,
value: 3
}
]
}
})
</script>
- 通过<template>标签设置模板占位符，可以将部分元素或内容作为整体进行操作
<div id="app">
<!-- template无法设置key绑定，因其只是占位，并不存在 -->
<template v-for="utem in obj">
{{utem}}
<br>
</template>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
content1: '内容1',
content2: '内容2',
content3: '内容3'
}
}
})
</script>
v-show 指令
- 控制元素显示与因此，用于显示隐藏的频繁切换，布尔类型：true控制显示，false控制隐藏
注意：
<template></template>无法使用 v-show 指令
<div id="app">
<p v-show="false">标签内容</p>
<p v-show="22 > 11">标签内容</p>
<p v-show="bool">标签内容</p>
<template v-show='false'>这是内容</template>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bool: true
}
});
</script>
v-if 指令
- 用于根据条件控制元素的创建与移除
<div id="app">
<!-- 不适合用于元素的隐藏与显示，只适合元素的移除和创建，因为频繁操作DOM较消耗内存 -->
<p v-if='bool'>这是标签内容</p>
<p v-else-if="false">这是第二个p标签</p>
<p v-else-if="false">这是第三个p标签</p>
<p v-else>这是最后一个p标签</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: false
}
});
</script>
- 给使用 v-if 的同类型元素绑定各不同的 key
<div id="app">
<div v-if = "type==='username'" :key="'username'">
用户名：<input type="text">
</div>
<div v-else :key='email'>
邮箱：<input type="text">
</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: true,
type: 'username'
}
});
</script>
- 出于性能考虑 ，避免v-if和 v-for用于同一标签，v-for的优先级高于if,如果放在同一标签，for会先执行，如果执行后发现if是false，就会浪费性能
<div id="app">
<ul v-if="false">
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
items: {
content1: '内容1',
content2: '内容2',
content3: '内容3'
}
}
});
</script>
事件与表单处理
事件处理v-on指令
用于元素事件绑定
简化书写方式@click，或者@加其他的触发形式
事件代码复杂，可以在methods中设置函数，并设置为事件处理程序
设置事件后，可以接受事件对象
视图中可以通过 $event 访问事件对象
<div id="app">
<p >{{ content }}</p>
<button v-on:click="content='0这是新内容'">按钮1</button>
<button @click="content='这是这是新内容'">按钮2</button>
<button @click="fn">按钮3</button>
<!-- 传入fn2函数和实参，$event是vue规定的事件对象，不可更改 -->
<button @click='fn(200, $event)'>按钮4</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content:'这是默认内容'
},
method: {
//fn函数
fn () {
this.content = '这是按钮3设置的内容';
},
fn2(value, event) {
console.log(value, event);
}
}
})
</script>
表单输入绑定 v-model
- 用于给<input>、<textarea>以及<select> 元素设置双向数据绑定
输入框绑定
- 单行绑定input和多行输入框textarea
<div id="app">
<p>input 输入框内容：{{ value1 }}</p>
<input type="text" v-model="value1">
<p>input 输入框内容：{{ value2 }}</p>
<input type="text" v-model="value2">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value1: '',
value2: ''
}
});
</script>
单选按钮绑定
单选按钮双向数据绑定
- input 标签中type为radio的元素，把多个同一组的单选按钮绑定为同一值
<div id="app">
<!-- p中展示的值就是单选框中value的值 -->
<p>radio的值为{{ value3 }}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">按钮1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="tow">按钮2</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value3: ''
}
});
</script>
复选框绑定
<div id="app">
<!-- 单个复选框进行双向数据绑定的演示 -->
<!-- 单个复选框选中时，绑定展示的数据是true和false -->
<p>单个复选框的值：{{ value4 }}</p>
<input type="checkbox" id="one" v-model="value4">
<label for="one">选项1</label>
<!-- 多个复选框进行双向数据绑定的演示 -->
<!-- 多个复选框选择，选中时，value5展示的是数组的值 -->
<p>多个复选框的值：{{ value5 }}</p>
<input type="checkbox" id="cb1" value="选项1" v-model="value5">
<label for="cb1">选项2</label>
<input type="checkbox" id="cb2" value="选项2" v-model="value5">
<label for="cb1">选项3</label>
<input type="checkbox" id="cb3" value="选项3" v-model="value5">
<label for="cb1">选项4</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value4: '',
value5: []
}
});
</script>
选择框绑定
- 单选绑定和多选绑定
<div id="app">
<!-- 单选选择框 -->
<p>单选选择框的内容： {{value6}}</p>
<select name="" id="" v-model="value6">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多选选择框 -->
<p>多选选择框的内容：{{ value7 }}</p>
<!-- 多选框要加一个mutiple属性 -->
<select name="" id="" v-model="value7" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 单选选择框数据
value6: '',
// 多选选择框数据
value7: []
}
});
</script>
v-model指令小结
设置数据时，可以设置为空字符串或者空数组
input：绑定字符串值
textarea：绑定字符串值
radio：绑定字符串值
checkbox：单个绑定布尔值，多个绑定数组
select：单选绑定字符串，多选绑定数组
修饰符
以点开头的指令后缀，用于给当前指令设置特殊操作
事件修饰符
**.prevent修饰符，用于阻止默认事件行为。**
<div id="app">
<a @click.prevent="fn" href="https://kaiwu.lagou.com">链接</a>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn () {
console.log('这是 a 链接的点击事件');
}
}
});
</script>
**.stop修饰符 用于阻止事件传播 防止冒泡，相当于event.stopPropagation()**
<div id="app">
<div @click="fn1">
<!-- 阻止事件冒泡 -->
<!-- <button @click.stop = "fn2">按钮</button> -->
<a @click.prevent.stop = "fn2" href="https://kaiwu.lagou.com">链接</a>
</div>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn1 () {
console.log('div事件');
},
fn2 () {
// console.log('button事件');
console.log('a事件');
}
}
})
</script>
** once修饰符 用于设置事件只会触发一次**
按键修饰符
按键码是将按键的按键码作为修饰符使用以表示按键的操作方式
除了内容按键还有特殊按键如esc，enter、delete等功能按键，应首选内置别名，方便兼容。
如: .esc .enter .tab .delete. .space .up .down .left .right
<div id="app">
<!-- <input type="text" @keyup="fn"> -->
<!-- 97是数字1的keycode -->
<!-- <input type="text" @keyup.97="fn"> -->
<!-- 也可以直接用按键代替 -->
<input type="text" @keyup.a="fn">
<input type="text" @keyup.esc="fn">
<!-- 表示几个按键有一个按下即可，或的关系 -->
<input type="text" @keyup.esc.a.b.c="fn">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
// e和event等价
fn(e) {
console.log(e);
console.log("输入了相应代码");
}
}
});
系统修饰符
ctrl、 alt、 shift系统按键，系统按键与其他按键组合使用
系统修饰符ctrl修饰符、 alt修饰符 、 shift修饰符
.exact修饰符允许控制有精确系统修饰符组合触发事件
<button v-on:click.ctrl.exact='onclick'>按钮</button>
<div id="app">
<!-- <input type="text" @keyup.17.q="fn"> -->
<input type="text" @keyup.ctrl.q="fn" v-model='inputValue'>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
// console.log(event);
this.inputValue = '';
}
}
});
</script>
鼠标修饰符
- 可以决定由鼠标哪个鼠标按键完成
分为.left左键 .right右键 .middle中键
<div id="app">
<button @click.left="fn">按钮1</button>
<button @click.right="fn">按钮2</button>
<button @click.middle="fn">按钮3</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log('点击了元素');
}
}
});
</script>
v-model修饰符
- .trim修饰符
用于自动过滤用户输入的首尾两端的空格 - .lazy修饰符
用于将v-model触发方式由 input 事件触发更改为 change 事件触发（指定操作触发） - .number 修饰符
用于自动将输入内容转换为数值，如 无法被parseFloat()转换，返回原始内容
自定义指令
- 简化dom操作，相当于对dom操作的一种封装，通过自定义指令，封装一些dom功能
自定义全局指令
- 可以被任意 vue 实例或组件使用的指令
<div id="app">
<!-- v-focus是调用指令，.a.b是给binding绑定信息 -->
<input type="text" v-focus.a.b="100+100">
</div>
<script src="lib/vue.js"></script>
<script>
// 自定义全局指令，focus是指令的类型，directive是单数形式
Vue.directive("focus",{
// inserted是指插入元素时，执行回调函数
inserted(el, binding) {
// 打印绑定信息，绑定信息有很多属性
console.log(binding);
// 执行焦点函数
el.focus();
}
});
new Vue({
el: '#app',
data: {
}
});
</script>
自定义局部指令
- 在当前 vue实例或者组件内使用的指令
钩子函数：
bind：只调用一次，指令第一次绑定到元素使用
inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）
update：所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前，指令的值可能发生了改变，也可能没有
但是可以通过比较更新前后的值来忽略不必要的模板更新
<div id="app">
<input type="text" v-focus>
</div>
<div id="app2">
<input type="text" v-focus>
</div>
<script src="lib/vue.js"></script>
<script>
// 自定义局部指令
new Vue({
el: '#app',
data: {},
//这里是复数
directives:{
//注意此处指令名称没有双引号了
focus: {
inserted(el) {
el.focus();
}
}
}
});
//新定义的就不会挂载自动获取焦点功能
new Vue({
el:'#app2'
})
</script>
过滤器
全局过滤器
用于进行文本内容格式化，可以在插值表达式和 v-bind 中使用
全局过滤器可以在任意 vue 实例中使用
过滤器通过管道符 | 连接数据
可以将一个数据传入到多个过滤器中处理
<div id="app">
<!-- 执行顺序是从前往后一次执行过滤器,前面过滤器执行完毕之后将值传给后面的过滤器 -->
<!-- <p>{{ aaa | filterA | UpperCase }}</p> -->
<!-- 这里filter中的第一个参数始终是管道符前的变量，后面会依次作为第二个第三个参数传入 -->
<!-- <p>{{ aaa | filterC("abc","lagou-",200) }}</p> -->
</div>
<script src="lib/vue.js"></script>
<script>
// Vue.filter('filterA', function (aaa) {
// console.log(aaa);//a-b-c
// return aaa.split('-').join("");
// });
// // 过滤器是可以改名字的
// Vue.filter('UpperCase',function (aaa) {
// console.log(aaa);//abc
// return aaa[0].toUpperCase() + aaa.slice(1)
// });
Vue.filter("filterC",function (par1,par2,par3,par4) {
return par1 + par2.split('-').join("") + par3 + par4;
// console.log();
})
new Vue({
el: '#app',
data: {
aaa:'a-b-c'
}
});
</script>
局部过滤器
- 只用在当前 vue 实例中
注释中写了很多有用的东西
<div id="app">
<!-- <p>{{ content | filterA}}</p>
<p>{{ content2 | filterA}}</p> -->
<p>{{ content | filterA | filterB}}</p>
<p>{{ content | filterA | fliterC('lagou-')}}</p>
</div>
<!-- <div id="app2">
<p>{{ content | filterA }}</p>
</div> -->
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: 'a-b-c',
content2: 'x-y-z'
},
// 局部过滤器需要filters，复数
filters: {
filterA : function (value) {
return value.split('-').join("");
},
filterB : function (value) {
return value.split('').reverse().join('');
},
// 接收多个参数
fliterC (value,prefix) {
//记住第一个参数一定是管道符前的内容
// return value + prefix;
return prefix + value;
}
}
});
new Vue({
el: '#app2',
data: {
content: 'q-w-e'
}
})
</script>
全局过滤器与局部过滤器共同存在且 重名 的情况，局部过滤器 生效，可以利用此方法层叠掉不用的过滤器
计算属性
vue.js 视图不建议书写复杂逻辑，这样不利于维护
计算属性使用时为属性形式，访问是自动执行对应函数
方法名就是计算属性的属性名称，功能就是函数执行的操作
<div id="app">
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{getResult}}</p>
<p>{{getResult}}</p>
<p>{{getResult}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
getSum () {
console.log('执行了函数功能');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
},
computed: {
getResult () {
console.log('执行了计算属性');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
}
})
</script>
-
method与computed区别
· computed 具有缓存性，每次计算之后缓存结果，methods没有
· computed 通过属性名访问，methods需要调用
· computed 仅适用于计算操作
计算属性的setter
计算属性默认只有getter，vue.js也允许给计算属性设置setter
用于给comtped进行赋值和获取
<div id="app">
<p>{{ fullName }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三'
},
computed: {
// 默认书写方式
// fullName () {
// return this.firstName + this.lastName;
// }
// 分开书写getter和setter
fullname () {
get() {
return this.firstName + this.lastName;
},
set(newName) {
var nameArr = newName.split(" ");
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
}
});
</script>
侦听器
用于监视数据变化并执行操作
为了监听对象内部值的变化，需要将watch书写为对象，设置deep：true，这是通过handler设置处理函数
注意：
- 当更改（非替换）数组或对象时，回调函数中新值与旧值相同，因为他们的引用都指向同一数组、对象。
- 数组操作不要使用length和索引，无法触发侦听器函数
<div id="app">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
title:'这是普通内容',
obj:{
content1:'内容1',
content2:'内容2'
}
},
watch: {
//修改title内容
title(val,oldval) {
console.log('title被修改了',val,oldval);
},
//无法监听对象内部值的变化
// obj (){
// console.log('obj 被修改了');
// }
// 可以将函数改写为对象形式
obj: {
//必须设置监听器为deep：true才能监听对象内部
deep:true,
handler (val,oldVal) {
console.log('obj被监听了',val,oldval);
console.log(val === oldval);//true
}
},
// arr在监听中，length和索引是不生效的，且可以不用deep:true,
arr: {
deep:true,
handler (val,oldVal) {
console.log('arr修改了',val,oldVal);
}
},
// 与上面等价
// arr(val,oldVal) {
// console.log('arr修改了',val,oldVal);
// }
}
});
</script>
Vue DevTools
- 是vue.js官方提供的用来调试vue应用的工具
注意：网页必须应用了vue.js功能才能看到
网页必须使用了vue.js而不是vue.min.js
网页必须在http协议下打开，而不是使用 file 协议本地打开
vue.js生命周期
- 实例从创建到运行，再到销毁的过程
生命周期函数（钩子）
-
创建阶段：
· beforeCreate：实例初始化之前调用（很少用）· created： 实例创建后调用,data和methods创建完毕后 -- 数据请求和操作
· beforeMount：实例挂载钱调用，页面模板未渲染
· mounted： 实例挂载完毕，可执行dom操作。
特点：每个实例只能执行一次 -
运行阶段：
· beforeUpdate：数据更新后，视图更新前调用。· updated：视图更新后调用
特点：按需调用
-
销毁阶段：
· beforeDestroy:实例销毁之前调用· destroy：实例销毁之后调用
