初始vue

Posted 2020-11-30 yuangegena

初识VUE

vue：渐进式js框架 数据驱动

官网：https：//cn.vuejs.org/

? new Vue ({

? el:‘元素‘ //vue实例所管理的元素 不能挂在到html或body

? data:{

? //模板里要渲染的数据

? }

? })

=> 1.产生一个对象，2.改变this指向、指向新创建的对象，3.执行代码，4.返回对象

template 含有变量或表达式的html

{{差值表达式}} Mustache 标签

数据变了，视图会自动变化（中间有个虚拟dom）

常用指令

v-bind

? 可以把变量的值绑定到元素上（常用），可简写为:":"

? 单向绑定命令，数据变了视图会变，视图变了数据不变

? :style="{key:value}"

? :class="{‘类名1‘,布尔表达式,...}"

? :class="[类名1,类名2,...]"

v-html

? 绑定html的元素并渲染

? <div v-html="变量"></div>

v-once

? 只绑定一次

? <div v-once>{{变量}}</div>

v-on

? 事件处理函数和自定义方法都放在methods里（常用），可简写为:"@"

? @事件的名字="事件处理函数" v-on:事件的名字="事件处理函数"

? $event 是vue当中的事件对象

修饰符:

? .prevent: 组织默认行为 .self: 只当事件是从侦听器绑定的元素本身触发时才触发回调

? .enter: 键修饰符enter .stop: 阻止冒泡 .once: 只触发一次回调

v-model

? 双向绑定命令，数据变了视图会变，视图变了数据会变

修饰符:

? .number: 数字 .lazy: 失去焦点后变化 .trim: 删除前后空格

v-if

? 惰性的：渲不渲染--更高的切换开销

v-show

? 切换样式--更高的初始渲染开销

v-for

? 遍历数字，数组 => (元素，下标) in 数组 (值，键，下标) in 对象

? v-for="变量 in 数组" :key="唯一值"

computed: 计算属性

函数:

? 名字(){

? return 值 (如果这个值来自于data data数据变了，这个值会自动变)

? }

对象:

? 名字:{

? set(v){},

? get(){}

}

拓展：

? v-model = "数组" v-bind:key = "变量" 当复选框选中的时候，自动把变量添加到数组中

? this.$nextTicl(callback) 延迟执行回调函数直到dom就绪