Vue 基础知识

最新推荐文章于 2024-06-17 23:12:06 发布
最新推荐文章于 2024-06-17 23:12:06 发布
阅读量1.8k 收藏 31
点赞数 49
分类专栏： Vue 专栏 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69240236/article/details/136797178
版权

1.简单了解前端的发展过程

  • 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。

  • 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.

  • 2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果

  • 2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js

node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。
​
2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的前端包模块管理系统。

  • 在node的基础上出现了很多的前端框架AngularJS、Vue、React等

  • 2014年Vue开始发布，作者尤雨溪

1.1.什么是MVVM模式

  • M：即Model，模型，包括数据和一些基本操作

  • V：即View，视图，页面渲染结果

  • VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
​
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的。

2.认识Vue

vue3网址：https://cn.vuejs.org/ vue2网址：https://v2.cn.vuejs.org/

Vue是一个轻量级的快速构建单页面应用（SPA）的前端框架。

  • 单页面应用：当用户访问不同页面时，窗口只有一个，被访问的页面会将当前页面替换掉。这样的应用被称为单页面应用。比如手机端页面应用（WebAPP）。

  • SPA与传统页面的区别

    • 传统多页面程序：每次请求服务器返回的都是一个完整的页面。

    • 单页应用程序：只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中。

  • SPA应用的优势

    • 减少了请求体积，加快页面响应速度，降低了对服务器的压力。

    • 更好的用户体验，让用户在web app感受native app的流畅。

  • SPA缺点:

    • 因为技术使用了ajax，导致页面不利于SEO搜索引擎优化。

前端框架三巨头：Vue.js、React.js、AngularJS，Vue.js以其轻量易用著称。

3.Node和NPM

node.js官网：https://nodejs.org/

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

  • Node.js的安装很简单，就是一直下一步就可以了（中间可以自己选择安装目录，安装目录建议纯英文目录），安装成功之后，在cmd窗口中执行node -v可以看到node的版本。

  • Node自带了NPM了，在控制台输入npm -v查看

  • npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。

# 设置淘宝镜像源
npm config set registry http://registry.npm.taobao.org/
# 检查是否更换成功
npm config get registry

  • 安装完成还要重启下电脑

4.快速搭建环境

4.1.创建空的工程

在VSCode中创建新的文件夹

4.2.npm下载安装vue

使用快捷键( ctrl + ~ )打开 vscode内置的终端

  • 输入：npm init -y 进行初始化项目

  • 安装Vue，输入命令：npm install vue@2 --save

    然后就会在项目目录中发现一个node_modules目录，并且在下面有一个vue目录。

4.3.第一个vue的实例

在vscode中创建Html文件，然后打开html文件，输入html，选择“html:5”，自动生成html5代码。

在页面中编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    
    <!--  1.引入vue.js  -->
    
    <!-- CDN方式引入Vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    
    <!-- 本地方式引入Vue -->
    <script src="node_modules/vue/dist/vue.js"></script>
    
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <!-- MVVM中的V(View)视图页面  -->
        <!--  {{}}:动态接收model中的message属性的值  -->
        <h1>{{message}}</h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",  //vue在id为app的标签内才可以生效，指定vue的作用域载体
            data:{ //key:value,数据对象,MVVM中的M(Model),可以设置很多属性，可以在标签中使用，渲染到视图中
                message:"Hello Vue"
            }
        });
    </script>
​
</html>

  • 首先通过 new Vue() 来创建Vue实例

  • 然后构造函数接收一个对象，对象中有一些属性：

    • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div，表示vue的作用域

    • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

      • message：这里我们指定了一个message属性

  • 页面中的h1元素中，我们通过{{message}}的方式，来渲染刚刚定义的message属性。

4.4.双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>

    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->

    <div id="app">

        <!--  v-model : 将input输入的框value属性的值和vue的num属性的值绑定，实现动态更新操作 -->
        <input type="text" v-model="num">

        <!-- MVVM中的V(View)视图页面  -->

        <!--  {{}}:动态接收model中的name属性的值  -->

        <h1>{{name}},{{num}}个人喜欢</h1>
    </div>
​
</body>
    <script>

        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",      //vue在id为app的标签内才可以生效，指定vue的作用域载体
            data:{     //key:value,数据对象,MVVM中的M(Model),可以设置很多属性，可以在标签中使用，渲染到视图中
                name:"张三",
                num:5
            }
        });
    </script>
