vue

最新推荐文章于 2023-03-20 09:45:21 发布

月亮不营业

最新推荐文章于 2023-03-20 09:45:21 发布

阅读量85

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46440394/article/details/120020234

版权

笔记专栏收录该内容

37 篇文章 1 订阅

订阅专栏

什么是vue

vue生态系统/vue技术栈/vue全家桶: vuejs / vuex / axios /vue-router / element-ui (pc) / vant ui(移动端) / 服务端渲染(seo问题)

一vue的介绍

1.什么是框架：
具有约束性的项目管理结构或者写法，能更好的管理项目，让程序员更专注于业务逻辑
2.什么是vue
是一套构建用户界面的渐进式js框架；与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计
渐进式：主张最少
渐进式框架还有：angular.js ,react.js

自底向上：先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能

二单页面应用

vue react angular：主要都是单页面应用

一.单页面应用：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用
对单页应用来说模块化的开发和设计显得相当重要

优点：
1.分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
2.减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
3.同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端
缺点：
1.SEO问题，现在可以通过Prerender等技术解决一部分
2.前进、后退、地址栏等，需要程序进行管理

二.MVVM构架
M：js存储的数据
VM：:是实现vue双向数据绑定的核心技术
V：视图 HTML展示

另：
MVC架构：
M: 数据层，提供数据
V: 视图，和用户交互，显示页面
C: 控制层 (业务逻辑)

MVP架构

三.vue的使用

1.官网下载vue.js文件
2.引用vue.js文件
自动挂载
let vm = new Vue({
el:"#app", // id为app的元素，将vue进行管理(viewModel )
data:{ //要显示在id为app内的页面元素
message:“vue是个可爱的框架”
}
});
手动挂载
let vm = new Vue({
data:{ //要显示在id为app内的页面元素
message:“vue是个可爱的框架”
}
}).$mount("#app");
vue可以应用于多页面开发

四.vue的属性和方法

1.全局属性
Vue.config

2.全局方法
Vue.filter()
Vue.minin()

3.实例属性
vm. $d a t a 返回的是一个对象, v m . 键名相当于 ‘ v m .$ data.message`
vm.$el 挂载的节点，返回的是一个dom对象;
注: vue2.0 起就不能挂载在html 和body上

4.实例方法
vm.$mount()

vm.$set(); // 修改数据，特点，修改数据后，dom会重新渲染

vm.$nextTick()； // dom更新完成，执行

vm.$watch(); // 监视某个值的值

五.vue的指令

v-text:显示成文本

<body>
<div id="app">
    <span v-text="msg"></span>
</div>

<script src="js/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        data:{   //实例对象有的数据就写在data里面
            msg:"vue是个可爱的框架"
        }
    }).$mount("#app")   //将实例对象挂载到app那里
</script>
</body>

在这里插入图片描述

v-html:可以解析html标签
在这里插入图片描述

v-show:是否显示， true表示显示，false:隐藏（display:none）
在这里插入图片描述

v-if ：判断，条件为真，显示，为假：不渲染
v-else: 否则
v-else-if: 否则如果
示例：根据一个分数，显示对应的A,B,C,D,E

在这里插入图片描述

v-for:
注：最好写上key属性，如果有唯一id,就绑定id，没有可以用index
在这里插入图片描述

循环对象时：

v-bind:
绑定元素的属性
.pink{ color: pink; } .blue{ color: cornflowerblue; } 在这里插入图片描述

六、vue的生命周期函数

钩子函数：
beforeCreate:创建前
created: 创建后
beforeMount: 挂载前
mounted: 挂载后
beforeUpdate:更新前
updated：更新后
beforeDestory：销毁前
destoryed：销毁后

<script src="js/vue.js"></script>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#app",
        data: {
            a: "Vue.js"
        },
        beforeCreate: function() {

            console.log("创建前")
            console.log(this.a)
            console.log(this.$el)
        },
        created: function() {
            console.log("创建之后");
            console.log(this.a)
            console.log(this.$el)
        },
        beforeMount: function() {
            console.log("mount之前")
            console.log(this.a)
            console.log(this.$el)
        },
        mounted: function() {
            console.log("mount之后")
            console.log(this.a)
            console.log(this.$el)
        },
        beforeUpdate: function() {
            console.log("更新前");
            console.log(this.a)
            console.log(this.$el)
        },
        updated: function() {
            console.log("更新完成");
            console.log(this.a);
            console.log(this.$el)
        },
        beforeDestroy: function() {
            console.log("销毁前");
            console.log(this.a)
            console.log(this.$el)
            console.log(this.$el)
        },
        destroyed: function() {
            console.log("已销毁");
            console.log(this.a)
            console.log(this.$el)
        }
    });
</script>

七、事件绑定

v-on: 绑定事件,简写@;
事件对象使用$event

修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<div @click="foo('yeye',$event)">
      爷爷
      <div @click="foo('baba')">
          爸爸
          <div  @click.stop="foo('haizi')">
              孩子
          </div>
      </div>
  </div>