Vue基础知识

最新推荐文章于 2024-04-09 14:48:57 发布

蕠莀

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量416

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_45651869/article/details/107908375

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端渲染的方式：

原生js拼接字符串。缺点：不同开发人员的代码风格差别很大，不利于维护
使用前端模板引擎。优点：代码可读性明显提高了，方便后期维护。缺点：没有专门提供事件机制
vue模板。解决了前面两者的问题

标题 1 Vue的基本使用

Vue的使用步骤

需要提供标签用于填充数据<div id='app'>{{msg}}</div>
引入vue.js库文件
可以使用vue的语法做功能（创建vue实例对象）

var vm=new Vue({
  el:'#app',//数据要填充到哪个HTML标签中
  data:{msg:'数据的值'},//所有需要在html标签中填充的值都可以在这里定义一个变量
})

把vue提供的数据填充到标签中

vue实例参数分析

el：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）
{{}}：插值表达式，支持一些简单的算法
methods：定义一些方法（函数），值是一个对象

标题 2 vue模板语法

插值表达式：{{}}
指令(类似于自定义属性)
2.1 文本内容的填充

指令的格式：v-开头
v-cloak：解决插值表达式的“闪动问题”
使用步骤：
1.提供v-cloak的样式

<style>
[v-cloak]{
display:none
}
</style>

在HTML标签中添加属性v-cloak

<div id="app" v-cloak>{{msg}}</div>

“闪动问题”解决的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的值

v-text：填充纯文本，和v-cloak作用一样，但是没有闪动问题
v-html：填充HTML片段，可以解析HTML标签
v-pre：填充原始数据，不会解析插值表达式，会显示出来{{}}

  <div v-text='info'></div>//结果直接把文本内容显示出来，没有闪动问题
  <div v-html='msg1'></div>//结果是解析了msg1里面的HTML标签
   <div v-pre>{{msg}}</div>//结果是{{msg}}

2.2 数据响应式（数据和页面内容同步，改变数据，页面中的数据也跟着改变）又称为数据绑定（单向的）

v-once ：只编译一次，显示内容之后不会再进行数据响应式（再修改数据，页面的内容不会跟着数据再变化）<div v-once>{{msg}}</div>
应用场景：如果显示的信息后续不再需要修改，可以使用v-once来提高性能
v-model：双向数据绑定（主要用于表单输入域中）
概念：输入框里面的饿值改变，插值表达式里面的数据也会跟着改变，插值表达式的数据改变，输入框的value值也会跟着改变
示例代码：

    <div>{{msg}}</div>
    <input type="text" v-model='msg'>//结果是两者跟随变化

实现的原理：MVVM设计思想，视图中的数据改变，通过事件监听改变模型中的数据，模型中的数据改变通过事件绑定改变视图中的数据

2.3 v-on：事件名或者 @事件名：事件绑定

在html标签中的使用示例代码：

 <div v-text='num'></div>
  <button v-on:click='num++'>点击</button>
  <button @click='handle'>点击1</button>
  <button @click='handle()'>点击2</button>

在vue实例对象中定义方法的示例代码：

 var vm=new Vue({
            el:'#app',
            data:{
                num:0,
            },
            methods:{//定义的都是一些方法（函数）
                handle:function() {
                    this.num++//在这里想要使用data里面的数据，必须加上this关键字，this指向vue实例对象
                }
            }
        })

注：函数中的this指的是Vue实例对象，在函数中要想访问data里面的数据必须加上this关键字才能使用

2.4 事件绑定—事件传参（$event.target是当前的事件源对象，比如绑定的是button点击事件，那么获取的就是button这个对象）

不加小括号，默认第一个参数是事件对象$event,需要函数用形参接收