​
</html>

  • 我们在data添加了新的属性：num

  • 在页面中有一个input元素，通过v-model与num进行绑定。

  • 同时通过{{num}}在页面输出

  • input与num绑定，input的value值变化，影响到了data中的num值

  • 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

  • 没有任何dom操作，这就是双向绑定的魅力

4.5.事件处理双向绑定

  • 我们在页面添加一个按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <input type="text" v-model="num">
        <!--  v-on:事件绑定操作，v-on:click：将当前html标签的点击事件和vue绑定，点击事件可以直接调用vue构建的函数或者直接操作vue的数据      -->
        <button v-on:click="num++">点击</button>
        <h1>{{name}},{{num}}个人喜欢</h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num:5
            }
        });
    </script>
​
</html>

  • 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

  • 普通click是无法直接操作num的。

5.Vue实例

vue官方Api网址：API — Vue.js

5.1.创建Vue实例

  • 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
var vm = new Vue({
  // 选项
})

  • el 指代元素选择器

  • data 设置当前vue实例所使用的数据，data的值可以是一个对象

  • methods 定义相关方法

5.2.模板或元素

  • 每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染

  • 我们可以通过el属性来指定

    <div id="app">
    
</div>

  • 然后创建Vue实例，关联这个div

    var vm = new Vue({
    el:"#app"
})

  • 这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

5.3.数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

  • html

    <div id="app">
    <input type="text" v-model="num"/>
     <h1>{{num}}</h1>
</div>

  • js

    var vm = new Vue({
    el:"#app",
    data:{
        num:5
    }
})

  • num的变化会影响到input的值

  • input中输入的值，也会导致vm中的num发生改变

图片

5.4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

  • html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <!--  v-model : 将input输入的框value属性的值和vue的num属性的值绑定，实现动态更新操作 -->
        <input type="text" v-model="num">
        <!--  v-on:事件绑定操作，v-on:click：将当前html标签的点击事件和vue绑定，点击事件可以直接调用vue构建的函数或者直接操作vue的数据      -->
        <button v-on:click="add">点击</button>
        <!-- MVVM中的V(View)视图页面  -->
        <!--  {{}}:动态接收model中的name属性的值  -->
        <h1>{{name}},{{num}}个人喜欢</h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",  //vue在id为app的标签内才可以生效，指定vue的作用域载体
            data:{ //key:value,数据对象,MVVM中的M(Model),可以设置很多属性，可以在标签中使用，渲染到视图中
                name:"张三",
                num:5
            },
            methods:{
                //累加函数
                /*
                add(){
                    //this:表示当前vue示例
                    this.num++
                }
                */
                add:function (){
                    this.num++;
                }
            }
        });
    </script>
​
</html>

5.5.生命周期钩子函数

    生命周期：比如出生 -> 上学  ->  工作  ->  结婚   ->  生孩子  ->  挂墙上，这些操作其实就是一个人的生命周期。对于vue来说，所谓生命周期其实就是vue实例从创建到销毁的过程。
​
    所谓的生命周期函数，其实就是生命周期方法，比如servlet中的init方法，这个方法是servlet生命周期中的一个方法，其特点就是就我们直接写好，不用调用，是在项目启动构建servlet的时候，tomcat服务器自动调用的。
5.1.生命周期
     每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被自动触发调用。

 

 

5.2.钩子函数

  • beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

  • created：在创建Vue实例之后进行调用。

  • beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

  • mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。 此时页面中的{{name}}已被渲染成小三

  • beforeDestroy：该函数将在销毁实例前进行调用 。

  • destroyed：改函数将在销毁实例时进行调用。

  • beforeUpdate：组件更新之前。

  • updated：组件更新之后。

5.2.1.在Vue中定义一个created函数，created代表在vue实例创建后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <!--  v-model : 将input输入的框value属性的值和vue的num属性的值绑定，实现动态更新操作 -->
        <input type="text" v-model="num">
        <!--  v-on:事件绑定操作，v-on:click：将当前html标签的点击事件和vue绑定，点击事件可以直接调用vue构建的函数或者直接操作vue的数据      -->
        <button v-on:click="add">点击</button>
        <!-- MVVM中的V(View)视图页面  -->
        <!--  {{}}:动态接收model中的name属性的值  -->
        <h1>{{name}},{{num}}个人喜欢</h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",  //vue在id为app的标签内才可以生效，指定vue的作用域载体
            data:{ //key:value,数据对象,MVVM中的M(Model),可以设置很多属性，可以在标签中使用，渲染到视图中
                name:"张三",
                num:5
            },
            methods:{
                //累加函数
                /*
                add(){
                    //this:表示当前vue示例
                    this.num++
                }
                */
                add:function (){
                    this.num++;
                }
            },
            created: function (){ //写法一：生命周期钩子函数，是在vue实例初始化之后自动调用
                this.num=200;
            }
            /*
            created() { //写法二：生命周期钩子函数，是在vue实例初始化之后自动调用
              this.num=100;
            }
            */
        });
    </script>
