Day03-Vue入门

" }",

" })",

" ",

“”,

“”,

“”,

],

“description”: “my vue template in html”

}

}

然后，在vscode中创建新的html文件，在文件第一行输入vue html按下Tab键即可快速生成Vue模板代码。

二、基本语法

=====================================================================

1、基本数据渲染和指令

---

创建 01-基本数据渲染和指令.html

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

data: {

content: ‘我是标题’,

message: '页面加载于 ’ + new Date().toLocaleString()

}

{{content}}

{{content}}

2、双向数据绑定

---

创建 02-双向数据绑定.html

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

{{searchMap.keyWord}}

data: {

searchMap:{

keyWord:‘你好’

}

}

3、事件

---

创建 03-事件.html

查询

<button @click=“search()”>查询

4、修饰符

---

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为

保存

效果图：

如果文本框不输入任何数据，点击保存，页面会有请输入用户名的弹窗出现。

如果输入了信息，则在控制台会有“提交表单”的提示信息输出：

5、条件渲染

---

v-if：条件指令

同意许可协议

你好呀

vue

v-show：条件指令

使用v-show完成和上面相同的功能

你好啊

vue

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

---

v-for：列表循环指令

例1：简单的列表渲染

• {{n}}
• {{n}}----{{index}}

• React

  • 介绍一下react

  • React单项数据流

  • react生命周期函数和react组件的生命周期

  • react和Vue的原理，区别，亮点，作用

  • reactJs的组件交流

  • 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

  • 项目里用到了react，为什么要选择react，react有哪些好处

  • 怎么获取真正的dom

  • 选择react的原因

  • react的生命周期函数

  • setState之后的流程

  • react高阶组件知道吗？

  • React的jsx，函数式编程

  • react的组件是通过什么去判断是否刷新的

  • 如何配置React-Router

  • 路由的动态加载模块

  • Redux中间件是什么东西，接受几个参数

  • redux请求中间件如何处理并发