Create Time: 7th February 2024
Title: "[[Vue-Basic]]"
Author:
- AllenYGY
status: DONE
tags:
- NOTE
- Vue
- Ch1
- WEB
created: 2024-03-20T17:14
updated: 2024-05-31T01:27
axios
Vue模板语法有2大类:
Vue中有很多的指令,且形式都是:V-2???,此处我们只是拿v-bind举个例子。
Vue中有2种数据绑定的方式:
data必须使用函数式,否则会报错。
观察发现:
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
通过vm对象来代理data对象中属性的操作(读/写)
更加方便的操作data中的数据
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/Fetter内部去採作(读/写)data中对应的属性。
Vue.config.keyCodes.自定义键名 = 键码
,可以去定制按键别名computed和watch之间的区别:
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
写法:
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
写法:v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表(遍历数组)</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串(用得少)</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数(用得少)</h2>
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
通过setter实现监视,且要在new Vue时就传入要监测的数据。
通过包裹数组更新元素的方法实现,本质就是做了两件事:
Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!
<input type="text"/>
则v-model收集的是value值,用户输入的就是value值。
<input type="radio"/>
则v-model收集的是value值,且要给标签配置value值。
<input type="checkbox"/>
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染(动态控制节点是否存存在)
v-else : 条件渲染(动态控制节点是否存存在)
v-show : 条件渲染 (动态控制节点是否展示)
<style> [v-cloak]{ display:none; } </style> <div id="root"> <h2 v-cloak>{{name}}</h2> </div>
new Vue({
directives:{指令名:配置对象}
})
new Vue({
directives:{指令名:回调函数}
})
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
Vue
实例1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
区别如下:
使用template可以配置组件结构。
<school></school>
关于组件名:
- 一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
- 多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
关于组件标签:
<school></school>
<school/>
不用使用脚手架时,会导致后续组件不能渲染。
const school = Vue.extend(options)
//可简写为:
const school = options
Vue
解析时会帮我们创建school组件的实例对象,Vue
帮我们执行的:new VueComponent(options)
。Vue.extend
,返回的都是一个全新的VueComponent!VueComponent.prototype.proto === Vue.prototype
让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。