Vue学习笔记

最新推荐文章于 2024-11-10 15:10:09 发布

mingshengda

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量133

点赞数 1

分类专栏： mingsheng的学习笔记文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/mingshengda/article/details/125832972

版权

mingsheng的学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

第一个Vue程序

<html>
    <head>
     <title>Vue</title>

    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
            el: '#app',
            data: {
            message: 'Hello Vue!'
                 }
                            })
        </script>

    </body>
</html>

el:挂载点

<html>
    <head>
     <title>el:挂载点</title>

    </head>
    <body>
     {{message}}
       <div id="app" class="vue">
        {{  message  }}
        <span>{{message}}</span>
       </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
          var app=new Vue({
            //el:"#app"
            //el:".vue",
            el:"div",
            data:{
                message: "mingsheng"
            }
          })
        </script>

    </body>
</html>

vue实例的作用范围：vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他选择器：可以，但是建议使用ID选择器。
是否可以设置其他的dom元素：可以使用其他双标签（不包括html和body）

data:数据对象

<html>
    <head>
     <title>data:数据对象</title>

    </head>
    <body>
   <div id="app">
    {{message}}
    <h2>{{school.name}}{{school.id}}</h2>
    <ul>
        <li>{{campus[0]}}</li>
        <li>{{campus[1]}}</li>
    </ul>
   </div>
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
         var app=new  Vue({
            el:"#app",
            data:{
                message:"hello data!",
                school:{
                    name:"mingsheng",
                    id:"7789555"
                },
                campus: ["一","二"]
            }
         })
        </script>

    </body>
</html>

vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时，遵守js语法即可。

v-tex指令：设置标签的内容，默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，内部支持写表达式。

<html>
    <head>
     <title></title>
     <div id="app">
        <h2 v-text="message+'!'"></h2>
        <h2 v-text="info">cd:{{info}}</h2>
     </div>
    </head>
    <body>
  
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
            message:"mingsheng",
            info:"csdn"
        }
       })
        </script>

    </body>
</html>

v-html指令的作用是，设置元素的innerHTML，内容中有html结构会被解析为标签，v-text指令无论内容是什么，只会解析为文本，解析文本使用v-text，需要解析html结构使用v-html。

<html>
    <head>
     <title></title>
     <div id="app">
        <p v-html="content"></p>
     </div>
    </head>
    <body>
  
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
            content:"<a href=http://www.baidu.com>百度首页</a>"
        }
       })
        </script>

    </body>
</html>

v-on：指令的作用是：为元素绑定事件，事件名不需要写on,指令可以简写为@XXX。绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中数据。
事件绑定的方法写成函数调用的形式，可以传入自定义参数。定义方法时需要定义形参来接收传入的实参，事件的后面跟上.修饰符可以对事件进行限制。.enter可以限制触发的按键为回车，事件修饰符有多种

<html>
    <head>
     <title></title>
     <div id="app">
        <input type="button" value="v-on指令" v-on:click ="doit">
        <input type="button" value="vvv" v-on:monseenter="doit">
        <input type="button" value="双击事件" v-on:dblclick="doit">
        <input type="button" value="v-on简写" @dblclick="doit">
        <h2 @click="changeFood">{{food}}</h2>
     </div>
    </head>
    <body>
  
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            doit:function(){
              alert("doit");
            },
            changeFood:function(){
                this.food+="好好吃！"
            }
        }
       })
        </script>

    </body>
</html>

v-show指令的作用是：根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，数据改变之后，对应元素的显示状态会同步更新。

<html>
    <head>
     <title></title>
     <div id="app">
      <img src="https://i04piccdn.sogoucdn.com/11541793fa970040" v-show="true">
      <img src="https://i03piccdn.sogoucdn.com/1a280d5f25d4fab0" v-show="false">
     </div>
    </head>
    <body>
  
       
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
            isShow:false
        }
       })
        </script>

    </body>
</html>

v-if指令的作用是：根据表达式的真假切换元素的显示状态，本质是通过操纵dom元素来切换显示状态。表达式的值为true，元素存在于dom树中，为false，从dom树中移除。频繁的切换v-show，反之使用v-if，前者的切换消耗小。

<html>
    <head>
     <title></title>
     <div id="app">
     <p v-if="true">我是一个标签</p>
     <input type="button" value="切换显示" @click="toggleIsShow">
     <p v-if="isShow">我是第二个标签</p>
     </div>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            toggleIsShow:function(){
                this.isShow=!this.isShow;
            }
        }
       })
        </script>

    </body>
</html>

v-bind指令的作用是为元素绑定属性，完整的写法是v-bind:属性名。简写的话可以省略v-bind，需要动态的增删class建议使用对象的方式。

<html>
    <head>
     <title></title>
     <div id="app">
     <img v-bind:src="imgSrc" :title="imgTitle+'!!!!'"><br>
     </div>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
           imgSrc:"https://i01piccdn.sogoucdn.com/d8616de8633e36bf",
           imgTitle:"mingsheng"
        }
       })
        </script>
    </body>
</html>

v-for指令的作用是：根据数据生成列表结构，数组经常与之使用，语法是（item,index)in 数据。
item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的。

<html>
    <head>
     <title></title>
     <div id="app">
     <ul>
        <li v-for="item in arr">
            hello!
        </li>
     </ul>
     </div>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
       var app=new Vue({
        el:"#app",
        data:{
           arr:[1,2,3,4,5]
        }
       })
        </script>
    </body>
</html>

v-model指令的作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<–>表单元素的值