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