基础概念
1 渐进式框架 (适用于可大可小的项目)
2 优点 -- 运行效率高 (虚拟DOM, 减少dom操作)
3 优势 -- 开发效率高, 生态比较完善 (组件化开发)
4 特点 -- 将开发者的精力从操作dom解放出来, 主要关注数据的变化
5 使用 -- 引入或下载Vue框架
6 组件化的好处: 便于维护 + 可复用
Vue实例配置项
1 常见配置项
-------------------------------------------------------------------------------------
el: "#hh", 关联指定元素 -- 只能用于根组件
data: {
..}, 存放该实例数据
methods: {
..}, 定义实例方法的配置项
computed: {
..}, 计算属性 -- 调用的时候不需要加小括号
components: {
} 注册局部组件
filters: {
..} 过滤器 -- 用来格式化文本数据的
watch: {
} 数据监听器
钩子函数等等...
-------------------------------------------------------------------------------------
2 配置项说明
-------------------------------------------------------------------------------------
1 过滤器
{
{
message | hh("棒棒糖")}}
局部使用 -> 第一个参数 == 要过滤的数据; 第二个参数 == 过滤器后面传入的实参
filters: {
hh(mes, V) {
return mes + "我喜欢你"}}
全局使用 -> 过滤器返回的值就是, 过滤器格式化之后的文本
Vue.filter('hh', function(mes, V) {
return mes + "是个大憨憨"})
2 计算属性
<p> CAN {
{
a1 + a2}} </p>
<p> CAN {
{
hh}} </p>
data: {
a1: 500, a2: 20 },
computed: {
hh () {
return this.a1 + this.a2 }}
3 computed 和 methods 的区别
computed 第一次调用会缓存数据, 多次调用只执行一次, 发现数据变化也会动态同步; 优势效率高
methods 每次调用, 都会执行一次函数内部的代码
4 监听器
1 作用 -- 主要用于监听 -- 声明式变量 -- 计算属性 -- 路由的变化
2 监听普通数据的变化 (Vue实例配置项)
data: {
num: 6 }
watch: {
num: function(news, old) {
..}}
3 监听对象数据的变化
data: {
obj: {
str: "CAN"}}
watch: {
obj: function(new, old) {
..}}
watch: {
'obj.str': function() {
}}
watch: {
obj: {
handler: function(news, old){
}}, deep: true, immediate: true}
4 项目启动时候, 不需要监听, 触发某个事件之后监听
点击触发事件 <button @click="ck1"></button>
methods: {
ck1(){
this.$watch('num', function(news, old){
} ) } }
methods: {
ck1(){
this.$watch('num', function(news, old){
}, {
deep: true, })}}
入门指令
1 指令说明
1 说白了就是标签的自定义属性
2 指令后面的值可以是变量或表达式
2 插值操作
1 展示 data变量或表达式 -- <p>{
{
message }}</p> -- 常用
2 更新元素的 innerHTML -- <p v-html="a1"></p> -- 常用
3 更新元素的 innerText -- <p v-text="message"> </p> -- 不常用
4 只会第一次取到数据区渲染,渲染完就不管了 -- <h2 v-once> {
{
message }} </h2> -- 不常用
5 让改标签不识别 Mustache 语法, 直接按照原有格式显示 -- <h2 v-pre> {
{
message }} </h2>-- 不常用
6 解决 {
{
msg}} 数据加载慢出现闪动的情况 -- <div id="app" v-cloak> {
{
message }} </div>-- 不常用
7 解决闪动 -- <style> [v-cloak] {
display: none} </style>
3 绑定属性 (v-bind -> :)
1 <img :src="imgURL" alt=""> 可以通过data数据结合表达式控制属性值
2 <h2 :style="{color: xx1, height: '100px'}"> </h2> 动态绑定样式
3 <h2 class="hh" :class="{b1:b1x, b2:b2x}"> </h2> 对象语法--绑定类名 b1 + b2; 可和原来的类名共存
4 <h2 :class="getClass()"> </h2> 优化写法 == 通过函数 return 一个对象
5 <h2 :class="[b1, b2]"> </h2> 数组语法 == 添加多个类名 -- 不常用
6 <h2 :style="[x2, x3]"> </h2> 动态绑定样式--数组语法--不常用 x2: "color: red"
4 事件监听 (v-on: -> @)
1 没有参数或者只需要事件对象, 可以省略小括号 -- 多个参数 $event 实参代表事件对象
2 例子
1 <p @click="fn"></p> 省略括号
2 <p @click="fn(v, i)"></p> 传参
3 <p @click.prevent="fn"></p> 修饰符
3 事件修饰符
1 prevent 阻止默认行为事件
2 stop 阻止事件传播 (冒泡)
3 enter 监听是哪个键盘按键点击的, @keyup.enter==监听回车 / @keyup.13
4 native 监听组件根元素的原生事件
5 once 只触发一次回调, 就是只执行第一次事件函数; 例一个按钮只能点击一次
6 capture 设置事件流为捕获
7 self 事件必须发生在自己身上才会执行 -- 事件流触发不了这个
8 .ctrl和.shift是功能键盘，注意参考文档去使用
5 显示隐藏元素
1 v-if 后面的值为 true 的时候渲染元素; 为false的时候删除元素 (适用于切换次数少的)
2 v-else 跟在v-if 后面的, 不显示 v-if 的时候显示它
3 v-show 后面的值为 true 的时候显示元素; 为false的时候隐藏元素 (display: none;)
6 循环遍历
1 概括
1 可以遍历对象
2 :key="i" 确保唯一性
2 代码
1 <li v-for="v in arr1"> {
{
v}} </li>
2 <li v-for="(v, i) in arr1" :key="i"> {
{
v}} </li>
3 注意 -- 除了以下方法 -- 其他方式修改数组 -- 不会动态更新页面展示的数据
push() / pop() / shift() / unshift() / splice() / sort() /
reverse() / Vue.set() / 直接赋值一个新的数组
7 数据双向绑定
1 作用 -- 让表单值和组件数据动态同步的
2 code -- <input type="text" v-model.trim.lazy="msg"> 可用多个修饰符
3 表单修饰符
1 .trim 用于去除掉表单值首尾空字符串
2 .number 用于把字符串转化成Number类型
3 .lazy 是一个性能优化的小技巧，当表单失焦时才同步更新声明式变量
4 单选框 --
1 绑一样的 v-model 就把这俩个关联起来了 -- sex就是用户取的值 -- 记得加value属性 -- 默认sex==1
2 <input type="radio" value="1" v-model='sex'>
3 <input type="radio" value="2" v-model='sex'>
5 多选框
1 也是绑定相同的 v-model + 唯一的 value值 (点勾了 fav数组就存在该项, 不点了就没有 -- 记住定义fav空数组偶)
2 工作中多选按钮也是通过又一个数组渲染出来的
8 自定义指令
自定义全局指令
Vue.directive( 'hh', {
inserted: function(e) {
功能实现} } )
自定义局部指令
directives: {
hh: {
inserted: function(e) {
功能实现} } }