vue概述
渐进式JavaScript框架
声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
vue基本使用
vue模板语法
前端渲染方式
- 原生JS拼接字符串
- 使用前端模板引擎
- 使用vue模板语法
指令
指令的本质就是自定义属性，以v-开头
- 数据绑定指令
- v-text 填充纯文本，相比于插值表达式更加简洁
- v-html 填充html片段，存在安全问题
- v-pre 填充原始信息
- 数据响应式
- 如何理解响应式？在H5中为屏幕尺寸变化导致样式的变化，数据的响应式为数据变化导致页面内容的变化
- 数据绑定，将数据填充到标签中
- v-once，只编译一次，显示内容后不再具有响应式功能
双向数据绑定 v-model
<input v-model="test">
<input :value="test" @input="test = $event.target.value">
事件绑定
v-on 指令用法 <input v-on:click='xxx' />
v-on 简写形式 <input @click='xxx' />
直接绑定函数名称 <button v-on:click='say'>hello</button>
调用函数 <button v-on:click='say()'>hello</button>
普通参数和事件对象 <button v-on:click='say('hi',$event)'>hello</button>
如果事件直接绑定函数名称，那么默认会传递事件对象作为函数的第一个参数；如果事件绑定函数调用，那么事件对象必须作为最后一个参数显式传递。
修饰符
- 事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认行为
.capture.self.once.passive
- 按键修饰符
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
- 自定义按键修饰符
属性绑定
vue动态处理属性：v-bind <a v-bind:href='url'>跳转</a> ; 缩写形式 <a :href='url'>跳转</a>
Class样式绑定
- 对象语法
<div v-bind:class="{active:is Active}"></div> - 数组语法
<div v-bind:class="[activeClass,errorClass]"></div>
对象绑定和数组绑定可以结合使用；class绑定的值可以简化操作，可以用对象来存储多个类；默认的class会被保留。
Style样式处理
- 对象语法
<div v-bind:style="{color: activeColor}"></div> - 数组语法
<div v-bind:style"[baseStyle,...]"></div>
分支结构
- v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
- v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
循环结构
- v-for
<li v-for="item in items"> - key 的作用
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM
基础案例
tab 选项卡
<div id="app">
<div class="tab">
<ul>
<!--
1、绑定key的作用 提高Vue的性能
2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
index 也是唯一的
3、 item 是 数组中对应的每一项
4、 index 是 每一项的 索引
-->
<li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
</ul>
<div :key='item.id' v-for='(item, index) in list'>
<!-- : 是 v-bind 的简写 绑定属性使用 v-bind -->
<img :src="item.path">
</div>
</div>
</div>
<script>
new Vue({
// 指定 操作元素 是 id 为app 的
el: '#app',
data: {
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
}, {
id: 2,
title: 'orange',
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
}
})
</script>vue常用特性
表单操作
通过v-model 获取单选框中的值
<!--
1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
gender 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 的单选框选中
gender: 2,
},
})
</script>自定义指令
自定义指令规则（获取元素焦点）
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。 其中 el为dom元素
inserted: function (el) {
// 聚焦元素
el.focus();
}
});自定义指令规则
// bind - 只调用一次，在指令第一次绑定到元素上时候调用
Vue.directive('color', {
// bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
// el 为当前自定义指令的DOM元素
// binding 为自定义的函数形参 通过自定义属性传递过来的值 存在 binding.value 里面
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
});局部指令,在vue实例中里面添加：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}计算属性
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function(){
return xxx;
}计算属性是基于它们的依赖就行缓存的，方法不存在缓存
过滤器
vue.filter('过滤器名称',function(value){
xxx;
})- Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
- 过滤器可以用在两个地方：双花括号插值和v-bind表达式。
- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
- 支持级联操作
- 过滤器不改变真正的
data，而只是改变渲染的结果，并返回过滤后的版本 - 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
侦听器 watch
- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操作
- watch 中的属性 一定是data 中 已经存在的数据
- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
案例：验证用户名
vue项目目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。静态资源目录，如图片、字体等。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
综合案例
图书管理