vue.js

标题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中的属性才是响应式的，而添加的新属性则不会引起响应式的更新。

1. object.freeze( )方法则是阻止修改现有属性，使得响应式系统不发生变化。
   vue具有数据属性，实例属性和方法，为了与用户定义的属性分开，它们使用前缀$；例如：\ast \ast vm.$data===data**,
2. 实例方法.$watch( ),可观察一个变量的变化，且能反映一个变量变化前后的结果。
   vue实例在创建时会经历一系列初始化过程，例如，设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM，在这个过程中可运行一些生命周期钩子的函数；例如，create，update，destroyed,mounted。使得用户可以在不同阶段添加自己的代码。
3. vue插值：文本插值使用**{{ xxxxxxx }}的形式插入文本，被解释为普通文本；使用v-once的指令执行一次性插值，但数据更改时插值处的内容不会更新；使插入的文本是HTML样式则使用v-html指令操作元素，为HTML绑定属性用v-bind**。
4. vue指令：带有v- 前缀特殊特性，指责是当表达式的值改变时，将其产生的影响响应式的作用于DOM。
   指令的修饰符是用**.** 指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。eg: v-on:submit.prevent=“submit”。
5. 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>