前端学习 Vue笔记

HMS Howe

已于 2022-03-30 20:18:44 修改

阅读量638

点赞数

分类专栏：前端开发文章标签：前端

于 2022-03-30 10:45:32 首次发布

本文链接：https://blog.csdn.net/winchester_y/article/details/123840624

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Hello Vue!

<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>

el:挂载点

在el挂载的标签内部，可以任意使用data里的数据
各种选择器都可以作为el挂载的目标

data:数据对象

    <div id="app">
        {{ message }}
        <h3>{{ campus[0] }}</h3>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"你好，小黑！",
                school:{
                    name:"",
                    tel:""
                },
                campus:["北京","上海","石家庄"]
            }
        })
    </script>

本地应用

v-text

设置标签的文本值

<div id="app">
        <!-- 下面的写法会把整个标签替换掉 -->
        <h2 v-text = "message"></h2>
        <!-- 下面的写法只会替换部分 -->
        <h2>上海{{message}}</h2>
        <!-- 添加插值表达式 -->
        <h2 v-text = "message + '!'"></h2>
        <h2>上海{{message + "!"}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            }
        })
    </script>

默认写法 
<div id = "app">
  <标签 v-text = "message"></标签>
</div>
<script>
  var app = new Vue({
    el:"#app",
    data:{
      message:""
    }
  })
</script>

其他写法：只替换标签中的部分
  <标签>{{data中的标签}}</标签>

v-html

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

v-on

v-on:click 鼠标点击
v-on:monseenter 鼠标路过标签
v-on:dblclick 鼠标双击
等价于@dbclick

v-on指令：为元素绑定事件
绑定的方法定义在methods属性中
methods内部可以通过this访问data里的数据

常规写法：
<div id="app">
    <input type="button" value="事件绑定" v-on:click="doIt">
<div>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            doIt:function(){
                //逻辑
            }
        }
    })
</script>

    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <h2 @click="changefood">{{ food }}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花"
            },
            methods:{
                doIt:function(){
                    alert("你好");
                },
                changefood:function(){
                    // console.log(this.food);
                    this.food="好吃"
                }
            }
        })
    </script>

计数器

Vue实例：el（挂载点），data（数据），methods（方法）
v-text对应{{}}
v-on对应@
methods中通过this获取data里的元素

    <div id="app">
        <div id="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:"1"
            },
            methods:{
                sub:function(){
                    if (this.num >= 1) {
                        this.num--
                    } else {
                        alert("到达最小值")
                    }
                },
                add:function(){
                    if (this.num <= 9) {
                        this.num++
                    } else {
                        alert("到达最大值")
                    }
                }
            }
        })
    </script>

v-show

根据true、false切换元素的display
指令后面的内容最终都会解析为布尔值

    <div id="app">
        <input type="button" value="点击" @click="changeShow">
        <img src="" alt="" v-show="isShow">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods:{
                changeShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

v-if

根据true、false切换元素的显示（直接操纵dom元素的移除添加，与v-show区分）
频繁切换用v-show，其他用v-if

v-bind

对属性进行操作
简化为 :属性名=""
（简记：属性用:，事件用@）

    <div id="app">
        <img :src="imgSrc" :title="imgTitle" alt="">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"",
                imgTitle:""
            }
        })
    </script>

v-for

根据数据生成列表结构
数组经常与v-for结合使用

语法：(item,index) in 数据
item：数据
index：索引

    <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="移除" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index+1 }}城市：{{ item }}
            </li>
        </ul>
        <h2 v-for="item in vegetable" :title="item.name">
            {{item.name}}
        </h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州"],
                vegetable:[
                    {name:"丝瓜"},
                    {name:"西兰花"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetable.push({name:"炒"});
                },
                remove:function(){
                    this.vegetable.shift();
                }
            },
        })

v-on补充

可以在函数里绑定函数
@keyup按键响应
@keyup.enter按键中的回车响应

    <div id="app">
        <input type="button" value="点击" @click="spring('你好','世界')">
        <input type="text" @keyup.enter="hi">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                spring:function(p1,p2){
                    console.log("弹出");
                    console.log(p1);
                    console.log(p2);
                },
                hi:function(){
                    alert ("吃了吗");
                }
            }
        })
    </script>

v-model

双向绑定

    <div id="app">
        <input type="button" value="点击" @click="git">
        <input type="button" value="修改元素" @click="change">
        <p v-text="message"></p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods:{
                git:function(){
                    alert (this.message);
                },
                change:function(){
                    this.message = "好吃";
                }
            }
        })
    </script>