完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ
MVVM设计思想
- M（model）
- V（view）
- VM（View-Model）
V M交互通过VM（DOM 监听 数据绑定）
helloworld入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式 支持简单的表达式计算字符串拼接等 -->
<div>{{msg}}</div>
<div>{{1 + 2}}</div>
<div>{{ msg + '后面可以拼接字符串哦'}}</div>
</div>
<script>
var vm = new Vue({
/* 挂载位置 */
el: '#app',
/* 模型数据 */
data: {
msg : 'hello world!!'
}
});
</script>
</body>
</html>
运行原理
- 编译：vue语法->原生语法
模板语法
概览
- 插值表达式
- 指令
- 事件绑定
- 属性绑定
- 样式绑定
- 分支循环结构
插值表达式
<!-- 插值表达式 支持简单的表达式计算字符串拼接等 -->
<div>{{msg}}</div>
<div>{{1 + 2}}</div>
<div>{{ msg + '后面可以拼接字符串哦'}}</div>
指令
- 本质：自定义属性
- 格式：v-开始（v-cloak）
指令1： v-cloak
解决单纯使用插值表达式时刷新出现闪动问题（先显示{{}} 然后才被替换为数据）
-
使用方式：
-
提供样式
<style> [v-cloak]{ display: none; } </style> -
添加指令
<div v-cloak>{{msg}}</div>
-
-
原理
通过样式代码隐藏，内存替换完毕后再进行显示
指令2：v-text
数据绑定，无闪动问题（推荐）
<div v-text="msg"></div>
指令3：v-html
填充html片段
<div v-html="msg"></div>
<!--msg : "<h1>hello world!!</h1>"-->
指令3：v-pre
显示原始信息，不进行编译
<div v-pre>{{msg}}</div>
<!-- 页面显示{{msg}} -->
指令4：v-once
只编译一次，数据发生更新时不进行页面更新
<div v-once>{{msg}}</div>
- 使用场景：显示的信息后续不需要再进行修改，可以提高性能
指令5：v-model
双向数据绑定
<div>{{msg}}</div>
<div>
<input v-model="msg" type="text">
</div>
指令6：v-on
html
<div id="app">
<!-- 插值表达式 -->
<div>{{num}}</div>
<div>
<input type="button" v-on:click="num++" value="+">
<!-- 简写 -->
<input type="button" @click="num--" value="-">
<!-- 调用方法 1 默认携带$event事件对象（第一次参数）-->
<input type="button" @click="add" value="+">
<!-- 调用方法 2 不携带事件对象 必须最后一个对象显示传递名称必须$event-->
<input type="button" @click="add()" value="+">
</div>
</div>
js
<script>
var vm = new Vue({
/* 挂载位置 */
el: '#app',
/* 模型数据 */
data: {
num: 0
},
methods: {
add: function(){
/* this == vm */
this.num++;
}
},
});
</script>
事件修饰符
- .stop 阻止冒泡：阻止点击事件传递到父元素进而触发父元素的点击事件
<input type="button" v-on:click.stop="num++" value="+">
- .prevent 阻止默认行为：阻止a标签跳转
<a v-on:click.prevent="add" href="https://www.baidu.com">+</a>
-
其他
.capture- 添加事件侦听器时使用 capture 模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。.native- 监听组件根元素的原生事件。.once- 只触发一次回调。.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) --> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button> -
按键修饰符
<form>
<div>
<!-- 按删除键删除用户名 -->
<input type="text" v-model="username" v-on:keyup.delete="clear">
</div>
<div>
<!-- 按回车直接提交 -->
<input type="password" v-on:keyup.enter="submit" v-model="password">
</div>
<div>
<input type="submit" @click="submit" value="登录">
</div>
</form>
指令7：v-bind
属性绑定
<a v-bind:href="url">百度</a>
<!--url: 'http://www.baidu.com'-->
缩写
<a :href="url">百度</a>
绑定class影响样式
<!-- active类名 isActive控制是否显示标志 -->
<div :class="{active : isActive}"></div>
<div :class="[active,err]"></div>
<div :class="[{active : isActive},err]"></div>
分支指令
使用与angular类似
- v-if
- v-else
- v-else-if
- v-show
v-if 与 v-show区别
- v-if：元素是否渲染
- v-show：元素是否显示（已经渲染）
循环指令v-for
遍历数组
<ul>
<li v-for="(item, index) in fruits" :key="index" v-text="item +'----'+ index"></li>
</ul>
遍历对象（value，key，index）顺序固定
<div v-for="(f, key,index) in fruit">{{f + '----' +key + '----' + index}}</div>
v-if 和 v-for结合
<li v-if="item=='apple'"v-for="(item, index) in fruits" :key="index" v-text="item +'----'+ index"></li>
常用特性
概览
- 表单操作
- 自定义指令
- 计算属性
- 过滤器
- 侦听器
- 生命周期
表单操作
自定义指令
计算属性
抽取复杂的计算逻辑
与方法的区别：
- 计算属性基于他们的依赖进行缓存的（多次访问只会调用一次）
- 计算属性依赖于data中的数据，数据变化时被调用时会重新计算
- 方法不存在缓存
<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('')
}
}
})
过滤器
侦听器
生命周期
mounted：页面渲染完毕，此时调用后台接口