一、Vue入门基础知识
1、Vue使用的基本操作
i. 先下载,引入vue.js
ii. Vue,实例化一个vue实例化对象(new Vue({}))
1. 新建一个vue实例化对象(Vue是一个构造函数)
2. 执行vue构造函数中每一句代码
3. 将新创建的vue实例化对象赋值给vue构造函数中的this
iii. 往vue实例化对象中传入一个对象(Vue实例化传入的对象里面的值也都为对象,以键值形式对存在,如data对象)
2、Vue的基础知识(应用:普通版的todolist(待办事项))
1) el: 节点挂载
限定Vue语法的作用范围
2) Data(需要渲染的数据,Vue 实例的数据对象)
a) data的类型可以为:Object | Function。
注:组件的定义只接受 function(因为函数有自己的作用域,每一个实例的data属性都是独立的)
b) data可以为:
1. 自定义数据
2. 通过ajax获取的后台数据
3. Data是一个函数
3)Vue语法,实现对(DOM)节点的渲染、删除、添加
a) 模板渲染{{ obj }}(data中的数据可以直接在html中显示,让js变量直接在html中使用)
b) v-for (列表渲染,使用for循环遍历数据生成节点,遍历对象和数组),数据驱动视图
使用:1. 用 v-for 把一个数组对应为一组元素
v-for=”(item,index) in list”
list为源数据数组并且item是数组元素迭代的别名
index为当前项的索引
2、一个对象的 v-for
v-for="(value,key) in object"
object为data中定义的一个对象,value为对象的值,key为对象的键名
c) 条件渲染v-if、v-show(使用数据隐藏和显示节点)
1.v-if删除了节点
2.v-show隐藏了节点(使用display:none隐藏了节点)
d )删除节点,使用@click时间并在methods中定义delitem删除函数,并用v-bind绑定自定义属性,如::data-id="item.id"
事件处理@click与回调函数methods (与v-bind结合使用,因为在进行操作的时候需要传入值)
1. 在节点上直接绑定click事件4. this代表vue实例化对象
e) 添加节点,通过input的value值与data绑定
v-model与表单元素的value值的双向数据绑定(在表单控件或者组件上创建双向绑定,在节点上直接修改value属性)
双向数据绑定
1. 将表单中input的值value和data中值绑定起来
(data设置该数据的属性值title:"默认值",input中绑定v-model="title",添加按钮绑定@click="additem")
2. data改变input[value]改变
data中的title的值改变,input中的value也会发生改变
3. Input[value]改变data改变
在input中输入值,点击添加按钮,data中的数据发生改变
f) 绑定属性(自定义属性)(绑定属性值)V-bind:href,data-id
1. 简写(:href)
2. v-bind:的缩写 : (冒号)
g) v-if删除了节点,页面审查不到
v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到
h) template:定义组件模板,模板中的内容即为组件的内容
1. 在template标签中写html模板,并标注id
2. 在组件中使用template属性通过id引用template标签
3. 模板将会替换挂载的元素。挂载元素的内容都将被忽略
4. template中的html不会被浏览器首次加载时所渲染,在调用了组件之后才渲染的。
i) 应用:普通版的todolist
vue入门案例
{{message}}待办事项
{{message}}待办事项
即将添加的待办事项: {{title}}
id
标题
操作
{{item.id}}
{{item.title}}
{{key}}
{{value}}
作者信息:{{author}}
来源: 点击打开
3、Vue组件
1)组件的创建与注册
2) 组件通信
1. 父子组件通信(通过局部注册)
1)父组件传数据给子组件:(可以实现列表的渲染等操作)
a) 为什么数据要放在父组件,数据需要分发,数据可能会在多个子组件中使用,所以vue官方推荐所有的数据都放在父组件中a) 列表渲染(步骤)
b) 删除节点
c) 添加节点
添加节点首先需要进行input value值和data数据的双向绑定,然后通过 子组件的additem方法获取输入的对象,并通过$emit将数据对象传入至父组件中,父元素通过@符触发自定义事件,接收子组件传递过来的数据,并实现定义的函数。将数据push到list中。
父子组件通信版todolist
待办事项
id
标题
操作
{{item.id}}
{{item.title}}
2、兄弟组件通信(全局注册,在创建的时候就已经注册了)
a) 使用Vue.component定义(包括创建和注册)全局组件
b) 定义另外一个vue实例vm
c) 在添加数据数据兄弟组件中使用vm.$emit传送数据
d) 在获取的数据兄弟组件中created生命周期函数中使用vm.$on来接收数据,使用v-for渲染数据,绑定点击事件,删除元素
兄弟组件通信
待办事项
id
标题
操作
{{item.id}}
{{item.title}}
3、生命周期函数
d) Vue生命周期函数(执行vue构造函数的过程中,必须执行的代码,执行生命周期就是执行构造函数)
i. 生命周期:Vue 实例化对象从开始创建、初始化数据、编译模板、挂载节点elDom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子(在这个过程中会自己执行的函数)
ii. beforeCreate:vue实例化对象创建完成之前
1. this已经指向vue实例化对象,但不能访问data和methods中的属性和方法
iii. created:vue实例化对象创建完成
1. this已经指向vue实例化对象,可以访问data和methods中的属性和方法
2. 未挂载到DOM,不能访问到$el属性
3. 作用:
a) 常用于首屏数据渲染时,发送ajax请求获取数据。
iv. beforeMount:通过数据生成了全部虚拟节点(使用createElement创建的节点,但是这些节点没有插入到html文档中),但还没有挂载到el节点上。
1. 可以访问到$el
v. mounted:vue实例挂载到el节点(DOM)上
1. 把通过数据生成的虚拟节点,挂载 到el节点中
2. 作用:
a) 常用于操作真实的dom节点
vi. beforeUpdate:
1. 手动添加的虚拟节点,但是还未插入到el(真实节点)中更新之前
2. 不能操作该节点
vii. updated:
1. 手动添加的虚拟节点已经更新完成。
2. 可以操作到手动添加的节点
viii. beforeDestroy:(调用vm.$destroy()销毁实例)
1. vue实例销毁之前调用。
ix. destroyed:
1. 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
生命周期函数
- {{item}}
4、computed计算属性与watch侦听器与methods方法的区别
1)计算属性:适合大量计算,不适合大量逻辑判断,内存会缓存计算的结果,当要计算的数据相同时,它不会进行二次计算,而是取缓存里的数据。
2)methods:适合大量逻辑处理(if,for等等),它不会缓存计算的过,当要计算的数据相同时,它会进行二次计算。
3 watch:侦听需要变化的数据,执行回调函数。(可以用来监听pn的变化,实现分页)
计算属性
计算属性的结果为:{{count}}
methods计算的结果为:{{count2()}}
watch:
c的值为:{{c}}
5、插槽slot
c) 必须使用template定义,并且要使用slot-scope属性定义一个引用
删除节点步骤:1、先创建模板、创建组件、注册组件
2、父组件给子组件绑定自定义属性,将值传递给子组件;使用v-for渲染数据
3、将删除的按钮放到作用域插槽中,创建作用域插槽来传递数据
5. )三者区别:b) 作用域插槽可以传递数据,数据由子组件提供
插槽
我是头部
我是内容
- {{item}}
作用域插槽版todolist
待办事项
id
标题
操作
{{item.id}}
{{item.title}}
6、ref与$refs
1. )使用ref对元素或子组件加一个标识
2.)this.$refs.标识
3. )作用:可以直接操作真实节点和子组件
ref和$refs
我是子组件
我是子组件