vue基础

最新推荐文章于 2025-02-10 09:03:12 发布

XUELUOCC

最新推荐文章于 2025-02-10 09:03:12 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/XUELUO123456789/article/details/91406377

一.vue的实例使用

1,引入vue.js
2,创建视图层
3,启动vm实例

   <div id="app">
     <h1>{{message}}</h1>
    </div>
      <script>
         let vm=new Vue({
             el:'#app'
                data:{
                  message:你好 //渲染的数据,存放数据的变量名为任意
                  }
                   methods:{
                     //定义当前vue中用到的所有的方法
                 }
          })
          </script>

二.vue的常用指令

1.v-cloak
保持和元素实例的关联，直到结束编译后自动消失。
可解决数据渲染闪烁问题

 v-cloak：保持和元素实例的关联，直到结束编译后自动消失。
                    ---只会渲染包含v-cloak的内容
                    ---v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题
                      （即：可以隐藏未编译的标签直到实例准备完毕
                    ---比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，
                        等网络加载完成了，才会显示smyhvae-----出现闪烁问题
                    ---使用方法：
                        --- 1、给 span 标签添加 v-cloak 属性 
                            ----  <span v-cloak>{{name}}</span>
                        ---2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。直到 Vue实例化完毕以后，
                            v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户
                            ----    [v-cloak] {
                                        display: none;
                                    }

2.v-text
相当于原生js中的innerText,
v-text可以将一个变量的值渲染到指定的元素中
也可取消闪烁的问题

   ---<body>
                            <div id="div1">
                                <span v-text="name"></span>
                            </div>
                        </body>

                        <script>
                            new Vue({
                                el: '#div1',
                                data: {
                                name: 'hello smyhvae'
                                }
                            });
                        </script>

3.v-html
v-text是纯文本，而v-html会被解析成html元素。
相当于innerHTML，可解析html代码

4.v-if
移除元素；-----------适用于该数据不大可能改变
v-if=“true”;-----元素显示
v-false=“false”;-------元素隐藏，直接删除该元素标签

 <div v-if="flag">你好</div>--------元素进行显示
                     <script>
                            new Vue({
                                el: '#div1',
                                data: {
                                    flag:true,
                                }
                            });
                        </script>

5.v-show
显示隐藏元素：-------可适用于频繁的切换
原理：设置display:none;
v-show=“false”;-------元素隐藏
v-show=“true”;--------元素显示

6.v-bind
用于绑定属性----只能单向绑定

 <img v-bind:src="imageSrc +'smyhvaeString'">
                     <img v-bind:style="{width:100+'px'}"">
                     <img v-bind:class="imageSrc">
                     第一种方法：
                    -----v-bind:属性名='值'-----值必须在data中进行定义-----将会在data中找变量
                    -----v-bind:属性名='"值"'---------值将会在style样式中寻找
                    -----
                    -----简写：
                        ---：属性名="值"
                     第二种方法
                    -----v-bind:style="{属性名：属性值(有拼接)}"-----值必须在data中进行定义

7.v-model
可实现双向绑定
运用场景：
----在标签里修改内容，要求data里的name的值自动更新。从而实现双向数据绑定

  ----v-model 只能运用在表单元素中。常见的表单元素包括：
                        input(radio, text, address, email....) 、select、checkbox 、textarea。
                    
                    ----v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
                                text 和 textarea 元素使用 value 属性和 input 事件；
                                checkbox 和 radio 使用 checked 属性和 change 事件；
                                select 字段将 value 作为 prop 并将 change 作为事件。
                    ----eg:
                        <body>
                            <div id="div1">
                                <input value="请输入" v-model="name">
                            </div>
                            -----当input标签中的value值改变时，后台的value值将会改变
                        </body>

                        <script>
                            new Vue({
                                el: '#div1',
                                data: {
                                name: 'hello smyhvae'
                                }
                            });
                        </script>

8.v-on
事件绑定机制
-----v-on:dom事件='调用函数’

  -----简写：
                        ----@事件名="表达式 || 函数"
                        ----事件函数中并没有传递参数，则可省略函数中的"()"
                            <div id="div1" @click="change()">按钮</div>
                    -----<div id="div1" v-on:click="change()">按钮</div>
                          <script>
                            new Vue({
                                el: '#div1',
                                data: {
                                name: 'hello smyhvae'
                                }
                                methods:{
                                    change:function(){
                                        ...
                                        //函数体
                                    }
                                }
                            });
                    ------methods中定义的函数需要获取data中的变量
                            -----可通过----this.变量名(data中的变量)-----获取
                        </script>