|
|
vue知识点总结
作者其他创作
大纲/内容
第一章 Vue.js入门
什么是vue
它是一个构建用户界面的渐进式框架，渐进式是指用一部分拿一部分无需全部整合
为什么使用vue
双向绑定更新页面，更加高效快捷，无需频繁操作DOM元素
vue的特点
轻量高效
组件化
前端路由
状态管理
虚拟Dom
MVVM
Model View ViewModel
数据 视图 Model和View数据绑定的桥梁
使用vue理解MVVM
Dom Listener：监听Dom元素变化，更新Model数据
Data Bindings：Model数据更新时，更新Dom元素
vue的响应式：即时响应，一一绑定
Observer：数据监听
Compile:指令解析
Watcher：作为连接Observer和Compile的桥梁
第二章 第一个Vue.js应用
Vue.js的使用
（1）将Vue.js下载到本地，将文件放置到项目目录，通过代码引入
<script src="vue.js" type="text/javascript"></script>
（2）使用CDN引入Vue.js
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">
</script>
</script>
（3）通过NPM安装（不常用)
实例与选项
new vue{}
data:数据
methods：方法
computed：计算属性
数据绑定
（1）插值
（2）表达式绑定
（3）v-model双向数据绑定
（4）过滤器
计算属性
（1）使用的环境
计算表达式过于复杂时，计算属性可提高可读性和降低维护难度
（2）传参
setter/getter
用get获取data中数据，将data中的字符串数据合并后显示，函数无参数
用set将合并后的数据用空格分割，分别赋值给data中的不同部分
（3）computed vs method
当计算属性依赖的数据发生了变化时，会立即进行计算，并对计算结果进行自动更新，
计算属性的求值结果会被缓存起来
计算属性的求值结果会被缓存起来
生命周期
方法名
含义
beforeCreate(创建前)
在实例初始化之后，在数据观测(DataObserver)和 event/watcher事件配置之前被调用
created(创建完毕)
在实例创建完成后被立即调用，此时已完成数据绑定和事件配置，但尚未生成DOM
beforeMount(挂载前)
在挂载开始之前被调用，且在服务器端渲染期间不能被调用
mounted(挂载结束)
在挂载之后被调用，且在服务器端渲染期间不能被调用
beforeUpdate(更新前)
当数据发生变化时调用，此时DOM 结构尚未完成更新，且在服务器端渲染期间不能被调用
updated(更新完成)
实例和DOM 结构完成更新后被调用，在服务器端渲染期间不能被调用
beforeDestroy(销毁前)
在Vue 实例销毁之前调用，此时实例仍然可用，在服务器端渲染期间不能被调用
destroyed(销毁完成)
在Vue 实例销毁之后调用，Vue实例指示的所有实例指令和子实例都会解绑定，所有的事件监听器都会被移除，在服务器端渲染期间不能被调用
第三章 vue.js内置指令
基本指令
v-text
v-text 主要用来更新 textContent，将实例中的数据当作纯文本输出，可以等同于 JavaScript 的 text 属性
v-html
v-html 会将实例中的数据当作 HTML标签解核听后输出，它等同于 JavaScript 的 innerHtml 属性
v-cloak
v-cloak指令用于显示 当数据未解析完成时渲染的样式
v-once
v-once 指令只需渲染元素和组件一次， 都会被当作静态内容并跳过
v-if
v-if 指令可以实现条件渲染
v-else
v-else 指令是搭配 v-if 指令使用的，它必须紧跟在 v-if或 v-else-if后面，否则不起作用
v-show
v-if和v-show的区别是带有v-show的元素会始终被渲染并保留在DOM中
v-on
v-on 指令是用来绑定事件监听器的
v-on:click可以简写成@click
使用的 event.preventDefault()也可以替换为 Vue 提供的事件的修饰符，具体使用方法为@绑定的事件+小圆点“.”+一个修饰符
(1).stop:阻止单击事件冒泡<a v-on:click.stop="doThis"></ a>
(2).prevent:提交事件不再重载页面<form v-on:submit.prevent="onSubmit"></form>修饰可以串联，<a v-on:click.stop.prevent="doThat"></ a>
(3).capture:添加事件监听器时使用事件捕获模式<div v-on:click.capture="doThis">...</div>
(4).self:事件在该元素本身(如不是子元素)触发时触发回调<div v-on:click.self="doThat">...</div>
(5).once:单击事件只会触发一次<a v-on:click.once="doThis"></ a>
v-for
用来遍历数组或对象，表达式需结合in来使用
数组更新
变异方法
push()
添加元素
pop()
删除最后一个元素
shift()
删除第一个元素
unshift()
在数组最前面添加一个元素
splice()
插入、删除或替换数组中的元素
sort()
排序（升序）
reverse()
排序（降序）
非变异方法
filter()
数组过滤
contant()
数组拼接
slice()
数组分割
map()
数组计算
include()
判断数组内容包含
foreach()
遍历数组
v-bind数据属性绑定
语法：v-bind：属性名
<div :class="[activeCls,errorCls]">今天天气真好啊！</div>
<img :src="imgSrc" :alt="alt" :title="title">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">你好，胡颖</div>
实现class的动态切换，方便后期维护
v-model（双向绑定）
监听用户输入事件，更新数据
v-model可以用于
input标签
<p>选择的选项是:{{picked}}{{checked}}</p>
<input type="radio" name="" id="" value="JS" :checked="checked" v-model="picked">JS
<input type="radio" name="" id="" value="JS" :checked="checked" v-model="picked">JS
textarea标签
select标签
<p>你的年龄是:{{selected}}</p>
<select name="" v-model="selected"></select>
<select name="" v-model="selected"></select>
v-model绑定的值通常是静态字符串，如果想绑定到实例的动态属性，可以使用v-bind来实现
修饰符
.lazy
当输入框处于非活动状态时才更新显示，减少页面刷新次数
.number
自动将用户输入值转换为数值类型（可直接进行数值计算），同时限制用户只能输入数字
.trim
自动帮用户过滤首尾空白字符
第四章 Vue.js组件
组件的功能：扩展HTML元素、封装可用代码
全局组件
可直接使用component方法，全局注册组件
语法：Vue.component(tagName,options)
tagName为组件名
options为配置选项
调用组件：<tagName></tagName>
敏捷与数字化
局部组件
在vue实例中添加了一个components选项，即在实例中注册局部组件
只能在app实例中，其他实例中无法使用该组件
组件中的data
my-component组件中data不是一个对象，而是一个函数
data是一个对象，可影响其他实例，js对象是引用类型的
return外部对象是会被分享的，需为每个组件返回一个新对象
data是一个函数时，对其内实例操作不会影响到其他实例
使用template创建组件
组件内元素写在<template></template>
template内只能有一个根节点
每个标签代表一个组件，一旦注册成功即可复用
组件嵌套
把组件与组件嵌套，以标签形式调用子组件
用父组件<parent></parent>嵌套<mychild1></mychid>........
子传父
收藏
收藏
0
条评论
下一页
为你推荐
查看更多
