本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

来呀来呀开心吧

2139

文章

847249

访问

+关注

分类

暂无分类

日期归档

2023-05(1)

【零基础】1小时入门Vue（建议收藏）

发布于2021-06-07 21:16 阅读(1235) 评论(0) 点赞(23) 收藏(2)

在这里插入图片描述
安装-CDN引入

实例化Vue对象
       el和data参数
       methods方法
       computed计算属性
       属性绑定
             v-bind：单向绑定
             v-html：渲染成html代码
             v-model：双向绑定

事件
       监听事件
             点击事件
             鼠标事件
       事件修饰符
       按键修饰符

动态绑定class和style
      绑定class
            对象语法
             数组语法
       绑定内联样式style

条件渲染
 v-if指令
 v-show指令

列表渲染
 v-for指令

案例

安装-CDN引入

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

实例化Vue对象

el和data参数

new Vue({
    el:"#vue-app",
    data:{
        name:"ccy"
    }
})

其中，

el代表element，指的是要获得的某个根元素节点
data用于数据存储

我们可以通过声明式渲染来使用这个name数据：

<div id="vue-app">
    <h1>{{ name }}</h1>
</div>

效果：可以看到，在vue-app下渲染出一个h1标签，里面的内容正是data里的name

在这里插入图片描述

methods方法

methds存储自定义方法，可以用this来获取data中的数据，如this.name：

<div id="vue-app">
	<!--此处双花括号里的内容来自methods而非data，需加上括号-->
	<h1>{{ greeting() }}</h1> 
    <p>{{ name }}</p>
    <p>Job:{{job}}</p>
</div>

new Vue({
    el:"#vue-app",
    data:{
        name:"ccy",
        job:"web开发"
    },
    methods:{
        greeting:function(){
            return "Good morning " + this.name + "!"
        }
    }
})

效果：

在这里插入图片描述

computed：计算属性

对于任何复杂逻辑（开销大），都应当使用计算属性
计算属性缓存 vs 方法：
计算属性是基于响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值

也就是，当计算属性涉及的变量发生改变时，计算属性的操作才会被执行，否则返回的只是之前计算的结果
例子：
当使用methods时

<div id="vue-app">
	<h1>计算属性computed</h1>
    <button @click="a++">A++</button>
    <button @click="b++">B++</button>
    <p>A - {{a}}</p>
    <p>B - {{b}}</p>
    <p>Age + A = {{addToA()}}</p>
    <p>Age + B = {{addToB()}}</p>
</div>

new Vue({
    el:"#vue-app",
    data:{
        age:18,
        a:0,
        b:0
    },
    methods:{
        addToA:function(){
            console.log("addToA");
            return this.age+this.a;
        },
        addToB:function(){
            console.log("addToB");
            return this.age+this.b;
        }
    }
})

效果：不论点击“A++”还是“B++’，都会触发addToA和addToB函数，打印出"addToA"和"addToB"

在这里插入图片描述

如果将addToA和addToB函数移到computed里

<!--计算属性不是函数，不能写括号-->
<p>Age + A = {{addToA}}</p>
<p>Age + B = {{addToB}}</p>

computed:{
    addToA:function(){
        console.log("addToA");
        return this.age+this.a;
    },
    addToB:function(){
        console.log("addToB");
        return this.age+this.b;
    }
}

效果：点击A++，只触发addToA函数；点击B++，只触发addToB函数

在这里插入图片描述

属性绑定

v-bind：单向绑定

有时我们需要在标签属性里使用data中定义的变量，但变量包裹在引号之间，会被直接当作字符串，不能发挥出我们想要的效果，如：

<a href="{{ personalBlog }}">个人博客主页</a>
<!--或者：-->
<a href="personalBlog">个人博客主页</a>

/* 实例化Vue对象中的data参数 */
data:{
    name:"ccy",
    job:"web开发",
    personalBlog:"https://blog.csdn.net/qq_43523725"
}

效果：引号中的代码均被当作字符串，不能真的实现点击跳转到指定链接的功能
在这里插入图片描述

这个时候，我们需要使用v-bind指令，将变量从引号中提取出来，匹配它真正的含义

<div id="vue-app">
    <h1>{{ greeting() }}</h1>
    <p>Name:{{name}}</p>
    <p>Job:{{job}}</p>
    <a v-bind:href="personalBlog">个人博客主页</a>
</div>

v-html：渲染成html代码

如果我们想在字符串中嵌套一个html标签，需要使用v-html指令，将字符串里的代码解析成html代码

例子：

/* 实例化Vue对象中的data参数 */
data:{
    name:"ccy",
    job:"web开发",
    personalBlog:"https://blog.csdn.net/qq_43523725"
}

<div id="vue-app">
    <h1>{{ greeting() }}</h1>
    <p>Name:{{name}}</p>
    <p>Job:{{job}}</p>
    <p v-html=personalBlobTag></p>
</div>

效果：变量personalBlobTag被解析成html代码并渲染
在这里插入图片描述

v-model：双向绑定

通常一方输入，另一方显示，两者内容始终一致

