Vue2

Vue简介

1、JavaScript框架

2、简化DOM操作

3、响应式数据驱动

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 基础</title>
</head>
<body>
    <div id="app">
        <!-- 使用简洁的模板语法把数据渲染到页面上 -->
        {{message}}
    </div>
    <!-- 导入vue -->
    <script src="vue .js"></script>
    <script>
        //创建Vue实例对象，设置el属性和data属性
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
</body>
</html>

el挂载点

el是用来设置vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用ID选择器
可以使用其他的双标签，不能使用<html>和<body>

<body id="body">
    <h2 id="app" class="app">
        {{message}}
        <span>
            {{message}}
        </span>
    </h2>

    <script>
        var app = new Vue({
            el:"#app",//建议使用id选择器，因为id唯一
            // el:".app",
            // el:"div",
            //el:"#body",//对<html><body>不作用
            data:{
                message:"你好"
            }
        })
    </script>
</body>

data属性（数据对象）

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

<div id="app">
        {{message}}
        <h2> {{school.name}} {{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
            <li>{{campus[3]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好 小黑！",
                school:{
                    name:"小白",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>

模板语法

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 的值。无论何时，绑定的数据对象上 msg 发生了改变，插值处的内容都会更新。

VUE指令

1、内容绑定，事件绑定

v-text：设置标签的文本值（textContent）：

默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容

<body>
    <div id="app">
        <!-- 小黑! -->
        <h2 v-text="message+'!'">深圳</h2>
        <!-- 前端与移动教研部 -->
        <h2 v-text="info">深圳</h2>
        <!-- 深圳小黑 -->
        <h2>深圳{{message+"!"}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"小黑",
                info:"前端与移动教研部"
            }
        })
    </script>
</body>

v-html：设置标签的innerHTML：

内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                //content:"小黑",
                content:"<a href='http://www.itheima.com'>小黑</a>"
            }
        })
    </script>
</body>

v-on：为元素绑定事件：

事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"西兰花炒蛋"
            },
            methods:{
                doIt:function(){
                    alert("做It")
                },
                changeFood:function(){
                   //console.log(this.food);
                    this.food += '好好吃!'//点击一下就同步更新
                }
            }
        })
    </script>
</body>

v-on：传递自定义参数，事件修饰符

事件绑定的方法写出函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    console.log('做It');
                    console.log(p1);
                    console.log(p2);
                    
                },
                sayHi:function(){
                    alert("吃了没?")
                }
            },
            
        })
    </script>
</body>

v-show指令：根据表达式的真假，切换元素的显示和隐藏（操纵样式）

原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

<body>
    <div id="app" v-show="true">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="/js/57-images/course01.png" alt="">
        <img v-show="age>=18" src="/js/57-images/course01.png" alt="">
    </div>
    <script>
        var qpp = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:16
            },
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>
</body>

v-if：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

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

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">if指令</p>
        <p v-show="isShow">v-show指令</p>
        <h2 v-if="temperature>=40">热死啦!</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                temperature:40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>

v-bind：设置元素的属性（比如：src、title、class）

作用是为元素绑定属性
完整写法是 v-bind：属性名
简写可以省略v-bind，只保留 ’：属性名‘
需要动态的增删class建议使用对象的方式

绑定class

    <style>
        .active{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive ? 'active' : ''" @click="toggleActive">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"><!--对象语法-->
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"/js/30-images/tab01.png",
                imgTitle:"商品",
                isActive:true
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive
                }
            }
        })
    </script>
</body>

对象语法

v-bind:class 一个对象，以动态地切换 class：

上面的语法表示 active 这个 class 存在与否将取决于数据 data isActive 的真假值。

数组语法

把一个数组传给 v-bind:class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>

<div :class="[isActive ? activeClass : '', errorClass]"></div>

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div :class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>


<!--vue中的data代码-->
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

<!--vue中的data代码-->
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-for：根据数据生成列表结构

数组经常和v-for结合使用
语法：（item, index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

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

        <ui>
            <li v-for="(item,index) in arr">{{index+1}}黑马程序员校区:{{item}}</li>
        </ui>
        <h2 v-for="item in vegetables" v-bind:title="item.name"> {{item.name}}</h2>
    </div>
    <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="text" v-model="message" @keyup.enter="getM">
        <input type="button" value="修改message" @click="setM">
        <h2>{{message}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods:{
                getM:function(){
                    alert(this.message)
                },
                setM:function(){
                    this.message="已修改"
                }
            }
        })
    </script>
</body>

axios+vue

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"笑话"
            },
            methods:{
                getJoke:function(){
                    console.log(this.joke);//笑话
                    var that = this
                    axios.get("http://127.0.0.1:4523/m1/5334514-5005275-default/test?num=3")
                    .then((response)=>{
                        console.log(response.data);
                        // console.log(this.joke);//笑话
                        that.joke = response.data.num;
                        
                    })
                }
            }
        })
    </script>
</body>

#培训阶段

http://localhost:8090//archives/vue2

作者

文希希

发布于

2024年10月27日

许可协议

JavaScript es6 进阶上一篇

AJAX 下一篇