1.vue简介
vue2受到了MVVM模型的启发，可以做到双向数据绑定
2.vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，vue实例代理了data，methods中变量的访问。在实例中可以通过this访问当前实例中的data，methods。
根组件（模块）
let option={
data:{},
methods:{},
// 生命周期钩子函数
created(){
this...
},
...,
watch:{
msg(){
this
}
},
computed:{
students_male(){
this
}
}
}
let vm = new Vue(options)3.模板语法 数据的渲染
将状态显示到视图中 model->view
绑定
1）双大括号{{}}
可以存在任意变量或者表达式
变量：
{{msg}} //data:{msg:"hello'}
方法：方法一定要加括号
{{foo()}} //methods:{foo(){console.log('---------------')}}
表达式：
{{JSON.stringify(Object)}} //data:{Object:{}}
{{msg?msg:"hello"}} //data:{msg:' '}
2）指令
v-on:eventType.事件修饰符="事件处理函数"
<form v-on:submit.prevent='函数'>阻止默认行为
<form v-on:submit.stop='函数'>阻止冒泡
<form v-on:submit.once='函数'>只绑定一次
<form @submit=""> v-on:简写成@
eventType
dom类型：click，submit，hover...
自定义类型：dd...(常用在组件通信中)
v-bind：属性名=“属性值” v-bind:简写成:
<img src="常量"/>
<img v-bind:src="变量或表达式或方法"/>
<img :src="变量或表达式或方法"/>
v-for=“”
//data:{arr:[{},{},{}]}
<ul>
<li v-for='item in(of) arr' v-bind:key='item.id'></li>
</ul>
v-if="xxxx"
v-else-if ="xxxx"
v-else="xxxx"
条件满足时才渲染
v-show="xxxxx"条件满足时显示，但都被渲染
通过display:none控制是否显示
v-bind:model=''（通常应用在form元素中）
v-model（通常应用在表单元素中）
双向数据绑定
1.将msg值作为input的默认值
2.如果用户操作了表单，v-model会将表单元素中的值映射到msg中
<input v-model='msg'>
v-html
将html输出并且解析
4.生命周期
beforeCreate
vue实例还未被创建，vue实例代理了data和methods
数据劫持，data ->vue Object.defineProporty()
created
vue实例创建完毕，可以通过this来直接访问data,methods中的属性
beforeMount
此时具有渲染函数，template-ast->render 模板变成渲染函数的过程，此时只有虚拟节点。
mounted
已经完成了初步绑定，render，完成渲染，虚拟节点被置换成模板节点
可以在这个期间执行ajax
-----数据改变----
beforeUpdate
在重新渲染之前执行
updated
完成了重新渲染
------------------
beforeDestroy
在销毁之前，释放资源（闭包，内部函数访问了外部变量）
destroyed
销毁后
5.双向数据绑定
v-model表单
<form v-on:submit.prevent="submitHandler" v-bind:model="role">
角色<input type="text" v-model="role.name">
<input type="submit" >
</form>
/*data(){
return{
role:{}
}
}*/
6.事件
v-on:click='事件处理函数'
v-on:click.事件修饰符='事件处理函数 '
v-on:click.事件修饰符='事件处理函数（传参）'
7.计算属性和监听器
1.计算属性: 像函数一样定义，但是无法接收参数
定义：
{data:{
students:[]
},
computed:{
students_male(){
//对data中数据进行计算后输出
return this.students.filter()
}
}
}
特性
1多次调用同一个计算属性，计算属性函数只执行一次
2当被计算的属性发生变化，计算属性函数会重新执行
调用
就像属性一样被调用，不加括号
2.监听器
无需点击搜索按钮，就可以进行搜索
1.定义：
{
data:{
msg:'',
obj:{}
},
watch:{
//当msg变化时就会调用这个函数
msg(newVal,oldVal){
},
obj(newVal,oldVal){
}
}
}
v-for 和 v-if是否可以共用？会出现什么问题？优先级什么？v2和v3有区别吗？
v2
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个
v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码将只渲染未完成的 todo。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>) 上。
如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>8.模块化（组件）
vue中模块是最小组成单元
1.组件定义
vue参数的定义过程
let stuList={
template:`
<div v-for=''>{{msg}}</div>
//一个组件的根只能有一个
`,
data(){
return {
}
},
methods:{}
}
2.组件的注册
1.全局注册
将组件注册到vue中，所有组件都可以使用该组件
//Vue component注意不要写错了！
Vue.component('stu_list',stuList)
2.局部注册
将组件注册到某个组件的内部，只有当前组件可以使用这个组件
let articlePage={
template:` `,
data(){
return {
}
},
components:{
'stu_list':stuList
}
}
3.参数的传递
相当于声明了一个形式参数
组件内部如何接受传递的参数？
let sList={
props:['data']
}
形参进行类型限制
let sList={
props:{
data:Array
}
}
形参，类型限制，校验
let sList={
props:{
data:{
type:Array,
default:[],
validator:function(val){
}
}
}
}
4.插槽
简单插槽
具名插槽
component:article-page
<div>
<slot name="header></slot>
<slot></slot>
<slot name='footer></slot>
</div>
调用
<article-page>
<div slot='header></div>
<div ></div>
<div slot='footer></div>
</article-page>
作用域插槽
作用域插槽可以通过回调函数的思想来理解
components:stu-list
<ul>
<li v-for='item in data' :key='item.id'>
<slot v-bind:row="item></slot>
</li>
</ul>
component:article-Page
<stu-list>
<div clot-scope='scope'>
{{scope.row.xxx}}
</div>
</stu-list>
父组件调用子组件，子组件在执行过程中又返回调用父组件的内容【插槽】，在调用过程中通过v-bind为这个插槽传递参数，在父组件通过slot-scope=‘scope’来获取传递过来的参数，进行自定义渲染
5.事件发射$emit
$emit
可以触发监控在当前组件上的指定事件
stu-info
<div>
{{msg}}
<button @click="closehandler> 关闭</button>
</div>
methods：{
closehandler(){
this.$emit('close',1)
}
}
article-page
<stu-info @close='close'></stu-info>
methods:{
close(num){
alert(num);
}
}
扫一扫
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