例子：将input标签的value值与name变量进行双向绑定：
name的初始值为“ccy”，因此input框默认值为“ccy”；当input输入了其他内容，name也发生改变。label标签负责实时显示name变量

<div id="vue-app">
    <h1>双向绑定</h1>
    <label>{{name}}</label><br>
    <input type="text" v-model=name>
</div>

效果：

在这里插入图片描述

事件

监听事件

基本使用：

使用v-on指令；
后面跟上事件名和处理函数名，处理函数可以不加括号，但传参时必须加括号
v-on指令可以省略成@：

 <!-- <标签 v-on:事件="处理函数名(参数)"> 内容 </标签>-->
 <button v-on:click="add">加一岁</button>
 <!--当需要传参时，需要括号-->
 <button v-on:click="reduce(10)">减十岁</button>
 <!--   v-on:可以省略为 @  -->
 <button @click="reduce(1)">减一岁</button>

例子：

点击事件

不传参：当点击按钮时，触发add / reduce函数，让年龄加1 / 减1

<div id="vue-app">
    <h1>event初识</h1>
    <button v-on:click="add">加一岁</button>
    <!--   v-on:可以省略为 @  -->
    <button @click="reduce">减一岁</button>
    <p>My age is {{age}}.</p>
</div>

new Vue({
    el:"#vue-app",
    data:{
        age : 18
    },
    methods:{
        add:function(){
            this.age ++;
        },
        reduce:function(){
            this.age--;
        }
    }
})

效果：点击“加一岁”，age就增加一岁；点击“减一岁”，age就减一岁

在这里插入图片描述

传参：

<div id="vue-app">
    <h1>event初识</h1>
    <button @click="add(1)">加一岁</button>
    <button @click="add(10)">加十岁</button>
    <button v-on:click="reduce">减一岁</button>
    <p>My age is {{age}}.</p>
</div>

new Vue({
    el:"#vue-app",
    data:{
        age : 18
    },
    methods:{
        add:function(value){
            this.age +=value;
        },
        reduce:function(){
            this.age--;
        }
    }
})

效果：

在这里插入图片描述

鼠标事件

<div id="vue-app">
    <h1>event初识</h1>
    <div id="show" @mousemove="showXY">
        {{x}},{{y}}
    </div>
</div>

