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 ~~~
{{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 ~~~
{{msg}}
~~~ ---- ### 演示效果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 ~~~
  1. {{list.name}} {{list.age}} {{list.addr}}
~~~ -------- ### 演示效果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 ~~~

图书电商数据

ID 分类
{{list.id}} {{list.catalog}}
~~~ -------- ### 演示效果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 ~~~

微信精选文章

ID 标题 来源 图片 查看
{{list.id}} {{list.title}} {{list.source}} 阅读原文
~~~
';