vue的基本知识

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

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

vue:官网:https://cn.vuejs.org
   API:https://cn.vuejs.org/v2/api/

 

1>声明式渲染

基本使用:new出来一个Vue的实例,传一堆配置参数,控制一片html。

div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
Hello Vue!
 
2>指令
拓展了html语法功能,区别了普通的html属性
vue自带的指令:

    v-show="布尔"                         v-if="布尔"
区别:   操作css              操作dom
场景:   适合频繁切换          适合不频繁切换
性能:   初始渲染消耗          频繁切换回有消耗

 

样式操作|属性绑定:
v-bind:class="数据|属性|变量|表达式"
    :class/style = " 数据 " 数据类型:字符/对象/数组/对象型数组/字符型数组
    :class="{类名:true,类名2:false}" 布尔值决定样式是否使用
    :style="[{css属性名:值},{css属性名小驼峰:值}]" css属性名中有-时 可将属性名写成字符

事件:方法为函数
    v-on:事件名="方法"
      @事件名="方法" 简写
      @事件名="方法(参数)"
      @事件名="方法($event,参数)"

双向绑定的实现:

        1.单向绑定模拟双向绑定: :value="..." model->view

                     v-on:input="fn($event.value)"

         输入时把事件对象的value携带到方法,方法修改了model
        2.指令实现双向绑定:v-model:创建双向数据绑定(M<->V) 用在能生产数据的表单元素

其它指令:
v-once 渲染一次
v-pre 原样输出,不编译
v-cloak 防止闪烁

v-text="数据名"    传递文本

v-html="标签"    非转义输出

 

自定义指令:指令是个函数|对象,用来操作dom的,里面的this 返回window
全局:Vue.directive("指令名不带v-",函数(el,binding))
    el == 使用指令的DOM元素
    binding 是个对象 含有转入的参数(binding.value)
    一次只能定义一个指令
局部:定义在选项里面
   directives:{指令名不带v-:函数(el,binding){}}
   可以定义多个指令
   指令是个函数(简写),可以是个对象

 

3>计算属性

  计算属性:是一个函数,所依赖的元数据变化时,会再次执行,平时会缓存,是响应式的,需要在模板中渲染才可以调用。

  computed:{
    计算属性:function(){return 返回值} 使用:{{计算属性}}
  }
与methods的区别:
        计算属性中的函数直接用插值表达式,不需要调用,methods中的函数需要调用(函数())
        方法会每次调用,计算属性不会。
        计算属性的性能高,适合做筛选,基于它们的响应式依赖进行缓存的
        方法:适合在列表渲染使用,强制渲染执行。

4>数据观测:

属性检测|数据观测:需要在数据变化时执行异步或开销较大的操作时
watch:{
   数据名:"methods函数名" 数据名 == data的数据
   数据名:函数体(new,old)
   数据名:{
    handler:fn(new,old),
    deep:true 深度检测 默认false
    immediate:true 首次运行 默认为false
   }
}
默认情况下只能检测基本数据类型,打开深度检测,才能检测复杂数据类型(即复杂数据中的一个属性值发生改变,都会再次执行)

计算属性和属性检测的差异:
计算属性computed: 首次运行 调用时需要在模板中渲染,修改计算所依赖元数据 默认深度依赖(修改的数据是依赖的数据 即修改对象中的属性a也需要依赖对象中的属性a) 适合做筛选,不可异步
属性检测watch: 首次不允许 调用时只需修改元数据,无需再模板中渲染 默认浅度依赖 适合做执行异步或开销较大的操作

posted @ 2019-10-16 17:06  Glu__TtoNy  阅读(109)  评论(0编辑  收藏  举报