vue尝鲜
最后更新于:2022-04-02 01:15:45
[TOC]
-----
## vue尝鲜
### 演示效果1
将 data 中的数据渲染到页面上。
>[success] 预览:https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo1.html
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/8f6af6041ebe886ab0c204efa39f7204_459x231.png)
>[success]示例代码1
~~~
~~~
----
### 演示效果3
渲染json数据。
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo3.html
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/4957add6431e3b313a2eebc58e4872e7_210x131.png)
>[success]代码示例3
~~~
~~~
--------
### 演示效果4
渲染图书电商数据,数据存储在libary.json中,https://ityanxi.github.io/Vue-tutorial/chapter01/libary.json
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo4.html
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/d22b5a3a9b990e0906caeca0c7697384_475x643.png)
>[success]代码示例4
~~~
~~~
--------
### 演示效果5
渲染微信精选数据,数据存储在wechat.json中,https://ityanxi.github.io/Vue-tutorial/chapter01/wechat.json
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo5.html
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e1d27895e36f2cf00d7093a56e97a12_768x702.png)
>[success]代码示例5
~~~
~~~
';
{{message}}
{{msg2}}
{{msg}}
{{arr}}
{{json}}
~~~
-----
### 演示效果2
实现数据双向绑定。
>[success]预览:https://ityanxi.github.io/Vue-tutorial/chapter01/02vue-demo2.html
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/b35cec6d6a0ce4579a06a197dc4cca54_243x70.png)
>[success]示例代码2
~~~
{{msg2}}
{{msg}}
{{arr}}
{{json}}
{{msg}}
- {{list.name}} {{list.age}} {{list.addr}}
图书电商数据
ID | 分类 |
---|---|
{{list.id}} | {{list.catalog}} |
微信精选文章
ID | 标题 | 来源 | 图片 | 查看 |
---|---|---|---|---|
{{list.id}} | {{list.title}} | {{list.source}} | 阅读原文 |