Vue基础用法总结

引入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

官方文档

https://cn.vuejs.org/v2/api/

基本用法

插值表达式
v-text
v-html
v-show
v-if
v-on
v-bind
v-for
v-model

插值表达式

基本概念

挂载点
数据对象

<body>
    {{message}}
    <div class="app">
        {{message}}
        <h2>
            {{school.myname}}
            {{school.mobile}}
        </h2>
        
        <ul>
            <li>
                {{compus[0]}}
            </li>
            <li>
                {{compus[1]}}
            </li>
        </ul>
        
    </div>
</body>
<script>
    // vue会管理 el 挂载点命中的元素及其内部的后代元素
    var app = new Vue({
        // 设置挂载点
        el: '.app',
        // 设置数据对象
        data: {
            
            message: "Hello Vue",
            
            school: {
                myname: "李毅",
                mobile: "15144849101"
            },
            
            compus: ['nankai', 'tinghua']
        }
    })
</script>

v-text

<body>
    <div id="app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <h2>{{ message +'!'}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hhhhh",
                info:"nbnbnbnb"
            }
        })
    </script>
</body>

v-html

<body>
    <div id="app">
        <p v-html='content'></p>
        <p v-text='content'>
        </p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"<a href='https://blog.csdn.net/weixin_44984664'> 'Joshua_yi'</a>"
            }
        })
    </script>
</body>

v-show

功能：控制元素是否显示

<body>
    <div id="app">
      <!-- 表达式会转化成bool值 -->
      <img v-show="isShow" src="./img/monkey.gif" alt="">
      <img v-show="age>=18" src="./img/monkey.gif" alt="">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        },
      })
    </script>
  </body>

v-if

功能：控制元素是否显示

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <!-- 操作的是DOM -->
        <p v-if="isShow">hhhhh</p>
        <!-- 操作的是样式 -->
        <!-- 开发中频繁操作的用v-show,反之用v-if -->
        <p v-show="isShow">hhhhh - v-show修饰</p>
        <h2 v-if="temperature>=35">热死啦</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:20
            },
            methods: {
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>

v-on

<body>
    <div id="app">
        <!--  @ == v-on -->
        <input type="button" value="v-on指令" @click="doIt(666)">
        <input type="button" value="v-on指令" v-onclick="doIt(666)">
        <!-- <input type="button" name="" id="" value="事件绑定" v-on:monseenter="方法"> -->
        <input type="button" name="" id="" value="双击" @dblclick="doIt(666)">
        <!-- <input type="text" @keyup.enter="sayHi"> -->
        <h2 @click="changFood">
                {{food}}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"泡面"
            },
            methods: {
                doIt:function(p1){
                    alert(p1);
                },
                sayHi:function(){
                    alert("吃了没");
                },
                changFood:function(){
                    this.food+="好吃！";
                    alert(this.food);
                },
            },
        })
    </script>
</body>

v-bind

功能：操纵元素的属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <!-- 简写 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"http://www.itheima.com/images/logo.png",
                imgTitle:"黑马程序员",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

v-for

功能：类似于循环

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}黑马程序员校区:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西蓝花"}
                ]
            },
            methods: {
                add:function(){
                    this.vegetables.push({ name:"花菜炒蛋" });
                },
                remove:function(){
                    this.vegetables.shift();
                }
            },
        })
    </script>
</body>

v-model

功能：

便捷的设置和获取表单元素的值
绑定的数据会和表单元素的值相关联
表单的数据<->表单元素的值，双向传递

<!-- 便捷的设置和获取表单元素的值 -->
<!-- 绑定的数据会和表单元素的值相关联 -->
<!-- 表单的数据<->表单元素的值 -->
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="酷丁鱼";
                }
            },
        })
    </script>
</body>

Joshua_yi

发布了40 篇原创文章 · 获赞 57 · 访问量 2762

私信关注

引入vue

官方文档

基本用法

猜你喜欢