vue.js

特点

• 响应式 - 双向绑定
  • js的data变化，view会变化；view变化，js中的data也会变化。
• 组件化 - 模块化
• 单文件组件 template define 模版；script define js；style define 样式（scope ）同时很方便使用预处理器 jade or less

vue是实例化对象

image.png

el 对象装置的位置
template 使用的模版
data 载入的数据
语法 {{ 变量 }}
components 引入组件

---

生命周期

image.png

---

组件注册

全局 组件 注册：

vue.component('xxx',{
   el:'xx',
   tempalte:'xx'
})

image.png

很多时候 是没有必要做全局的组件注册的，这时候，可以这样做：

new vue({
  el:'xx',
  data: {},
  components:{
      'my-header':{}
  }
})

notice：
为什么data要这样展示：

data(){
          return{
              scrollY:xxx
          }
      }

而不是：

data:{
  scrolly:xxx
}

在这里没有直接采用数据绑定，而采用的数据返回，是为了防止，一个数据改变导致所有的数据改变。
避免直接的引用附值

---

vue的基本概念

image.png

api

data、$on ... 这些都是vue中实例本身存在的一些属性，具体参考document文档。

指令

• 参数通过：
• 修改器通过 .

内置组件

image.png

keep-alive 可让访问过的url 进行一个缓存

---

usage

• methods 里面放置方法

image.png

这些数组方法会触发更新。

image.png image.png

以上2种不会触发更新，这里就可以使用set。

---

vue标签属性+条件渲染

v-bind的缩写 ==> :
v-bind 动态绑定

• 条件渲染：v-if ( v-else )和 v-show

  
  image.png
  

  v-if 和 v-show的diff：
  其实根据它的名称，进行直译：v-show是用css对它的样式进行控制，是会存在于文档流中，v-if是不存在于文档流中的

---

vue 事件绑定 表单

v-on 的缩写是@

v-model表单数据绑定（双向）

eg：v-model=“a”
{{a}}
a必须在data中申明

=v-module支持3种修改器

• .layz 停滞
• .number 设置为number
• .trim 裁剪空格

---

计算属性

computed：{
  xxx(){
   return xx;
  }
}

• 属性监听

watch：{

}

image.png