web前端开发框架——Vue的知识总结（1）

一、简介

Vue.js的定位是一个渐进式框架 前端三大mvvm框架之一，Vue上手比较快，只要你会HTML、css、js等一些基础就能轻松做开发。 vue官方文档

二、导入Vue.js库

<script src="vue.js"></script>

三、操作语法

1.模板标签

1）文本属性语法

{{}} 可以理解为可执行简单js解析data数据地方
v-text 把data数据显示出来
v-html 把dta数据显示出来(解析html字符串)
v-bind:属性 绑定html标签属性
v-bind:title="ti" (:属性)
:title="ti"

2）条件渲染

v-show="表达式"
当表达式为真显示内容，为假不显示内容
	v-if=“表达式”
当表达式为真显示内容，为假不显示内容
	v-show通过css方式隐藏显示元素
v-if通过移除html标签显示隐藏

3）列表渲染

<p>v-for="(item,index) in list" :key="index">{{item}}---{{index}}</p>
循环显示列表元素

4）事件绑定

v-on:事件名称
@:事件名称
	v-on:click="show"
	@click=“show“

5）事件修饰符

定义:修饰事件处理

5）.1事件修饰符

.once
.stop 停止事件冒泡
	body>div>p>button
	事件从最小元素发生逐级向上冒泡通知事件
	.stop停止事件
	
.prevent
	a默认有跳转到链接的事件
	.prevent阻止默认事件

5）.2按键修饰符号

.enter回车键被触发 
	.left/.right/.up/.down
	.esc
	.space

6）表单绑定

v-model
text通常值是字符串
checkbox	不给值 		选中为true 不选中为false
			给值-一组	data数据绑定为一个数组
radio	
	单个值(name属性)
:disabled=""
表单不可用 布尔值

2.实例属性

1）el：

vue模板范围
data
vue的数据存放中心
methods
vue存放方法中心

2）computed

定义：从现有数据计算出新的数据
computed:{
olist(){return this.list.filter(item=>item.age>18)}}

3）watch

定义:实时检测一个数据的变化-只要数据发送任何改变 都能检测
watch:{

“检测的数据名”:{ handler:function(nval,oval){ //数据变化时的操作}}}

4）created

数据在模板里渲染完毕，组件创建完毕 回调函数

5）directives 指令

定义：能让我们获取当前指令所在的html元素
模式
		inserted
		bind
		updated
		默认 bind 和updated
myfocus:function(el,obj){
// el指令所在html标签
// obj.value 指令的值
}
调用 v-myfocus=“flag”

3.组件

1）定义与使用

1. 定义组件
	let child = {template:`<div>...</div>`}
2. 注册
	components:{child}
3.使用
	当html标签
	<child></child>
	<child/>

2）组件的数据

data:function(){
	 reuturn{msg:1}
}

3）组件的传参(父向子)

默认数据&数据类型限定
	props:{
		'pnum':{default:1,type:[String,Number,Boolean,Array]
	}
1.调用组件的时候，用属性方式传递<child:pum=5>
2.在组件内容接收参数	props:["pnum"]
3.当数据使用了

4）单项数据流

解释:父亲组件传递给子组件的数据 需要只读(父亲的数据可能传递多个子组件的)
需要修改父亲传递过来的数据
		1.定义数据data:function(){return{num:0}}
		2.接收父亲的数据props:["pnum"]
		3.重新赋值定义好的数据(reated(){this.num=this.pnum}

5）组件的插槽

作用:可以让组件产生嵌套关系
使用
	1.定义child组件用template=“<div><slot></slot></div>"
	2.调用组件<child>中间的内容会被放入组件templat里面的slot标签里的</child>

6）命名插槽

作用:特殊的内容去特殊的位置
使用
	1.在嵌套时候 <h1 slot="title">
				<p slot="foot">
	2.组件内部接收
				<slot name="title">
				<slot name="foot">
				<slot></slot>
				没有命名默认