​
</html>
5.3.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

methods: {
    add: function(){
        this.num++;
        console.log(this);
    }
},

6.指令

     指令 (Directives) 是带有 `v-` 前缀的特殊属性。指令特性的预期值是：单个 JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

1.插值表达式

1.1.花括号
{{表达式}}

  • 该表达式支持JS语法，可以调用js内置函数（必须有返回值）

  • 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;

  • 可以直接获取Vue实例中定义的数据或函数

1.2.v-text和v-html
使用v-text和v-html指令来替代{{}}

  • v-text：将数据输出到标签元素内部，如果输出的数据有HTML代码，会作为普通文本输出。

  • v-html：将数据输出到标签元素内部，如果输出的数据有HTML代码，会被渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        {{name}},{{1+1}},{{name+2}},{{num+1}}{{show}}<br>
        v-html:<span v-html="hello"></span><br>
        v-text:<span v-text="hello"></span>  <!--效果和{{}}一样的-->
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
                name:"张三",
                hello:"<h1 style='color: red'>{{}}替代测试</h1>"
            },
            methods:{
                show(){
                    console.log("show");
                    return name;
                }
            }
        });
    </script>
​
</html>

2.v-model

    刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

1.既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素标签有

  • input

  • select

  • textarea

  • checkbox

  • radio

  • components（Vue中的自定义组件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <input type="checkbox" v-model="language" value="java">java<br>
        <input type="checkbox" v-model="language" value="c++">c++<br>
        <input type="checkbox" v-model="language" value="python">python<br>
        <!--  join：以参数符号去拼接数组中的每一个元素，返回是拼接好的字符串    -->
        {{language.join(",")}}<br>
​
        <input type="checkbox" v-model="aa">是否选中{{aa}}
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
                language:[], //[]表示数组
                aa:true
            }
        });
    </script>
​
</html>

  • 多个CheckBox对应一个model模型数据时，model模型数据的类型是一个数组，单个checkbox，model模型数据默认是boolean类型。

  • radio对应的值是input的value值。

  • text 和textarea 默认对应的model是字符串。

  • select单选对应字符串，多选对应也是数组。

3.v-on

