在一些项目中,可能是以前后端不分离形式实现的。那么前端知识怎么也要会一些吧!
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传值