Vue基础指令

最新推荐文章于 2023-02-15 19:43:07 发布

ʚ浅初.ɞ

最新推荐文章于 2023-02-15 19:43:07 发布

阅读量618

点赞数

分类专栏： vue.js 文章标签： javascript 前端开发语言 vue.js

本文链接：https://blog.csdn.net/qq_61195495/article/details/121624151

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Vue简介

vue是一套构建用户界面的渐进式框架，是尤由雨溪在2014年发布

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

二、Vue下载

Vue官网地址

三、Vue初始

1.基本框架

    <div id="app">{{vue提供的模板语法，里面可以嵌套变量或者进行简单的运算}}</div>
    <script>
        var vue = new Vue({
            el: "挂载DOM元素",
            data: {
                提供的数据模型
            }
        })
    </script>

2.例：

<div id="app">
    <h3>{{ name }}</h3>
    <p>{{ age * 2 }}</p>
    <p>{{ show ? "展示" : "隐藏" }}</p>
</div>
<script>
    // 初识化vue实例对象
    var vue = new Vue({
    el: "#app",
    data: {
        name: "tom",
        age: 23,
        show: true
    }
});
</script>

四、Vue指令

1.v-text和v-html

<div id="app">
    <!-- 文本绑定指令 -->
    <h3 v-text="info"></h3>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            info: "<span>我是span标签</span>",
        }
    });
</script>

<div id="app">
    <!-- 文本绑定指令 -->
    <h3 v-html="info"></h3>
</div>
<script>
    // 初识化vue实例对象
    var vue = new Vue({
         el: "#app",
         data: {
             info: "<span>我是span标签</span>",
         }
     });
</script>

2.v-model

v-model指令一般用于表单元素（包在from标签里的元素）

<div id="app">
    <input type="text" v-model="content" />
</div>
<script>
    var vue = new Vue({
         el: "#app",
         data: {
           content: "",
         }
    });
</script>

双向数据绑定

视图------模型页面输入框的内容发生变化模型中的数据也会跟着变化

模型------视图 data模型中的数据发生变化了视图中的标签内容也会变化

五、事件

1.事件处理

<div id="app">
     <input type="text" v-model="content" />
     //v-on可以用@来代替
     <button v-on:click="say">点击</button>
</div>
<script>
     var vue = new Vue({
         el: "#app",
         data: {
             content: "",
         },
         methods: {
             say: function(str) {
                 console.log(this.content);
                },
         }
     });
</script>

event.target这个属性可以获取触发事件的标签

<div id="app">
    <!-- 文本绑定指令 -->
    <input type="text" v-model="content" />
    <button @click="say('你好')">点击</button>
    <button @click="say2">点击</button>
    <p>{{info}}</p>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            content: "",
            info: ''
        },
        methods: {
            say: function(str) {
                this.info = this.content + str
            },
            say2: function(event) {
                console.log(event.target) //这个属性可以获取触发事件的标签
            }
        }
   });
</script>

2.事件修饰符

.stop阻止事件冒泡

<style>
    #big {
        width: 100px;
        height: 100px;
        background-color: red;
    }      
    #small {
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
</style>
</head>
<body>
    <div id="app">
        <div id="big" @click="fn1">
            <!-- .stop是阻止事件冒泡的修饰符 -->
            <div id="small" @click.stop="fn2"></div>
        </div>
    </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                info: ''
            },
            methods: {
                fn1: function() {
                    console.log('大盒子被点击了')
                },
                fn2: function() {
                    console.log('小盒子被点击了')
                },
            }
        });
    </script>
</body>

.prevent是阻止默认行为的修饰符

<!-- .prevent是阻止默认行为的修饰符 -->
<a href="https://www.baidu.com" @click.prevent="fn3">跳转</a>

.enter和.delete

<div id="app">
        <input type="text" v-model="info" @keyup.enter="fn4">
        <input type="text" v-model="info" @keyup.delete="fn5">
</div>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                info: ''
            },
            methods: {
                fn4: function() {
                    console.log(this.info)
                },
                fn5: function() {
                    this.info = ''
                }
            }
        });
    </script>

按回车输出到控制台，按delete键删除

六、属性绑定

语法：v-bind:属性名=值或者 :属性名=值

    <div id="app">
        <a v-bind:href="url">百度</a>
        <img :src="imgSrc" alt="">
        <button @click="fn">点击</button>
    </div>
    </div>
    <script>
        // 初识化vue实例对象
        var vue = new Vue({
            el: "#app",
            data: {
                url: 'https://www.baidu.com',
                imgSrc: '1.jpg'
            },
            methods: {
                fn: function() {
                    this.imgSrc = "2.jpg"
                }
            }
        });
    </script>

七、样式绑定

1.类名对象形式

    <div id="app">
        <div :class="{red:isShow}">我是容器</div>
        <button @click="fn">点击</button>
    </div>
    </div>
    <script>
        // 初始化vue实例对象

        var vue = new Vue({
            el: "#app",
            data: {
                isShow: true,
            },
            methods: {
                fn: function() {
                    this.isShow = !this.isShow //获取原来的并取反
                }
            }
        });
    </script>

2.类名数组形式

<style>
      .redName {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .fzName {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :class="[red,fz]">我是测试div</div>
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          red: "redName",
          fz: "fzName"
        },
        methods: {
          fn: function() {
            this.red = "";
          }
        }
      });
    </script>

3.style类绑定

    <div id="app">
        <div :style="{width:w,height:h}">我是容器</div>
        <button @click="fn">点击</button>
    </div>

    <script>
        // 初始化vue实例对象
        var vue = new Vue({
            el: "#app",
            data: {
                w: '100px',
                h: '100px'
            },
            methods: {
                fn: function() {
                    this.isShow = !this.isShow //获取原来的并取反
                }
            }
        });
    </script>

八、分支和循环结构

1.条件

语法：v-if v-else-if v-else

    <div id="app">
        <!-- 60分以下 教室敲代码  
        60-80 回宿舍睡觉
        80-100 放假 -->
        <!-- v-if   v-else-if  v-else -->
        <p v-if="score>=80">放假</p>
        <p v-else-if="score>=60&&score<80">回宿舍睡觉</p>
        <p v-else>教室敲代码</p>
    </div>
    </div>
    <script>
      // 初始化vue实例对象

      var vue = new Vue({
        el: "#app",
        data: {
           score:45
        },
        methods: {
           
        }
      });
    </script>

2.循环

语法：v-for="(item,index) in 数组"

    <div id="app">
        <ul>
            <li v-for="(item,index) in students">
                <h3>{{item.id}}</h3>
                <p>{{item.name}}</p>
                <p>{{item.age}}</p>
            </li>
        </ul>
    </div>
    </div>
    <script>
        // 初始化vue实例对象
        var vue = new Vue({
            el: "#app",
            data: {
                students: [{
                    "id": '001',
                    'name': 'tom',
                    "age": 23
                }, {
                    "id": '002',
                    'name': 'jim',
                    "age": 22
                }, {
                    "id": '003',
                    'name': 'jack',
                    "age": 20
                }],
            },
            methods: {

            }
        });
    </script>

元素显示和隐藏 v-show和v-if

v-show是渲染出来的标签但是样式是display:none和block进行切换

v-if是后面的变量如果为false 页面就不会渲染这个结构

区别：

v-if是是否渲染显示出来，v-show是已经渲染了，切换了display:none属性。
如果页面频繁切换的时候，考虑到性能问题，推荐使用 v-show