Vue 是什么应该怎么用？

Vue 是什么应该怎么用？

前言

vue是Javascript里的一个框架，因为是一套框架所以在编写Vue程序前要导入Vue的包。

<!-- 包1 -->
<!-- 开发环境版本，包含所有东西 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 包2 -->
<!-- 上面个包的简约版，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

导包时遇到的问题：

报错信息：Cross-origin resource needs a 'crossorigin' attribute to be eligible for integrity validation.

解决办法,把包的链接复制到后面这个链接里转换一下：https://www.srihash.org/

Vue编写Hello World

<html>
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--导入vue包-->
<body>
    <div id="app">      <!--设置id选择器，为后面好调用div标签--> <!--id、类、标签选择器都行-->
        {{ write   }}          <!--调用后面同为write的值-->
       
    </div>
    <script>
        var app=new Vue({             //创建一个vue实例
            el:'#app',                 //通过id选择器定位到div标签，id、类、标签选择器都行
            data:{                     //存放数据
                write:"Hello World"      //变量赋值
            }         
        })
    </script>
</body>
</html>

Vue中data中的复杂数据类型处理

<html>
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  <!--导入vue包-->
<body>
    <div id="app">      <!--设置id选择器，为后面好调用div标签--> <!--id、类、标签选择器都行-->
        {{ write    }}          <!--调用后面同为write的值-->
       
        <h3>{{info.name}}</h3>
        <h3>{{info.sex}}</h3>
        
        <ul>
        <li>{{family[0]}}</li>
        <li>{{family[1]}}</li>
         <li>{{family[2]}}</li>
        </ul>
    </div>
    <script>
        var app=new Vue({             //创建一个vue实例
            el:'#app',                 //通过id选择器定位到div标签，id、类、标签选择器都行
            data:{                     //存放数据
                write:"对象数据类型和数据数据类型处理方法如下" ,     //变量赋值
                info:{name:"小红",sex:"男",year:18},              //对象数据类型
                family:["爸爸","妈妈","姐姐"]                      //数组数据类型
            }         
        })
    </script>
</body>
</html>
posted @ 2022-03-29 22:05  永恒之月TEL  阅读(30)  评论(0)  编辑  收藏  举报