new Vue({
    el:"#vue-app",
    data:{
        x:0,
        y:0
    },
    methods:{
        showXY:function(event){
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
})

效果：鼠标在div#show区域移动，显示鼠标相对这个div的XY坐标，初始值为(0,0)
在这里插入图片描述

事件修饰符

常用的有：

阻止冒泡：.stop
取消默认事件：.prevent
只有一次生效：.once
事件修饰符可以串联使用，如.stop.prevent，功能叠加

例子：
取消a标签的默认事件，即点击a标签后页面没有跳转：

<a @click.prevent href="https://blog.csdn.net/qq_43523725"> 我的csdn博客主页</a>

按键修饰符

常用的有：

匹配回车触发：.enter
alt+回车触发：.alt.enter
匹配空格触发：.space

例子：

<div id="vue-app">
    <h1>event初识</h1>
    <label>姓名：</label>
    <input type="text" @keyup.enter="logName">
    <label>年龄：</label>
    <input type="text" @keyup.enter="logAge">
</div>

/* methods部分代码 */
logName:function(){
    console.log("姓名已输入完成！")
},
logAge:function(){
    console.log("年龄已输入完成！")
}

效果：
输入第一个input框，键盘敲击回车键后，触发logName函数，控制台输出“姓名已输入完成！”，
输入第二个input框，键盘敲击回车键后，触发logAge函数，控制台输出“年龄已输入完成！”

在这里插入图片描述

动态绑定class和style

绑定class

对象语法

使用v-bind指令绑定class，class的值为对象{class名：true / false}，true时该class对应的功能生效，false时该class不生效
例子：

<div id="vue-app">
    <h1>动态绑定CSS样式</h1>
    <div class="show" v-bind:class="{changeColor:changeColor}"></div>
    <!-- `{changeColor:changeColor}`中的key为class名，value为data中的changeColor，是布尔值 -->
</div>

new Vue({
    el:"#vue-app",
    data:{
        changeColor:true
        }
   })

.show {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 2px solid #000;
}
.changeColor{
    background-color: royalblue;
}

效果：
div.show原本的背景颜色是红色的（data中changeColor:false）

在这里插入图片描述

当changeColor生效时，背景颜色为蓝色（data中changeColor:true）

在这里插入图片描述

数组语法

也可以给class传一个数组，应用一个class列表，[class1，class2，…]，如：

<div v-bind:class="[changeColor, addRadiusClass]"></div>
<!--此时的changeColor是data中的数据-->

data: {
  changeColor: 'changeColor',
  addRadiusClass: 'change-radius'
}
/* change-radius是类名，需要加上引号 */

.changeColor{
    background-color: royalblue;
}
.change-radius {
    border-radius: 10px;
}

效果：show、 changeColor、 change-radius均生效

在这里插入图片描述

还可以在数组里嵌套使用对象语法

<div v-bind:class="[{ changeColor: changeColor }, addRadiusClass]"></div>

data:{
    changeColor:true,
    addRadiusClass:"change-radius"
}
/* changeColor使用的是对象语法，值为布尔值
  addRadiusClass使用的是数组语法，值为类名 */

效果同上：

在这里插入图片描述

绑定内联样式style

用v-bind指令将style与设定好的样式绑定起来，如：

<div id="vue-app">
    <h1>动态绑定style</h1>
    <div class="show" v-bind:style="styleObject"></div>
</div>

// 样式为：背景蓝色，圆角10px
data:{
    styleObject:{
        backgroundColor:"blue",
        borderRadius:"10px"
    }
}

效果：

在这里插入图片描述

条件渲染

v-if指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染
v-els-if指令充当 v-if 的“else-if 块”，可以连续使用
v-else指令，即不匹配前述的条件时执行操作

例子：

<div id="vue-app">
    <h1>条件渲染</h1>
    <!-- 当type为A/B/C,或其他时，分别展示不同情况 -->
    <div v-if="type === 'A'">
        这是 A
    </div>
    <div v-else-if="type === 'B'">
        这是 B
    </div>
    <div v-else-if="type === 'C'">
        这是 C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

data:{
    type:"A"
}

效果：当前type为A，只显示”这是A“的div，其他div均不被渲染

在这里插入图片描述

v-show指令

当v-show指令的值为true时，显示该标签及内容

<div id="vue-app">
    <h1>v-show指令</h1>
    <h2 v-show="isShow">hello</h2>
</div>

data:{
    isShow:true
}

效果：此时isShow为true，显示该标签

在这里插入图片描述

当isShow为false时，将该标签display:none

在这里插入图片描述

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

v-for指令

遍历数组or对象or整数，将其中的值遍历出来

<div id="vue-app">
    <h1>列表渲染</h1>
    <ul>
        <!-- 遍历数组 -->
        <li v-for="item in arrItems" v-bind:key="item.id">{{ item }}</li>
    </ul>
    <ul>
        <!-- 遍历对象 -->
        <li v-for="item in objItems" v-bind:key="item.id">{{ item }}</li>
    </ul>
    <ul>
        <!-- 遍历json对象 -->
        <li v-for="item in jsonItems" v-bind:key="item.id">{{ item.name }} -- {{item.summarize}}</li>
    </ul>
</div>

data:{
    arrItems:["Vue","React","Angular"],
    objItems:{
        "name":"ccy",
        "job":"web开发",
        "descript":"under studying"
    },
    jsonItems:[
        {"name":"Vue","summarize":"渐进式JavaScript框架"},
        {"name":"React","summarize":"用于构建用户界面的JavaScript库"},
        {"name":"Angular","summarize":"基于TypeScript构建的开发平台"}
    ]
}

效果：

在这里插入图片描述

案例

效果：点击按钮，显示不同的图片

在这里插入图片描述

分步解析：

4张图片的展示
技术点：采用动态绑定style

<div v-bind:style="imgStyle">
    <img :src="imgsrc" alt="">
</div>

右侧”热情、向上、积极“字样
技术点：采用v-for

<div class="styleObject">
    <div v-bind:class="{text:true}" v-for="item in items" v-bind:key="item.id">
        {{item}}
    </div>
</div>

”春夏秋冬“4个按钮
技术点：动态绑定style、v-for、点击事件（传参）

<div id="season">
    <button v-bind:class="{liStyle:true}"  v-for="(season,index) in seasons" v-bind:key="season.id" @click="changeImage(index)">
        {{season.name}}
    </button>
</div>

将案例需要的数据单独抽取出来：

var dataObj = {
	// 春夏秋冬四个按钮值
    season:[
        {'name':'春'},
        {'name':'夏'},
        {'name':'秋'},
        {'name':'冬'},
    ],
    // 4张图片地址
    imgAddress:[
        {src:"./imgs/1-0.jpg"},
        {src:"./imgs/1-2.jpg"},
        {src:"./imgs/1-1.jpg"},
        {src:"./imgs/1-3.jpg"}
    ]
}

vue实例对象：

/*
* items:存储右侧”热情、向上、积极“字样；
* imgStyle:图片样式；
* seasons:四季按钮值；
* imgAddress:图片地址；
* imgsrc:图片初始值，为”春天“对应的图片；
* changeImage:点击”四季“按钮，将被点击的按钮的索引传给本函数，控制显示对应图片
*/
new Vue({
    el:"#vue-app",
    data:{
        items:["热情","向上","积极"],
        imgStyle:{
            display:"inline-block",
            width: "300px",
            height: "300px",
            textAlign:"center",
            paddingTop:"40px",
            borderRadius:"150px"
        },
        seasons:dataObj.season,
        imgAddress:dataObj.imgAddress,
        imgsrc:dataObj.imgAddress[0].src
        },
		methods:{
		    changeImage:function(value){
		        if (value <= this.imgAddress.length-1 && value >=0){
		            this.imgsrc = this.imgAddress[value].src;
		        }
		     }
})