para培训——Vue.js技术

ゝ一纸荒年。 2023-06-13 09:17 66阅读 0赞

# Vue.js技术 #

## 前言 ##

### 学习方向： ###

NodeJs、VueJs、前端安全、Webpack、ES6、Vue-CLI、Vue-Router、ESLint

### 三大框架 ###

1.  vue.js
2.  React.js
3.  ANgular

### Vue.js简介 ###

*  Vue是一套用于构建用户界面的渐进式框架
 *  Vue的目标是 实现响应的数据绑定和组合的视图组件
 *  核心是一个响应的 数据绑定系统
 *  是一个JavaScript MVVM 的库

## Vue.js模板 ##

### 双大括号表达式 ###

插值：数据绑定最常见的形式

1.  语法: \{ \{exp\}\}
2.  功能: 向页面输出数据
3.  可以调用对象的方法

*  el表明当前实例化需要操作的元素区域
 *  data表示当前Vue实例的数据对象
 *  data -> Object || data -> Function

### 指令 ###

**v-clock**：能够解决插值表达式带闪烁问题  
**v-test**：

1.  渲染文本
2.  `msg: 'Hello Vue! '`
3.  与差值有所不同

**v-html**：

1.  渲染Html
2.  `msg2:'<h1>Hello</h1>'`

**v-if**：

1.  一般与v-else一起使用
2.  属性值如果为false不显示，为true则显示

**v-show**  
**v-blind**：

1.  功能: 指定变化的属性值
2.  完整写法: v-bind:xxx=‘yyy’ //yyy 会作为表达式解析执行
3.  简洁写法: :xxx=‘yyy’

**v-on**：

1.  功能: 绑定指定事件名的回调函数
2.  完整写法: v-on:keyup=‘xxx’ v-on:keyup=‘xxx(参数)’ v-on:keyup.enter=‘xxx’
3.  简洁写法:  
    @keyup=‘xxx’  
    @keyup.enter=‘xxx’
4.  事件修饰符  
    使用.stop阻止冒泡  
    使用.prevent阻止默认行为  
    .capture添加事件侦听器是使用事件捕获模式  
    .self只当事件在该元素本身触发时触发回调  
    .once事件只触发一次

**v-model**：

1.  实现表单元素和Model中数据的双向数据绑定
2.  只能运用在表单元素中（input\\select\\chechbox）

### ES6 ###

const常量（不会更改） let变量（会改变）  
//对象Java Map=>Object  
const obj = \{  
a1:1,  
a2:2  
\}

//模板字符串  
const str=“1321364”  
This is $\{str\} hello

//展开符  
…=>Object

1.  mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 
    
        场景：数据操作比较多的场景，更加便捷。

1.  说出至少4种vue当中的指令和它的用法？

答： v-if：判断是否隐藏；

v-for：数据循环出来；
    
       v-bind:class：绑定一个属性；
    
       v-model：实现双向绑定。

1.  vue的优点是什么？

答：低耦合、可重用、性独立开发、可测试。

1.  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脚手架搭建）