Vue篇

最新推荐文章于 2022-07-21 16:47:21 发布

gmx_holic

最新推荐文章于 2022-07-21 16:47:21 发布

阅读量215

点赞数

分类专栏： JavaScript 文章标签： vue javascript html 前端

本文链接：https://blog.csdn.net/weixin_48672332/article/details/107027690

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue篇

1.Vue简介

Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，可以很方便的与其它库或已有项目整合。
特点：
- 易用：在有 HTML CSS JavaScript 的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
Vue 的程序包含视图和脚本两个核心部分

视图：负责页面渲染，主要由 HTML+CSS 构成。

脚本：负责业务数据模型（Model）以及数据的处理逻辑。

2.Vue核心对象

Vue核心对象： let v = new Vue({ 选项列表})
选项列表：
- el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
- data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
- methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
在视图部分获取脚本部分的数据。
- 语法：{{变量名}}

3.常用指令

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

常用指令语法

文本插值
 v-html：把文本解析为 HTML 代码。
绑定属性
 v-bind：为 HTML 标签绑定属性值。
条件渲染
 v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
 v-else：条件性的渲染。
 v-else-if：条件性的渲染。
 v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
列表渲染
 v-for：列表渲染，遍历容器的元素或者对象的属性。
事件绑定
 v-on：为 HTML 标签绑定事件。
表单绑定
 v-model：在表单元素上创建双向数据绑定。

文本插值：v-html

把文本解析为 HTML 代码

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <!-- 定义变量，不会解析标签 -->
        {{msg}}
        <!-- 会解析标签 -->
        <div v-html="msg"></div>
    </div>
</body>
   <!-- 导入Vue框架 -->
<script src="js/vue.js"></script>
<script>
    //Vue核心对象
    new Vue({
        //获得id为div的元素
        el:"#div",
        //为msg变量赋值。在视图中声明的变量需要在此处赋值
        data:{msg:"<b>hahaha</b>"}
    })
</script>
</html>

绑定属性：v-bind

为 HTML 标签绑定属性值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        /* 定义类样式aa */
        .aa{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <!-- 绑定href属性 -->
        <a v-bind:href="msg">baidu</a>
        <br>
        <!-- v-bind可以省略，绑定class属性，直接写冒号接属性 -->
        <div :class="cls">yangshi</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //为变量msg和cls赋值
            msg:"https://www.baidu.com",
            cls:"aa"
        }
    })
</script>
</html>

条件渲染：v-if、v-else、v-else-if、v-show

v-show：根据条件展示某元素，区别在于切换的是 display 属性的值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
</head>
<body>
    <div id="div">
        <!-- islogin如果为真就显示这个标签内容 -->
        <div v-if="islogin">gerenzhognxin</div>
        <!-- islogin如果为假就显示这个标签内容 -->
        <div v-else="!islogin">
            <div>zhuce</div>
            <div>denglu</div>
        </div>
        <!-- islogin为false时，<div style="display: none;">v-show</div>-->
        <div v-show="islogin"> 
            v-show
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //设置变量为false
            islogin:false
        }
    })
</script>
</html>

列表渲染： v-for

列表渲染，遍历容器的元素或者对象的属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
</head>
<body>
    <div id="div">
        <!-- 遍历names数组，生成多个div，name是数组中的元素 -->
        <div v-for="name in names">
            {{name}}
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //定义数组
            names:["张三","李四","王五"]
        }
    })
</script>
</html>

事件绑定：v-on

为 HTML 标签绑定事件

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="div">
        <!-- 定义name变量 -->
        <div>{{name}}</div>
        <!-- 绑定单击事件change() -->
        <button v-on:click="change()">div1</button>
        <!-- 绑定双击事件change2() -->
        <button v-on:dblclick="change2()">div2</button>
        <!-- 绑定单击事件change3() -->
        <button @click="change3()">div3</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //为name变量赋值
            name:"我是一名程序猿"
        },
        methods:{
            change(){
                //this代表所在的Vue对象，为name变量赋值
                this.name="我是程序猿div1"
            },
            change2(){
                this.name="我是程序猿div2"
            },
            change3(){
                this.name="我是程序猿div3"
            }
        }
    })
</script>
</html>

表单绑定 v-model

在表单元素上创建双向数据绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>
<body>
    <div id="div">
        姓名：<input type="text" v-model="username">
        <br>
        密码：<input type="password" v-model="password">
        <br>
        <!-- 绑定单击事件 -->
        <button @click="getUsername()">点我打印姓名</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //为username和pasword赋值，打开网页时输入框会输出这两个值
            username:"张三",
            password:"123456"
        },
        methods:{
            //定义getUsername方法，在控制台输出username的值
            getUsername(){
                //打印出输入框中的文本，
                console.log(this.username)
            }
        }
    })
</script>
</html>

gmx_holic

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue篇

Vue篇1.Vue简介Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，可以很方便的与其它库或已有项目整合。特点：易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。Vue 的程序包含视图和脚本两个核心部分视图：负责页面渲染，主要由 HTML+CSS 构成。脚本：负责业务数据模型（Model）以
复制链接

扫一扫

专栏目录