中山企业网站建设公司/网络销售推广平台

创建项目

1. 创建项目

vue create 项目名称

2. 项目配置
   

iconfont 小技巧，编辑 SVG

在阿里UI库里上传SVG可简单的编辑SVG文件，编辑完成后下载。

@click.native

• native在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件。
• 但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了。

props

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

.sync

.sync 修饰符所提供的功能。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定

• sync监听子组件的prop，当子组件的数据改变的时候，同时改变父组件的数据。

Vue Router

1. $route 获取路由信息
2. $router 跳转到指定路由

写 Vue 组件的三种方式（单文件组件）

1. 用 JS 对象

 export default { data, props, methods, created, ...}

2. 用 TS 类

 @Componentexport default class XXX extends Vue{xxx: string = 'hi';@Prop(Number) xxx: number|undefined;}

3. 用 JS 类

 @Componentexport default class XXX extends Vue{xxx = 'hi'}

@Component

// 注册组件：引入后就可以用class方式写vue
import {Component} from "vue-property-decorator";

TypeScript 好处

类型提示：更智能的提示
编译时报错：还没运行代码就知道自己写错了
类型检查：无法点出错误的属性

v-model

v-model="value"
//相当于以下代码
:value="value"@input="onInput"onInput(event: KeyboardEvent){const input = event.target as HTMLInputElementthis.value = input.value

localStorage

// 读数据
recordList:Record[] = JSON.parse(window.localStorage.getItem('recordList') || '[]')

// 添加数据
const record2: Record = JSON.parse(JSON.stringify(this.record))
record2.recordAt = new Date()
this.recordList.push(record2)
// 1.将用户输入的字符串解析成JSON字符串并构造成对象并赋值给record2
// 2.保存新建的record2的创建时间
// 3.push到recordList

// 改数据
@watch('recordList') // 监听数据
change() {window.localStorage.setItem('recordlist',JSON.stringify(this.recordList))
}

// 解决避免创建重复标签

MVC（封装组件）

1. 标签页面只负责调用

// 获取数据列表
tagListModel.fetch()
// 保存数据为tags
tags = tagListModel.data
// 新增标签
createTag() {const name = window.prompt('请输入标签名')if(name){tagListModel.create(name)}
}

2. 封装的组件

// 指定数据类型
type TagListModel = {data: Tag[]fetch: () => Tag[]create: (name:string) => string // success表示成功 duplicated表示重复update: (id:string, name:string) => 'success' | 'not Found' | 'duplicated'remove: (id: string) => booleansave: ()=>void
}const localStorageKeyName = 'tagList'
const tagListModel: TagListModel = {data: [],fetch() {this.data = JSON.parse(window.localStorage.getItem(localStorageKeyName) || '[]')return this.data},create(name: string){const id = createId().toString()const names = this.data.map(item => item.name)if (names.indexOf(name) >=0 ) { return 'duplicated'}this.data.push({id, name: name})this.save()return 'success'},update(id, name) {const idList = this.data.map(item => item.id)if(idList.indexOf(id) >= 0) {const names = this.data.map(item => item.name)if(names.indexOf(name) >= 0){return 'duplicated'} else {const tag = this.data.filter(item => item.id === id)[0]tag.name = namethis.sava()return 'success'}} else {return 'not found'}
},remove(id:string){let index = -1for(let i=0; i< this.data.length; i++){if(this.data[i].id === id){index = ibreak;}}this.data.splice(index, 1)this.save()return true},save(){window.localStorage.setItem(localStorageKeyName, JSON.stringify(this.data))}
}

3.封装全局数据属性 tagList

// 1.main.js里声明/ 全局声明变量
window.taglist = tagListModel.fetch()
// 2.数据类型
tagList： Tag[]
type Tag = {id: stringname: string
}
// 3.引用
tags = window.tagList
const message = tagListModel.create(name)
// 诸如此类,增删改查
window.findTag = () =>{}
window.createTag = () =>{}
window.removaTag = () =>{}
window.updateTag = () =>{}

4.将所有的全局变量放到store里

window.store = {window.taglist = () =>{}window.findTag = () =>{}window.createTag = () =>{}window.removaTag = () =>{}window.updateTag = () =>{}
}
// 对象的定义过程中不能使用对象，只能定义后使用对象

5.将 store放到 vue 的原型里，封装为vue方法

// 1.将方法封装到main.js里
Vue.prototype.$store = store2// 2.在xxx.d.ts里指定类型
// 以下为官方文档案例// 1. 确保在声明补充的类型之前导入 'vue'import Vue from 'vue'// 2. 定制一个文件，设置你想要补充的类型//    在 types/vue.d.ts 里 Vue 有构造函数类型declare module 'vue/types/vue' {// 3. 声明为 Vue 补充的东西interface Vue {$myProperty: string}}
// 有import 会自动引入可以分成两个XXX.d.ts文件，写成一个有import，一个没有import

store 怎么模块化

1. 将记录数据和直接操作数据的组件分开
2. 用户操作的组件调用直接操作数据的组件，而不是直接操作数据，只做调用操作，不对数据进行直接操作。
3. 数据与操作的分割开就是模块化。

数据迁移

每个版本记录一个版本号，当与上一版本的数据合并时发生意外，可回溯解决后再合并。

window.localStorage.setItem('version','0.0.1')

ID生成

// 从浏览器缓存拿到ID并判断是否为0，否则拿最大的ID
let id: number = window.localStorage.getItem('_idMax') || 0function createId() {id++// 保存IDwindow.localStorage.setItem('_idMax', id.toString)return id
}

typeScript 怎么用

1. 将文件名后缀改为TS。
2. 将需要指定数据类型的代码在后面写 ：<数据类型>
3. xxx.b.ts 文件 用作全局指定数据类型

::v-deep

用于scss语法的深入获取元素，可跨组件获取元素。