Vue入门

Craze w

已于 2022-06-23 18:55:07 修改

阅读量884

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-06-23 18:53:13 首次发布

本文链接：https://blog.csdn.net/weixin_43587055/article/details/125432981

版权

Vue简介

Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

HTML + CSS + JS : 视图：给用户看，刷新后台给的数据

网络通信： axios

页面跳转： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

JavaScript框架

jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

Vue-库与框架的区别

jQuery 库
Vue 框架

库一般以功能模块为单位，封装好的一系列api集合，一般对项目的侵入度小，换库，工作量小

框架是提供一套完整项目解决方案的集合，对项目侵入度高，如果要换框架，代价很大

前端开发技术路线进化

原生的js–>jQuery–>前端模板art-template–>前端框架

Vue 是 MVVM 模式的实现者

Model : 模型层，在这里表示JavaScript对象
View : 视图层,在这里表示DOM (HTML操作的元素)
ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新

ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

Vue基本语法

Vue-差值表达式

{ {}},文字可以拼接

Vue-属性绑定

v-cloak 注：可以设置渲染过程不显示

v-html

v-text

v-bind 或：代表属性绑定

Vue-事件绑定

v-on:click 或 @click

v-for: (item：data）遍历for循环

this -->指当前vm viewmodel对象

<div id="app">
    id:<input type="text" v-model="id"/>
    name:<input type="text" v-model="name"/>
    <input type="button" value="添加" @click="add"/>
    <ul>
        <li v-for="item in emps">编号：{
  {item.id}}&nbsp;名称：{
  {item.name}}</li>
        <!-- <li v-for="(val,key) in emp">{
  {val}}&nbsp;&nbsp;&nbsp;{
  {key}}</li> -->
    </ul>
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            emps:[
                {id:"01",name:"苹果"},
                {id:"02",name:"香蕉"},
                {id:"03",name:"梨"}
            ],
            // emp:{id:'1',name:'lisi',age:'21'}
        },
        methods: {
            add : function() {
                this.emps.push({id:this.id,name:this.name})
            }
        },
    })
</script>

**事件修饰符： **

冒泡捕获触发点击事件

<div id="app">
    --绑定style属性
	<p :style="{color:'red'}">vue</p>
    --绑定class属性
    <p :class="['ft','bt']">vue</p>
</div>

v-model

<!-- v-model是vue的双向绑定，注意：1.它只能用表单元素上 2.指令后面不能跟任何属性 -->
    <input type="text" v-model="txt"/>
    <p>{
  {txt}}</p>

生命周期图示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RkkyeTSC-1655981552197)(C:\Users\Administrator.WIN-O88KB01IO1I\Desktop\lifecycle.png)]

四类钩子函数的触发条件及使用方法

钩子函数声明的位置:

四类函数都是需要与 methods 同级声明,并且不可被 methods 调用,以 updated 举例如下

export default {
   
  data () {
   
  },
  methods: {
   
  },
 
  // 钩子函数和 methods 同级声明
  updated () {
   
    console.log('看到了吗 声明到这个位置');
  }
}

1. Lifecycle-初始化 beforeCreate 和 created

export default {
   
  data () {
   
    return {
   
      bl: true
    }
  },
  methods: {
   
    change () {
   
      this.bl = !this.bl
    }
  },
 
  <!-- Vue内部添加data和method数据前 -->
  beforeCreate(){
   
    // 在这里 打印的结果是 undefined
    console.log(this.bl)
  }
 
  <!-- Vue内部添加data和method数据后 -->
  created(){
   
    // 在这里 打印的结果是 true
    console.log(this.bl)
  }
  
}

2.Lifecycle-挂载 beforeMount 和 mounted

mounted 这个钩子函数就是虚拟DOM已经成功渲染到浏览器中此时调用mounted 中的内容,这个函数和 created 一样可以用来发送初始化ajax请求,但是我本人更习惯用 created ,因为mounted 在生命周期中比较靠后,反应较慢,只有涉及到操作组件 DOM节点的时候才会用 mounted

beforeMount 不可以打印 DOM节点 ,mounted 可以,具体如图:

<template>
  <div id="app">
    <div ref="biaoqian">这是个DOM节点</div>
  </div>
</template>
 
<script>
export default {
   
  // dom节点 渲染浏览器之前
  beforeMount () {
   
    console.log('beforeMount 打印结果:',this.$refs.biaoqian);
  },
 
  // dom节点 渲染浏览器完成
  mounted(){
   
    console.log('mounted 打印结果:',this.$refs.biaoqian);
  }
}
</script>

3.Lifecycle-更新 beforeUpdate 和 updated

updated 是数据改动完成并且成功重新打补丁渲染完成后调用的钩子函数,发生在改动数据的函数全部执行完毕并渲染到DOM之后,此时获取的数据一定是经过改动和 beforeUpdate 的最新数据

export default {
   
  data () {
   
    return {
   
      text: '我是还没被改的文字'
    }
  },
  methods: {
   
    // 改动数据事件
    change () {
   
      this.text = '我被改了'
      console.log('change事件', this.text); // 21行 打印结果
    }
  },
 
  // beforeUpdate 钩子函数
  beforeUpdate () {
   
    this.text = '我又被改了,我不干净了'
    console.log('改变时', this.text); // 26行 打印结果
  },
 
  // updated 钩子函数
  updated () {
   
    console.log('改变之后', this.text)