3.1.基本用法
v-on指令用于给页面元素绑定事件。
v-on:事件名="js片段或函数名"
另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`，即v-on可以简写为@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="add">加</button>
        <button @click="jian">减</button>
        <h1>{{name}},二傻子,{{num}}个人喜欢</h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name: "小三",
            num: 0
        },
        methods:{
            add:function () {
                this.num++;
            },
​
            jian:function () {
                this.num--;
            }
        },
    });
</script>
</html>

3.2.按键修饰符

  • 在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <!--   v-on:keyup表示键盘按下绑定操作   13表示回车键按下绑定     -->
        <input v-on:keyup.13="show"><br>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num:0
            },
            methods:{
                show() {
                    alert("哈哈哈哈")
                }
            }
        });
    </script>
​
</html>

  • 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 当按下enter键是，调用vm.submit()提交-->
<input v-on:keyup.enter="submit">
​
<!-- 缩写语法 -->
<input @keyup.enter="show">

  • 全部的按键别名：

  1. .enter

  2. .tab

  3. .delete (捕获“删除”和“退格”键)

  4. .esc

  5. .space

  6. .up

  7. .down

  8. .left

  9. .right

4.v-for

标签内使用，遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。语法是固定的。
4.1.数组的遍历
v-for="item in items"

  • items：要遍历的数组，需要在vue的data中定义好模型数据

  • item：迭代得到的数组元素的载体

<body>
<div id="app">
        <!--  v-for="存放遍历数据的载体  in   遍历的数组或集合"      -->
        <li v-for="user in users" :key="user.id">
            {{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}}
        </li>
</div>
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            users:[
                {id:1,name:'柳岩', gender:'女', age: 21},
                {id:2,name:'苍老师', gender:'女', age: 18},
                {id:3,name:'范冰冰', gender:'女', age: 24},
                {id:4,name:'刘亦菲', gender:'女', age: 18},
                {id:5,name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    });
</script>

        :key : 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染，为了方便Vue能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key。这样为每个数据项添加唯一标识, 当页面发生变化时, 同样唯一标识的元素 会直接复用，就不会重新创建渲染了。

4.2.数组角标

  • 在遍历的过程中，如果我们需要知道数组元素角标，可以指定第二个参数：

v-for="(item,index) in items"

  • items：要迭代的数组

  • item：迭代得到的数组元素别名

  • index：迭代到的当前元素索引，从0开始。

<!--   v-for="(存放遍历数据的载体,索引）  in   遍历的数组或集合"        -->
<li v-for="(user,index) in users" :key="user.id">
     {{index+1}}-{{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}}
</li>

4.3.遍历对象

  • v-for除了可以迭代数组，也可以迭代对象。语法基本类似

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

  • 1个参数时，得到的是对象的属性值

  • 2个参数时，第一个是属性值，第二个是属性名

  • 3个参数时，第三个是索引，从0开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
​
<body>
    <!-- 2.设置vue的作用域范围  -->
    <div id="app">
​
        <!--  v-for="存放对象属性值的载体  in   对象"      -->
        <li v-for="value in user">
            {{value}}
        </li>
        <!--   v-for="(存放对象属性值的载体,存放对象属性名称的载体）  in   对象"        -->
        <li v-for="(value,key) in user">
            {{key}}-{{value}}
        </li>
​
        <!--   v-for="(存放对象属性值的载体,存放对象属性名称的载体,索引下标）  in   对象"        -->
        <li v-for="(value,key,index) in user">
            {{index+1}}-{{key}}-{{value}}
        </li>
​
    </div>
</body>
​
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
            user: {id:1,name: "胡睿",gender:"男",age:18}
        }
    });
</script>
​
</html>

5.v-if和v-show

5.1.v-if的基本使用

  • v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染

v-if="布尔表达式"  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <button @click="show = !show">隐藏显示</button>
        <!-- v-if="布尔表达式"   如果表达式的值是true,则展示标签，如果是false,则不展示标签       -->
        <h1 v-if="show">
            展示了！！！！
        </h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
               show:true
            }
        });
    </script>
​
</html>

5.2.与v-for结合

  • 当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <!-- v-for和v-if一起使用时，v-for优先级高，先遍历，后执行判断        -->
        <li v-for="user in users" v-if="user.gender == '女'" :key="user.id">
            {{user.id}}-{{user.name}}-{{user.gender}}-{{user.age}}
        </li>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
                users:[  //此数据一般是通过vue请求java后台接口获取
                    {id:1,name:'柳岩', gender:'女', age: 21},
                    {id:2,name:'苍老师', gender:'女', age: 18},
                    {id:3,name:'范冰冰', gender:'男', age: 24},
                    {id:4,name:'刘亦菲', gender:'女', age: 18},
                    {id:5,name:'古力娜扎', gender:'男', age: 25}
                ]
            }
​
        });
    </script>
​
</html>

5.3.与v-else-if和v-else结合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
​
        <!--  使用v-if、v-else-if、v-else时，标签之间不能有其他标签，必须紧挨着        -->
        <h1 v-if="Math.random() > 0.75">
            大于0.75
        </h1>
        <h1 v-else-if="Math.random() > 0.5">
            大于0.5
        </h1>
        <h1 v-else>
            小于等于0.5
        </h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app"
        });
    </script>
​
</html>

  • v-else元素必须紧跟在带v-if或者v-else-if` 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!-- 1.引入vue.js文件  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--  2.设置div作为vue的作用域（作用范围）   -->
    <div id="app">
        <h1 v-if="Math.random()>0.75">
            大于0.75
        </h1>
        <h1 v-else-if="Math.random()>0.5">
            大于0.5
        </h1>
        <hr>
        <h1 v-else>
            小于等于0.5
        </h1>
    </div>
</body>
<script>
    //3.创建vue实例
    var app = new Vue(
        {
            el: "#app"
        }
    );
</script>
</html>

5.4.v-show
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
​
<body>
    <!-- 2.设置vue的作用域范围  -->
    <div id="app">
​
        <button @click="show = !show">点击</button>
​
        <!-- v-if：根据boolean值设置是否渲染标签元素（隐藏显示）       -->
        <h1 v-if="show">
            v-if展示了
        </h1>
​
        <!-- v-show：根据boolean值设置是否隐藏显示标签       -->
        <h1 v-show="show">
            v-show展示了
        </h1>
