标题vue.js
vue.js
文章目录
web前端基础vue.js(一)
本文仅是学习过程中的简略笔记,如有错误,烦请指正。
Vue 是一套用于构建用户界面的渐进式框架; Vue 被设计为可以自底向上逐层应用;Vue 的核心库只关注视图层
vue可写在< script>< /script>中
vue的基础案例:
< div id=“app”>
{{ message }}
< /div>
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
当创建一个vue实例时,它将data对象中所有属性值加到vue的响应式系统中,当data中的值变化时,视图中也会响应更新新的值。且只有实例被创建时,data中的属性才是响应式的,而添加的新属性则不会引起响应式的更新。
- object.freeze( )方法则是阻止修改现有属性,使得响应式系统不发生变化。
vue具有数据属性,实例属性和方法,为了与用户定义的属性分开,它们使用前缀 ; 例 如 : ∗ ∗ v m . ;例如:**vm. ;例如:∗∗vm.data===data**, - 实例方法.$watch( ),可观察一个变量的变化,且能反映一个变量变化前后的结果。
vue实例在创建时会经历一系列初始化过程,例如,设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM,在这个过程中可运行一些生命周期钩子的函数;例如,create,update,destroyed,mounted。使得用户可以在不同阶段添加自己的代码。 - vue插值:文本插值使用**{{ xxxxxxx }}的形式插入文本,被解释为普通文本;使用v-once的指令执行一次性插值,但数据更改时插值处的内容不会更新;使插入的文本是HTML样式则使用v-html指令操作元素,为HTML绑定属性用v-bind**。
- vue指令:带有v- 前缀特殊特性,指责是当表达式的值改变时,将其产生的影响响应式的作用于DOM。
指令的修饰符是用**.** 指明的特殊后缀,用于指出一个指令应该以特殊的方式绑定。eg: v-on:submit.prevent=“submit”。 - class与style绑定:操作元素的class列表和内联样式都是属性,是数据绑定中的常见需求,用v-bind处理。
传给 v-bind:class 一个对象,以动态地切换 class:
< div v-bind:class="{ active: isActive }">< /div>;
也可以在对象中传入更多字段来动态切换多个 class。此外,v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板:
< div class=“static” v-bind:class="{ active: isActive, ‘text-danger’: hasError }">< /div>;
可以把一个数组传给 v-bind:class,以应用一个 class 列表:
< div v-bind:class="[activeClass, errorClass]">< /div>