Java学习日记34（vue框架单页面的基础学习）

目录

一，vue入门应用

1，创建一个html文件并在同项目内引入vue.js文件

2，编写应用demo

3，页面效果

二，条件渲染v-if

1，编写应用demo

2，测试

3，测试v-if-else连续判断

三，列表渲染

1，编写应用demo

2，页面效果

四，事件处理

1，用v-on去监听DOM事件，并在触发时运行一些javascript代码

2，页面效果

五，使用Axios异步通讯

1，导入vue.js和axios.js

2，编写一个data.json文件

3，编写demo

4，引用数组

六，表单输入绑定

1,数据双向绑定

2，v-model指令

3，文本的数据绑定

4，多行文本的数据绑定

5，复选框的绑定

6，单选按钮的绑定

7，下拉选择框的绑定

七，组件基础

八，计算属性

九，插槽基础

十，自定义事件

---

一，vue入门应用

1，创建一个html文件并在同项目内引入vue.js文件

2，编写应用demo

Viewmodel层的el用于关联view层的数据，而data用于关联model层数据

3，页面效果

在view中的{ {message}}能显示viewmodel层data里的数据。

二，条件渲染v-if

1，编写应用demo

在v-if中绑定viewmodel层data里的数

2，测试

如果awesome为true则显示Vue is awesome

如果awesome为false则显示Oh no

3，测试v-if-else连续判断

结果

注意标签中是书写格式

三，列表渲染

1，编写应用demo

{}前的表示对象名，里面的就是属性值，在view中通过data的属性值来调用。

2，页面效果

四，事件处理

1，用v-on去监听DOM事件，并在触发时运行一些javascript代码

在view中定义一个按钮，并写上v-on：click标签写上方法名，在viewmodel中的methods对象中定义一个greet方法。

2，页面效果