VUE学习1——简单概念

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
一、VUE实例

1. VUE实例,每个应用通过VUE函数 new一个实例开始，所有的vue组件都是vue实例，可以接受选项对象
2. var vue new VUE({ //选项 })
   选项列表：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
3. 每个VUE实例在被创建时都会运行一系列初始化过程，例如：数据监听、编译模板、将实例挂载到DOM，并且在数据变化时更新DOM，同时该过程会运行生命周期钩子的函数

二、模板语法

1. vue使用了基于html的模板语法
2. 文本：数据绑定常见形式： “Mustache”(双大括号)语法 : {{message}}
3. 原始HTML ： 可以在标签使用 v-html 指令 ，使显示真正的html 例如： <p v-html="rawHtml"></p>
4. 指令:指令是带有 v-前缀的特殊特性，针对单个js表达式

三、计算属性

1. 计算属性基于响应式依赖缓存（生成一次结果，只要响应式依赖不发生改变，就可以立即返回结果）；而方法不进行缓存，每次都会调用函数。
2. 侦听器：vue通过watch选项提供了一个更通用的方法，来响应数据的变化。watch允许执行异步操作

四、class和style绑定

1. 绑定HTML CLASS : 例： <div v-bind:class="对象名"></div> <div v-bind:class="[对象1,对象2]"></div>
2. 绑定内联样式：例：<div v-bind:style="样式对象"></div> <div v-bind:style="[样式对象1,样式对象2]"></div>