​
    </div>
</body>
​
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
</script>
​
</html>

  • v-show实现效果和v-if是一模一样的

  • v-if的值如果是false，是不渲染标签的（没有标签代码），v-show的值如果是false，是渲染标签的（设置标签的属性样式为隐藏）

6.v-bind

属性绑定

  • html属性不能使用双大括号形式绑定，只能使用v-bind指令。

  • v-bind主要作用是针对标签的属性进行双向绑定，比如image中src：v-bin:src="xxx";

  • v-bind可以简写为 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       <!--<h1 title={{title}}></h1>-->
       <!--<h1 v-bind:title="title"></h1>-->
        
        <h1 :title="title"></h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            title:"aaaaaaaa"
        }
    });
</script>
</html>

6.1.绑定class样式

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
​
    <style>
        .abc{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 :class="aa">你好啊</h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            aa:"abc"
        }
    });
</script>
</html>

也可以绑定成一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-快速入门</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
​
    <style>
        .abc{
            color: red;
        }
        .bb{
            background-color: blue;
        }
    </style>
​
</head>
<body>
​
    <!--  2.构建vue的作用域载体  -->
    <div id="app">
        <h1 :class="aa">你好啊</h1>
    </div>
​
</body>
    <script>
        //3.创建vue实例，vue实例必须创建才能在html页面中使用
        var app = new Vue({
            el:"#app",
            data:{
              aa:["abc","bb"]
            }
        });
    </script>
​
</html>

  • v-bind:class可以简写为:class

6.2..绑定style样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
​
</head>
​
<body>
    <!-- 2.设置vue的作用域范围  -->
    <div id="app">
        <div :style="[baseStyles,overridingStyles,fontColor]">
            v-bind绑定style操作
        </div>
    </div>
</body>
​
<script>
    //3.构建vue实例
    var app = new Vue({
        el: "#app",
        data: {
            baseStyles: {'background-color': 'green'},
            overridingStyles: {border: '10px solid black'},
            fontColor: {'color':'blue'}
        }
    });
</script>
​
</html>

Sunshine.唯心
关注
  • 49
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础知识
php阿宝的博客
09-01 494
<!-- 案例1（创建一个vue应用）： --> <div id="app"> {{message}} {{name}} </div> <script> var vm = new Vue({ el:'#app', //el：元素 data:{ message:'hello Vue!', ...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
VUE基础知识
m0_60027772的博客
07-16 1564
vue框架是一个轻量级，渐进式的前端框架。
vue 基础知识总结
qq_40046544的博客
09-14 3192
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
vue基础知识-菜鸟入门
01-03
vue基础
Vue基础知识分享
08-07
包含一个关于Vue基本知识的PPT，一份根据Vue官网实现的简单十里代码，一份关于Vue基本操作的Word文档。文档分享来自LFZ妹纸。
vue基础知识面试题.zip 包含 vue2 和 vue3
01-23
vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 ...
Vue基础知识.pptx
03-24
Vue是一种流行的前端框架，这个PPT旨在帮助面试者加深对于Vue的基本概念和原理的了解。在数据绑定方面，可以介绍Vue的单向数据流和双向数据...总之，这个PPT将涵盖Vue面试中重要的基础知识，帮助面试者有效准备面试。
Vue基础知识点附带实例
01-30
vue
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
qq_42582773的博客
06-15 250
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 420
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
【Echarts系列】平滑折线面积图
kk爱闹
06-11 354
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 816
vue初使用实例之笔记本
Ant Design Vue 动态表头与数据填充教程
学习编程的小羊的博客
06-11 376
安装并引入 Ant Design Vue 组件库。准备动态表头和数据的状态。发起请求获取表头和数据。将获取到的表头和数据赋值给组件的状态。使用a-table组件渲染表格，并传入动态表头和数据。根据需要为表格添加样式。
vue:对三种获取更新后的dom的方式进行分析
最新发布
qq_45820271的博客
06-17 294
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1288
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 847
Vue在表单校验中trigger属性指定何时触发校验规则
uniapp 仿写弹窗
weixin_45881304的博客
06-13 483
【代码】uniapp 仿写弹窗。
vue css基础知识
09-22
Vue中的CSS基础知识包括以下几点： 1. 类绑定：使用v-bind:class指令，可以根据条件动态地绑定CSS类名。 2. 样式绑定：使用v-bind:style指令，可以绑定一个样式对象，动态地设置元素的样式。 3. 条件渲染：使用v-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值