vue实践录：vue基础学习

vue 1.3k 字 次

本文讲述 Vue 的基础知识，逐步更新。主要来自网络，有删改和自己的理解。

Vue指令

Vue 的指令是以 v- 开头的，它们作用于 HTML 元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的 HTML 特性（attribute）。

1
2
3
1.内容绑定，事件绑定（v-text、v-html、v-on基础）
2.显示切换，属性绑定（v-show、v-if、v-bind）
3.列表训练，表单元素绑定（v-for、v-on补充、v-model)

详细说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
v-text
1.v-text指令的作用是：设置标签的内容（textContent）
2.默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3.内部支持写表达式

v-html
1.v-html指令的作用是：设置元素的innerHTML
2.内容中有html结构会被解析成标签
3.v-text指令无论内容是多少，只会解析成文本
4.解析文本使用v-text，需要解析html结构使用v-html

v-on基础
1.v-on指令的作用是：为元素绑定事件
2.时间名不需要写on
3.指令可以简写成@
4.绑定的方法定义在methods属性中
5.方法的内部通过this关键字可以访问定义在data中数据

v-show
1.v-show指令的作用是：根据真假切换元素的显示状态
2.原理是修改元素的display，实现显示隐藏
3.指令后面的内容，最终都会解析成布尔值
4.值为true元素显示，值为false元素隐藏
5.数据改变之后，对应元素的显示状态会同步更新

v-if
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2.本质是通过操纵dom元素来切换显示状态（和v-show不同的地方）
3.表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4.频繁的切换v-show，反之使用v-if,前者的切换消耗少

v-else
1.作为 v-if 或 v-show 的 “else” 部分代码。  
2.必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind
1.为元素绑定属性
2.完整写法时v-bind：属性名
3.简写的话可以省略v-bind，只保留：属性名
4.需要动态的增删class建议使用对象的方式

v-for
1.v-for指令的作用是：根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是（item，index）in 数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上是响应式的

v-on补充
1.事件绑定的方法写成函数调用的形式，可以传入自定义参数
2.定义方法时需要定义形参来接收传入的参数
3.事件的后面跟上.修饰符对事件进行限制
4.enter可以限制触发的按键为回车
5.事件修饰符有多种

v-model
1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素相关联
3.绑定的数据=表单数据的值


vue工程相关

npm run build打包后得到dist目录，无法直接打开 html 文件，需放到静态服务器中，可以是tomcat、nginx等，也可以是自行搭建的，如用gin。

一些基础

使用 import 引入时，不加大括号({})，导出所有，变量随便写。加了大括号，则指定导出哪个变量（如不存在，则为null）。 

1
2
import { webtitle } from '@/settings'  // settings中必须导出有webtitle
import  foobar  from '@/settings'     // 通过foobar可获取settings所有导出的变量

其它代码片段：

1
2
// 字符串组装
document.title = `${to.meta.title} - ${webtitle}`;

一些风格

  • 命名为多单词（因为html名称为单个单词）

  • 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

  • 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

  • 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。如：

    1
    2
    3
    4
    5
    6
    7
    8
    components/
    |- TodoList.vue
    |- TodoItem.vue
    |- TodoButton.vue

    components/
    |- SearchSidebar.vue
    |- NavigationForSearchSidebar.vue

    注：可多个目录，下存放同名文件，但这样开发时稍麻烦使用前缀既方便IDE排序，又方便理解。——对于其它语言亦适用。同名函数/文件过多，会花费精力去找，去记，不当。

  • 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。如：

    搜索相关的以Search开头，设置相关的以Settings开头。

    这与自然语言不太一样，一切是为了开发和交流。 笔者之前的命名习惯(如：eeprom_write/eeprom_read)部分与此相似。

参考：https://cn.vuejs.org/v2/style-guide/

李迟 2020.11.11 周三 晚