vue的基本知识

标签：控制   https   dia   构建   cti   code   布尔值   bind   directive   

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!‘
  }
})

样式操作|属性绑定：
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: 首次不允许 调用时只需修改元数据，无需再模板中渲染 默认浅度依赖 适合做执行异步或开销较大的操作

vue的基本知识

标签：控制   https   dia   构建   cti   code   布尔值   bind   directive   

原文地址：https://www.cnblogs.com/wshj120828/p/11686697.html