Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API
Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 在 Vue 中,父子组件通过 props 传递通信。
声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。
事件 事件源:发生事件dom元素
事件:发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数
- 在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
- 在v-on:事件名的赋值语句中是当前时间触发调用的函数名
- 在vue中事件的函数统一定义在Vuq实例的methods属性中
- 在vue定义的事件中this指的就是当前的Vue实例,可以在事件中通过使用this获取Vue实例中相关数据
- v-if 的特点:每次都会重新删除或创建元素
- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
- v-if 有较高的切换性能消耗,v-show 有较高的初始渲染消耗
- 使用场景: 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show; 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if
V-for:作用就是用来对对象进行遍历的(数组也是对象的一种)
- v-for循环普通数组
索引值:{{index}} --- 每一项:{{item}}
- v-for循环对象数组
Id:{{ item.id }} --- 名字:{{ item.name }} --- 索引:{{index}}
- v-for循环对象 在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引
值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}
- v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
- v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML
百度一下
百度一下
我是h1
我是h1
data {styleObj1: { color: 'red', 'font-weight': 200 },styleObj2: { 'font-style': 'italic' }
}
我是h1
使用 对象来代替三元表达式,提高代码的可读性:
我是h1
- beforeCreate(){}
生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有初始化好data 和 methods 属性
- created(){ }
生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关关方法,但是还没有挂载到页面中
- beforeMount(){}
生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译,但是还有完全挂载到页面中
- mounted(){}
生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面,挂载到了页面指定的容器中显示
- beforeUpdate(){}
生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据,因为此时还没有开始重新渲染DOM节点
- updated(){}
生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致,界面已经被重新渲染好了
- beforeDestory(){}
生命周期第七个函数,Vue实例就已经从运行阶段进入到了销毁阶段,Vue中所有数据 methods components 还没有真正执行销毁的过程
- destoryed(){}
生命周期的第八个函数,该函数执行时,Vue实例彻底销毁,调用后,vue 实例 指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