Vue.js技术
前言
学习方向:
NodeJs、VueJs、前端安全、Webpack、ES6、Vue-CLI、Vue-Router、ESLint
三大框架
- vue.js
- React.js
- ANgular
Vue.js简介
- Vue是一套用于构建用户界面的渐进式框架
- Vue的目标是 实现响应的数据绑定和组合的视图组件
- 核心是一个响应的 数据绑定系统
- 是一个JavaScript MVVM 的库
Vue.js模板
双大括号表达式
插值:数据绑定最常见的形式
- 语法: {{exp}}
- 功能: 向页面输出数据
- 可以调用对象的方法
- el表明当前实例化需要操作的元素区域
- data表示当前Vue实例的数据对象
- data -> Object || data -> Function
指令
v-clock:能够解决插值表达式带闪烁问题
v-test:
- 渲染文本
msg: 'Hello Vue! '
- 与差值有所不同
v-html:
- 渲染Html
msg2:'<h1>Hello</h1>'
v-if:
- 一般与v-else一起使用
- 属性值如果为false不显示,为true则显示
v-show
v-blind:
- 功能: 指定变化的属性值
- 完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
- 简洁写法: :xxx=‘yyy’
v-on:
- 功能: 绑定指定事件名的回调函数
- 完整写法: v-on:keyup=‘xxx’ v-on:keyup=‘xxx(参数)’ v-on:keyup.enter=‘xxx’
- 简洁写法:
@keyup=‘xxx’
@keyup.enter=‘xxx’ - 事件修饰符
使用.stop阻止冒泡
使用.prevent阻止默认行为
.capture添加事件侦听器是使用事件捕获模式
.self只当事件在该元素本身触发时触发回调
.once事件只触发一次
v-model:
- 实现表单元素和Model中数据的双向数据绑定
- 只能运用在表单元素中(input\select\chechbox)
ES6
const常量(不会更改) let变量(会改变)
//对象Java Map=>Object
const obj = {
a1:1,
a2:2
}
//模板字符串
const str=“1321364”
This is ${str} hello
//展开符
…=>Object
- mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?
答:一个model+view+viewModel框架,数据模型model,viewModel连接两个。
区别:vue数据驱动,通过数据来显示视图层而不是节点操作。
场景:数据操作比较多的场景,更加便捷。
- 说出至少4种vue当中的指令和它的用法?
答: v-if:判断是否隐藏;
v-for:数据循环出来;
v-bind:class:绑定一个属性;
v-model:实现双向绑定。
- vue的优点是什么?
答:低耦合、可重用、性独立开发、可测试。
- vue的生命周期
答:vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
总共分为8个阶段:
beforeCreate----创建前
组件实例更被创建,组件属性计算之前,数据对象data都为undefined,未初始化。
created----创建后
组件实例创建完成,属性已经绑定,数据对象data已存在,但dom未生成,$el未存在
beforeMount—挂载前
vue实例的$el和data都已初始化,挂载之前为虚拟的dom节点,data.message未替换
mounted-----挂载后
vue实例挂载完成,data.message成功渲染。
beforeUpdate----更新前
当data变化时,会触发beforeUpdate方法
updated----更新后
当data变化时,会触发updated方法
beforeDestory—销毁前
组件销毁之前调用
destoryed—销毁后
组件销毁之后调用,对data的改变不会再触发周期函数,vue实例已解除事件监听和dom绑定,但dom结构依然存在
5.组件之间的传值通信?
答:父组件向子组件传值:
1)子组件在props中创建一个属性,用来接收父组件传过来的值;
2)在父组件中注册子组件;
3)在子组件标签中添加子组件props中创建的属性;
4)把需要传给子组件的值赋给该属性
子组件向父组件传值:
1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
6.mvvm和mvc区别?
答:mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到View 。
7.什么是MVVM
答:即:Model View VM
Model 是数据, data;
View 是模板;
VM 是 vm = new Vue(); VM 用了连接数据和视图, 视图的输入框绑定了v-model, 用户输入后会改变data; Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用。
8.组件之间跳转的方法
答:① 直接修改地址栏中的路由地址
② 通过router-link实现跳转:
<router-link to="/myRegister">注册</router-link>
③ 通过js的编程的方式:
jumpToLogin: function () {
this.$router.push('/myLogin');
}
9.vue中解决跨域问题
答: ① 后台更改header:
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
② 使用JQuery提供的jsonp :
methods: {
getData () {
var self = this
$.ajax({
url: ‘http://f.apiplus.cn/bj11x5.json’,
type: ‘GET’,
dataType: ‘JSONP’,
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(’,’)
}
})
}
}
③ 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
10.es6常用语法(五条即可)
答:1. 变量声明const和let;
2. 模板字符串;
3. 箭头函数;
4. import导入模块、export导出模块;
5. promise