渣渣枫初识Vue与Element

最新推荐文章于 2023-04-14 12:41:55 发布

程序猿枫

最新推荐文章于 2023-04-14 12:41:55 发布

阅读量411

点赞数 1

文章标签： vue html

本文链接：https://blog.csdn.net/m0_51173023/article/details/109066084

版权

一、Vue

1.初识Vue

Vue是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点
易用：在有HTMLCSSJavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

2.Vue的入门

开发步骤

（1）下载和引入vue.js文件。
（2）编写入门程序。
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

代码实现

<!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="div">
        {
  {msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
    
        el:"#div",
        data:{
    
            msg:"Hello Vue"
        }
    });
</script>
</html>

3.Vue入门升级

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

let vm = new Vue({
 选项列表;
});

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

<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="div">
        <div>姓名：{
  {name}}</div>
        <div>班级：{
  {classRoom}}</div>
        //单击事件
        <button onclick="hi()">大家好</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
    
        el:"#div",
        data:{
    
            name:"张三",
            classRoom:"清华大学"
        },
        methods:{
    
            study(){
    
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }
    });
    //定义打招呼方法
    function hi(){
    
        vm.study();
    }
    //定义修改班级
    function update(){
    
        vm.classRoom = "北京大学";
    }
</script>
</html>

4.小结

Vue是一套构建用户界面的渐进式前端框架。
Vue的程序包含视图和脚本两个核心部分。
脚本部分
-Vue核心对象
-选项列表
el：接收获取的元素。
data：保存数据。
methods：定义方法。
视图部分
数据绑定：{ {变量名}}

二、Vue常用指令

1.常用指令

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

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

2.文本插值

v-html：把文本解析为 HTML 代码。
代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{
  {msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el:"#div",
        data:{
    
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

3.绑定属性

v-bind：为 HTML 标签绑定属性值
代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
    
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el:"#div",
        data:{
    
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

4.条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else>div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el:"#div",
        data:{
    
            num:1,
            flag:false
        }
    });
</script>
</html>

5.列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性。
代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {
  {name}}
            </li>
            <li v-for="value in student">
                {
  {value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el:"#div",
        data:{
    
            names:["张三","李四","王五"],
            student:{
    
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

6.事件绑定

v-on：为 HTML 标签绑定事件
代码实现

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{
  {name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
    
        el:"#div",
        data:{
    
            name:"清华大学"
        },
        methods:{
    
            change(){
    
                this.name = 北京大学"
            }
        }
    });
</script>
</html>

7.表单绑定

表单绑定
v-model：在表单元素上创建双向数据绑定。
双向数据绑定
更新data数据，页面中的数据也会更新。
更新页面数据，data数据也会更新。
MVVM模型(ModelViewViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
代码实现

<html

最低0.47元/天解锁文章

程序猿枫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
渣渣枫初识Vue与Element

渣渣初学Uve与Element章目录前言一、Vue标题二、Element1.引入库2.读入数据案例总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、Vue标题示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、Element1.引入库代码如下（示例）：import numpy
复制链接

扫一扫