vue基础

vue

v-for

<ul>
	<li v-for="item in array">{{item}}</li>
</ul>

v-html------------------hyh是一段html代码

<div v-html="hyh"><div>	

v-pre-------------------里面的东西会原封不动的展示

<h1 v-pre>{{message}}</h1>	// {{message}}

v-cloak

<style>
	[v-cloak] {
		display: none
	}
</style>
<div v-cloak>{{message}}</div>

class

<div class="active"></div>
<div :class="active"></div>
// vue中这两种都可以, 但最标准的用法是下面这样
<div :class = "{ 类名1: boolean, 类名2: boolean }"></div>
// 如果有时候觉得太长可以这么办
methods:{
	getClass: function() {
		return { 类名1: boolean, 类名2: boolean }
	}
}
<div :class = "getClass()"></div>

vue中的MVVM

View
视图层, 在前端中的话主要就是DOM层
Model
数据层, 可能是固定的死数据, 更多的是来自服务器, 从网络上请求下来的数据
ViewModel
视图模型层是View和Model沟通的桥梁
一方面它实现了DataBinding, 也就是数据绑定, 将Model的改变实时的反应到View中
另一方面它实现了DomListener, 也就是Dom监听, 当Dom发生一些事件时可以监听到, 并在需要的时候改变对应的data

生命周期

new Vue() 之后从创建到销毁的过程

计算属性

computed: {
	fullName: function() {
		return this.firstName + ' ' + this.lastName	
	}
	// 其实上面的是语法糖, 实际完整的是这样的
	fullName: {
		set: function() {
			
		},
		get: function() {
			return this.firstName + ' ' + this.lastName
		}	
	}
	// 所以它就是个属性,所以调用的时候不用加()
	// set的时候会接受一个参数, 如app.fullName = 'Kobe Bryant', 就会接受这个
}

计算属性会缓存, 比如同一个功能如果用计算属性和方法, 调用10次这个功能, 计算属性只会
执行一次, 方法会调用10次

块级作用域

{
	var a = 'why'
}
console.log(a)	// why, 因为var没有块级作用域

var btns = document.getElementByTagments('button')
for(var i=0;i<btns.length;i++){
	btns[i].addEventListener('click',function(){
		console.log('第'+i+'个按钮被点击')
	})
}
// 因为没有块级作用域, 所以你不管点那个button都输出第5个按钮被点击
// 因为循环完i就变成了5,点击button后执行函数,函数里的i是5
// 上面的也可以用闭包的方式解决, 如下,因为有函数作用域的原因
for(var i=0;i<btns.length;i++){
	(function(i){
		btns[i].addEventListener('click',function(){
			console.log('第'+i+'个按钮被点击')
		})
	})(i)
}
let 块级作用域

@click.native 监听组件的click事件, 因为自定义一个组件绑定click是监听不到的
加.native就可以了

v-if与v-show
当需要在显示与隐藏频繁切换的时候就用v-show
当只有一次切换时就用v-if

数组

this.letters[0] = '123'	// 非响应式
用splice替换
this.letters.splice(0, 1, '123')	// 响应式
Vue.set(this.letters, 0, '123')		// 响应式

let i in books   // i是索引值
let i of books   // i是每一项
高阶函数
filters, map, reduce
reduce作用是对数组中所有的内容进行汇总
nums.reduce(function(preValue, n){	// n遍历数组的每一项, preValue上一次的返回值
	return preValue + n	
},初始值)

v-model

<input type="text" :value="message" @input="changeValue" />
methods:{
	changeValue(event) {
		event.target.value
	}
}

值绑定

<label v-for="item in originHobies" :for="item">
	<input type="checkbox" :id="item" v-model="hobies" :value="item" />
	{{item}}
</label>
data(){
	hobies: [],
	originHobies:['篮球','足球','台球','羽毛球']
}

v-model修饰符

.lazy 当按回车或者失去焦点时才更新
.number 都改为number类型
.trim 清除两边的空格

组件通信

props里是驼峰时, 子组件要用 - 连接

props:[fromFather]
<child :from-father="fromFather"></child>

子传父

	子
this.$emit(item-click)
	父
<div @item-click="clickChild"></div>

父子组件的访问方式
$children $refs

this.$children是一个数组类型, 它包含所有子组件对象
this.$children[3].balabala
// 缺点: 不灵活

<div>
	<child ref="aaa"></child>
</div>
this.$refs.aaa

$parent

不建议用, 这样复用性就差了, 耦合度太高

$root访问根实例, 也用的很少

插槽slot

插槽的目的是让我们的设备更具有延展性,可对比电脑的usb插槽等, 可以插入u盘,
鼠标等

// 定义
<component>
	<h1>标题</h1>
	<p>内容</p>
	<slot></slot>
</component>

// 使用
<component><button>按钮</button></component>

// 效果
<h1>标题</h1>
<p>内容</p>
<button>按钮</button>
// 如果slot里放了默认值, 在使用这个组件时没有在slot里传内容就会显示默认值

具名插槽

想实现顶部导航栏的左中右过程

<div>
	<slot name="left">左边</slot>
	<slot name="center">中间</slot>
	<slot name="right">右边</slot>
</div>
// 
<compoennt>
	<span slot="center">标题</span>
</component>

常见的模块化方案

commonJS, AMD, CMD, 也有ES6的Modules
Node就是基于commonjs的

模块化的核心: 导入, 导出
commonjs的导出

module.exports = {
	flag: true,
	sum(a, b) {
		return a+b
	}
}

commonjs的导入

let {test, demo, sum} = require('moduleA')
// 等价于
let mA = require('moduleA')
let test = mA.test
...

es6

导出变量
export let name = 'why'
export let age = 18
// 等价于
let name = 'why'
let age = 18
export {
	name,
	age
}
导出函数/类
export function sum(num1, num2) {
	return num1 + num2
}
export class Person {
	run() {
		console.log('run')
	}
}
import {name, age, sum, Person} from '../moduleA'
// 如果很多要导入 => import * as moduleA from '../moduleA'
// console.log(moduleA.name)

export default => 某些情况下, 一个模块中包含某个的功能, 我们并不希望给这个功能
命名, 而且让导入者自己命名, 这样import时就不需要大括号了
注意: export default在同一个模块只能有一个, 不能多个

dist = distribution( 发布 )