hercule_poirt
^

Vue

1. 概述

1) 前端的组成

视图层:html+css+js,给用户看，刷新后台的数据
网络通信:axios（前端通信框架）
页面跳转:vue-router
状态管理:vuex

2) 前端框架

AngularJs: 创造了模块化
React: 创造了虚拟DOM
Vue: 结合了两者，且渐进式

3) UI框架

Ant-Design: 阿里巴巴出品，基于REact的UI框架
ElementUI、iview、ice: 饿了么、出品，基于Vue的UI框架
Bootstrap: Twitter推出的前端开源工具包
AmazeUI: HTML5跨屏前端框架

4) JavaScript构建工具

Babel: 用于浏览器不支持的ES新特性，编译TypeScript
WebPace: 模块打包器，打包、压缩、合并及按序加载

5) NodeJS

全栈平台

6) 名词

SPA: Single PageApplication 单页面应用
MVC: 同步通信为主 Model、View、Controller
MVC: 异步通信为主 Model、View、Presenter
MVVM 异步通信为主 Model、View、ViewModel
Vue实现了MVVM

7) MVVM(Model-View-ViewModel)

一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式。

2. Vue常用的七个属性

  1. el: element

  2. data

  3. template: omponent(组件)的template(模板),以及props变量

  4. methods: 方法是动态的函数，调用同函数,{{function-name()}}

  5. render属性

  6. computed: 计算属性
    计算属性是静态的属性值，只有当computed中的值被写入时才会重新计算。使用不用加()，与methods方法重名后，只会调用methods中的方法

  7. watch侦听属性

3. Vue

绑定值：{{}}、v-bind=
判断循环语句: v-if、v-if-else、v-for...
事件绑定: v-on:click、:click
双向绑定: v-model 会忽略DOM的所有value、checked、selected的初始值，而将Vue实例的数据作为数据来源

注意：v-model初始值未能匹配任何选项，在IOS中，会使用户无法选择第一个选项，可以通过提供一个disabled value=""的空禁用选项来解决。

component组件:
component(“component name”,{
template: ‘<li>xxxxxx</li>’
});

slot:
定义插槽<slot></slot>，插槽的内容标签，都是由component组件定义的

自定义事件: this.$emit(‘自定义事件名’,参数)
可以事件跨组件调用实例中的函数，进而操作实例中的数据。

v-on:自定义事件名=“目标实例中的方法,如vue实例vm中的函数”

4. Axios异步通信

Axios是一个可以用在浏览器端和NodeJS的异步通信框架，主要作用是实现AJAX异步通信
1. 钩子函数(链式编程):

基于ES6的新特性，例:

mounted(){
	axios.get(‘../data.json’).then(response=>(this.info=response.data.)
}
2. data方法 (获取钩子函数抓取的,需设定合适的格式)

与作为对象的data:{}不一样，在这里data是方法

data(){
	return{
		info:{
		name:null, //此处的变量应与data.json里的变量名一致
		address:{
		street:null,
		city:null,
		country:null}
		}
	}
}

而后，可以直接作为对象使用，如:

<div>{{info.name}}</div>

5. vue-router

①在项目目录下安装路由插件
npm install vue-router  --save-dev

--save 表示写入到 dependencies对象，dependencies 是需要发布到生产环境的
--save-dev 表示写入到devDependencies对象，devDependencies 里面的插件只用于开发环境，不用于生产环境，

② 在src/router/index.js安装路由功能

1.导入文件
2.安装路由
3.配置中转信息

在router文件夹下新建index.js配置路由中转信息

import Vue from ‘vue’
import VueRouter from ‘vue-router’ //导入路由插件
import Header from ‘../components/Header’//导入组件
import Bottom from ‘../components/Bottom’//导入组件

Vue.use(VueRouter);//安装路由

export default new VueRouter({//配置路由
	routes: [
{
//此处只是配置了路由，并没有启用,需要在main.js中启用
            path: '/header',//路由路径
            name: 'header',//路由名称，非必须
            component: Header//跳转的组件
},
{
            path: '/bottom',
            name: 'bottom', 
            component: Bottom
}]
})
③ 在src/main.js 配置路由
import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描里面的路由配置

Vue.config.productionTip = false//生产模式提示，开发环境下保持关闭即可

new Vue({
  el: '#app',
  router,//vue实例里固定路由器的书写为"router",不能改
  components: { App },
  template: '<App/>'
})
④在src/App.vue中使用路由标签
<router-link></router-link>：
默认会被渲染成<a>标签，to属性为指定连接
<router-view></router-view>：渲染路由匹配到的组件

<router-link to="/header ">头部Header</router-link>
<router-link to="/bottom">底部Bottom</router-link>
<router-view></router-view>//展示子页面template模块
⑤ 添加子页面流程


1)新建newpage.vue

2)配置router/index.js

3)使用router标签来显示子页面

配置router/index.js 路由中转文件信息

→ 在router/index.js中import newpage.vue
→ 在routes数组中添加路由路径path和跳转组件component

6. 其他

1) 解决闪烁问题（显示数据原型后替换）
<style>
	[v-clock]{
	display:none;
	}
</style>
posted @ 2021-10-09 21:10  hercule_poirt  阅读(113)  评论(0)    收藏  举报
Copyright © 2021 hercule_poirt