//1.html代码
<button @click='handle'>点击</button>
//2.vue实例对象中的methods方法中的函数代码
 methods: {
          handle:function(event) {
            console.log(event.target);//打印结果是<button>点击</button>
     },

加有小括号进行函数调用，默认情况下如果用到事件对象，必须写在最后一个参数，传入实参的时候，事件对象必须写成$event，而且必须写在参数的最后

//1.html代码片段
<button @click='handle1(123,456,$event)'>点击1</button>
//2.vue实例对象中的代码
methods:{
  handle1:function(p1,p2,event) {
            console.log(p1,p2,event.target);
          }
  }

2.5 事件修饰符: 写在事件名的后面

.stop阻止事件冒泡：<a v-on:click.stop='handle'>跳转</a>
.prevent阻止事件默认行为：<a href="http://www.baidu.com" @click.prevent='handle1'>跳转</a>
链式方式来写：.stop.prevent：既阻止了冒泡又阻止了默认
.self：不能通过事件冒泡来触发，只能通过触发元素本身来触发

2.6 按键修饰符（也是写在事件名的后面）

.enter 回车修饰符
.delete 删除修饰符
Vue.config.keyCodes.自定义修饰符名=按下键的键盘码值：自定义按键修饰符Vue.config.keyCodes.a=6565这样的键盘码可以通过事件对象的event.keyCodes得到

属性绑定

v-bind:属性名=‘data中定义好的要修改的值’指令，简写方式是：属性名=‘’
数据双向绑定v-model实现的原理
利用属性绑定，来绑定value，让表单中的value跟随data属性改变，利用input事件绑定，执行让data中定义的数据和修改的数据保持一致

//属性绑定和事件绑定
<input type='text' v-bind:value='msg' @input='msg=$event.target.value'>

样式绑定
4.1 .class样式处理

样式绑定主要有两种方式，一种是对象绑定，一种是数组绑定
1.对象绑定：对象中的值分别代表的是：第一个值代表样式定义中的类名，第二个值代表是data属性中定义的，一般是布尔值，用来决定这个类名是否存在

//1.样式结构
.active{font-size:14px}
//2.html结构
<div v-bind:class='{active:istrue}'>测试样式</div>
//3.vue实例对象中的结构
var vm=new Vue({
  el:'#app',
  data:{
  istrue:true,//表示类名存在，false表示类名不存在，这里写布尔值
  }
})

数组绑定
参数解析：[数值1，数值2] 数值1 ：代表data属性中的变量名，值是样式中定义好的类名。数值2：data属性名，值是类名

//1.css样式
<style>
  .test {
  width:100px;height:100px;
  }
  .active{
  background-color:pink
  }
</style>
//2.html结构
<div v-bind:class='[testClass,activeClass]'>测试样式</div>
//testClass和activeClass在data中定义好了
//3.vue结构
var vm=new Vue({
    el:'#app',
    data:{
    testClass:'test',//这里的值是类名
    activeClass:'active'//值是类名
    }
})

如果数组中的两个类名中有重合的样式，那么后者会覆盖前者的样式
相关细节：

1.对象绑定和数组绑定可以结合使用
两者可以结合使用，但是对象绑定要写在数值的里面

<div :class='[testClass,activeClass,{active:istrue}]'></div>//结果是这个div包含三个类名，分别是testClass、activeClass和对象绑定所对应的类名

2.class绑定的值可简化操作
具体的操作步骤是在data中声明对象或者数组，利用变量名直接放在需要填充的标签中即可

//1.html结构
<div :class='objClass'></div>//对象绑定
<div :class='activeClass'></div>//数组绑定
//2.vue中data属性
data:{
//对象绑定的简化写法
    objClass:{
        active:true,
        test:true,
       },
 //数组简化写法
 activeClass:['test','active']//在html标签中填充的时候，只需要写activeClass即可
}

3.默认的class如何处理
如果是标签身上默认的class，那么在通过v-bind绑定样式的时候，默认的class样式会保留
4.2 .style样式处理（绑定行内样式）
用法和class样式处理相同，只是class变成了style

<div :style='{active:istrue}'>绑定对象</div>
<div :style='[activeClass,testClass]'>绑定数组</div>

分支循环结构

5.1分支结构
v-if,v-else,v-else-if,控制元素是否渲染到页面。最终渲染到页面上的内容是满足条件的那个标签

//1.html结构
<div v-if='score>90'>优秀</div>
<div v-else-if='score<90&&scrore>60'>良好</div>
<div v-else>一般</div>
//2.vue中的data属性
data:{
score:88,//最终显示的结果是良好，其他两个不会被渲染到页面
}

v-else-if和v-else必须和v-if一起使用
v-show控制标签的显示隐藏，与v-if不同的是v-show已经渲染到页面，只是改变了display属性为none

<div v-show='flag'>xianshi</div>
data:{flag:true}//元素显示在页面

两者的本质区别：v-if只有在条件满足的时候，才会渲染到页面显示出来，v-show是元素已经被渲染到页面，只是改变display属性

循环结构
v-for遍历数组

<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item+'-------'+index}}

