Vue.js

最新推荐文章于 2023-03-29 14:12:20 发布

原创最新推荐文章于 2023-03-29 14:12:20 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

在一些项目中，可能是以前后端不分离形式实现的。那么前端知识怎么也要会一些吧！

Vue.js目前的使用和关注程度在前端三大新框架（Angular.js、React.js、Vue.js）中稍微胜出，并且它的热度还在递增。

Vue实例：

var vm = new Vue({
        el:'#app',
        data:{message:'hello world!'}
    });

<div id="app">{{ message }}</div>

el属性对应一个标签，创建vue对象，这个标签内的区域就被vue接管，这个区域内就可以使用vue对象中定义的属性和方法了。

插入值：

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

如果是标签的属性要使用值，就不能使用“Mustache”语法，需要写成使用v-bind指令：

指令：

(Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on

缩写：

v-bind和v-on事件这两个指令会经常用，所以有简写方式：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>


<!-- 完整语法 -->
<button v-on:click="fnChangeMsg">按钮</button>

<!-- 缩写 -->
<button @click="fnChangeMsg">按钮</button>

计算属性：

computed 为了 在模板中放入太多的逻辑会让模板过重且难以维护。

<div id="example">
  <p>反转之前: "{{ message }}"</p>
  <p>反转之后: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

侦听属性

watch:侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{
            iNum:1
        },
        watch:{
            iNum:function(newval,oldval){
                console.log(newval + ' | ' + oldval) 
            }
        },
        methods:{
            fnAdd:function(){
                this.iNum += 1;
            }
        }
    });
}

Class 与 Style 绑定

可以给v-bind:class传一个对象，以动态的切换class

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

可以给v-bind:class传一个数组，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>
......

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

组件：是可以复用的Vue实例，且带有一个名字

双向绑定：v-model:xxx 绑定是文本插值，就是双大括号里面的值。比如最上面的插入值：v-model:msg ...{{ msg }}

事件处理： 1、事件绑定方法，如果绑定的事件逻辑复杂可以使用methods属性指定处理函数 2、事件修饰符：事件绑定时牵涉到阻止事件冒泡以及阻止默认行为

过滤器： |

实例生命周期：每个Vue实例在被创建时都要经过一系列的初始化过程，会自动运行一些叫做生命周期钩子的函数。

数据交互

第一种：写入使用method方式
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
第二种直接写get请求：
axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
或者是post请求：
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

vue中出现面试题

vue中v-model双向数据绑定原理:

vue.js采用数据劫持结合发布者-订阅者模式的方式，通过object.defineproperty()来劫持各个属性的setter/getter,在数据变动时，发布消息给订阅者，触发相应的监听回调.

具体步骤：1、需要observer的数据对象进行递归遍历，都加上setter和getter这样就可以监听到数据变化。2、compile解析模板指令，添加监听数据的订阅者一旦数据有变动就回更新视图。3、watcher订阅者observer和compile之间通信的桥梁。4、mvvm作为数据绑定的入口，整合observer、compile、watcher来达到数据变化>视图更新，视图交互变化>数据model变更的双向绑定效果。

vue的生命周期：

总共分为八个阶段：创建前/后，载入前/后，更新前/后，销毁前/后创建前/后：1.beforeCreated阶段 el和data都是undefined 2.在created阶段 data有了但是el没有载入前/后：3.beforeMount阶段data和el已初始化，但还是挂载之前的dom节点 4.在Mount阶段 data信息已成功渲染更新前/后：5/6当data发生变化时，会触发beforeupdate和update方法销毁前/后：7/8在执行destory方法后，对data的改变不会触发周期函数，此时已经解除了事件监听和demo绑定，但demo依然存在

vue的组件封装过程：

组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块。1、使用Vue.extend方法创建一个组件。2.Vue.component方法注册组件。3.子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

vue-router有哪几种导航钩子

3种：全局导航钩子router.beforeEach；组件内的钩子；单独路由独享的钩子

sccs是css的预编译，特性：可以用变量，可以用混合器，可以嵌套

MVVM是什么？和MVC有什么区别？和jQuery的区别？

MVVM是一种设计思想，M代表model，是数据模型，model里面也可以定义数据修改和操作的业务逻辑。V代表view、是UI组件，负责将数据模型转化为UI展现出来。viewmodel，是通过双向数据绑定同步view和model。

MVVM和MVC其实差不多少，只是Controller换成了VIEW-MODEL，MVC中有大量DOM操作会影响页面渲染性能和加载速度，MVVM解决了这一问题，因为MVVM是通过数据展示视图层而不是通过节点操作。

vue的优点：可重用性，低耦合，独立开发，可测试。

组件之间传值：

1、父组件通过标签上的定义传值，子组件通过props方法接受。 2、子组件通过$emit传值