Vue简介

最新推荐文章于 2024-06-20 20:20:21 发布

ㄗòs╃牸架

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量791

点赞数

分类专栏： vue html javascript 文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/124013235

版权

一、实例化对象

<script>
     // 第一步实例化对象
    new Vue({
        el:'#app',
        data:{
             msg:'hello vue'
        }
    })
</script>

二、绑定元素

     <body>
        <div id="app">
            <!-- 使用数据{
  {数据}} -->
            {
  {msg}}
            {
  {num}}
        </div>

        <!-- 外部不可以使用语法 -->
        {
  {msg}}
        <script src="js/vue.js"></script>
        <script>
            // 实例化对象
            new Vue({
                // 绑定元素，绑定该区域可以使用vue的语法
                el:'#app',
                // data内部书写数据
                data:{
                    // 书写数据
                    msg:'hello 小程序',
                    num:0
                }

            })
        </script>
    </body>

三、什么是MVVM

MVVM是一种设计模式，M指的是model数据层 V指的是view视图层 VM指的是控制层，把数据和视图联系起来

    <body>
        <!-- 指的是MVVM中的V -->
        <div id="app">
            {
  {msg}}
        </div>

        <script src="js/vue.js"></script>
        <script>
            // new Vue指的是VM把视图和数据联系起来。
            new Vue({
                el:'#app',
                // 指的是MVVM中的M
                data:{
                    msg:'hello'
                }
            })
        </script>
    </body>

四、绑定元素

在vue中el进行绑定元素，其中绑定的一般id，因为id是唯一的，即使有很多id但是只是绑定以一个id
其中el也可以绑定标签名/类名，其中不可以绑定body或者html(因为vue后面一般使用的是模块化开发，最终spa单页面开发，防止范围设置过大)
可以实例化多个对象，但是不建议这么做，因为在后期开发中一般情况下是一个页面是一个模块，如果外侧已经实例化在实例化内部标签也不会生效。

    <body>
        <main>
            <div class="box">
                {
  {msg}}
            </div>
            <div class="one">
                {
  {msg}}
            </div>
        </main>
        <script src="js/vue.js"></script>
        <script>
            new Vue(
                el:'main',
                data:{
                    msg:'hello'
                }
            })
            new Vue({
                el:'.one',
                data:{
                    msg:'sdljfdl'
                }
            })
        </script>
    </body>

五、v-html、v-text

在vue中变量一般可以作为标签的属性，当变量作为标签的属性的时候不需要{ {}}
v-html作为标签的属性可以识别标签，xss风险可以通过识别html标签来攻击应用程序
v-text作为标签的属性不可以识别标签，把标签当做字符串

    <body>
        <div id="app">
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <div v-html="msg"></div>
            <div v-text="msg"></div>
            <