参数：

item数组中的，每一项值，
index是数组中的索引
标签中的:key帮助vue区分不同放入元素，从而提高性能。标识你要遍历的标签，绑定的值是唯一的，一般绑定的是遍历标签的id属性

//1.html结构
 <li :key='item.id' v-for='(item,index) in list' >{{item.title}}</li>
 //:key='item.id'为了能够标识标签，提高性能
 //2.vue代码
 var vm=new Vue({
    el:'#app',
    data:{
    list:[{
    id:0,
    title:'apple',
     path:'img/apple.png'
    },{
    id:1,
    title:'orange',
     path:'img/orange.png'
    },]
    }
})

v-for遍历对象
参数1：对象中属性的值
参数2：对象中的键
参数3：对象中属性值的索引

v-if和v-for的结合使用

<div v-if='vaule=12' v-for='(value,key,index) in obj'>只有当value是12的时候才渲染</div>//前面的判断的条件可以是值、键、和索引

标题2 vue常用属性

表单操作

普通的input输入框或者textarea文本域实现数据的双向绑定，只需要v-model即可
如果是select下拉框、radio单选框、checkbox复选框这样的表单，要实现数据的双向绑定，必须给每个表单数据添加value属性

//1.html结构
<div>
//下拉框
<select v-model='occupation' multiple>//multiple表示下拉框可以多选，所在定义hobbey的时候必须是数组形式的,而且想要实现多选，multiple必须写
     <option value="0">学生</option>//value必须写
     <option value="1">老师</option>
     <option value="2">快递员</option>
     <option value="3">外卖员</option>
</select>
//单选框,在定义双向绑定的数据时属性名必须一致
<input type="radio" id="male" value="1" v-model='gender'>男
<input type="radio" id="female" value="2" v-model='gender'>女
//复选框，复选框在定义data中的数据时，必须是数组形式
 <input type="checkbox" value="1" v-model='hobbey'>唱歌
  <input type="checkbox" value="2" v-model='hobbey'>跳舞
  <input type="checkbox" value="3" v-model='hobbey'>打篮球
</div>
//2.vue实例对象中定义data数据
var vm = new Vue(
      {
        el: '#app',
        data: {
          gender: 1,//默认选中value是1的单选框
          cokk:'',
          occupation:['1','2'],//默认选中value是1和2的复选框，如果只想选中一个，又想添加multiple属性，那么就用数组的形式写一个value的值
          hobbey:['1','2'],//默认选中value值是1和2的复选框
        },
        methods: {},
      })

表单域修饰符（放在事件名的后面）

.number：转化成数值
.trim：去掉开始和结尾的空格
.lazy：将input事件变成change事件，input事件是文本改变就触发大的事件，change事件是文本框失去焦点触发的事件。

自定义指令

定义自定义指令
定义全局自定义指令

Vue.directive('自定义指令名',{
inserted:function(el) {el.focus}//el表示把自定义指令绑定在哪个标签上
})

使用方法：使用v-自定义指令，比如v-focus
带参数的自定义指令函数中的参数多一个binding
局部指令：directives和methods同级

directives:{
//自定义指令名称:{inserted:function(el){}}
focus:{
inserted:function(el){el.focus()}
}
}

标题3 计算属性computed

应用场景：把比较复杂的计算逻辑，使用计算属性可以让模板内容更加简洁
计算属性中的计算结果必须通过return返回结果
使用方法：直接在插值表达式中写入计算属性中定义的函数名，不需要加小括号。
示例代码：

//1.html结构
<div>{{reserveString}}</div>
//2.vue对象属性结构
 var vm = new Vue(
      {
        el: '#app',
        data: {
          msg:'Hello'
        },
        methods: {},
        computed:{
          reserveString:function() {
            return this.msg.split('').reverse().join('')//把Hello进行翻转olleH
          }
        }
      })

计算属性和methods的区别

计算属性是基于他们依赖的数据进行缓存的（如果相同的功能要实现两次，那么第一次执行成功之后，结果会存在缓存中，第二次再执行时，会在缓存中寻找。意思就是值只要不改变，就不会执行，只会在缓存中查找，只有值发生变化，才会重新执行）
方法不存在缓存，并且方法在放入插值表达式中调用的时候需要加上小括号调用
计算属性依赖的值发生变化就会重新执行所对应的函数

标题 4 侦听器watch

定义侦听器

watch:{
//firstName是需要侦听的数据，在data中定义的
firstName:function(val) {//firstName是data中定义的值，不能乱写
this.fullName=val+''+lastName;//val是变化后的新值
    }
}

应用场景：数据变化时执行异步或者开销大的时候

标题 5 过滤器（格式化数据）filter

自定义过滤器

全局过滤器

Vue.filter('过滤器名称',function(val){
return '返回值'
})//val是传过来需要过滤的数据

使用方法：<div>{{msg | 过滤器名称}}</div>

局部过滤器，于methods同级

filters:{过滤器名称:functio(val){}}

`带参数的过滤器，传入的参数从value后面的那一位开始
传入的参数就是格式化数据的样式，是字符串形式传入

//1.使用过滤器
<div>{{data | format('abc')}}//传入的参数是abc
Vue.filter('format',function(value,arg) {
console.log(arg)//arg就是过滤器使用的时候传入的参数,打印的结果是abc
})

注：过滤器的第一个参数一定是要过滤的data参数，第二个才是其他要传递的参数
知识点：数组的响应式变化

修改响应式数组

Vue.set(vm.list,indexItem,newValue)或者
vm.$set(vm.list,indexItem,newValue)

参数解析：
参数1（vm.items）：表示要处理的数组名称
参数2（indexItem）：表示要处理的数组索引或者属性
参数3（newValue)：表示要处理的数组所要修改的值

  var vm = new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'banana'],
        info: {
          name: 'lisi',
          age: 12
        }
      },
    });
    // vm.list[1] = 'lemon';
    // Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');

    // vm.info.gender = 'male';
    vm.$set(vm.info, 'gender', 'female');

标题 6 生命周期★

主要阶段（这些都是构造函数也称为钩子函数）

挂载（初始化相关属性）
beforeCreate
created
beforeMount
mounted
更新（元素或组件的变更操作）
beforeUpdate
updated
销毁（销毁相关属性）
befreDestory
destoryed

蕠莀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识

前端渲染的方式：原生js拼接字符串。缺点：不同开发人员的代码风格差别很大，不利于维护使用前端模板引擎。优点：代码可读性明显提高了，方便后期维护。缺点：没有专门提供事件机制vue模板。解决了前面两者的问题标题 1 Vue的基本使用Vue的使用步骤需要提供标签用于填充数据<div id='app'>{{msg}}</div>引入vue.js库文件可以使用vue的语法做功能（创建vue实例对象）var vm=new Vue({ el:'#app',//.
复制链接

扫一扫