初识Vue

y17757773039

已于 2022-10-11 19:37:29 修改

阅读量78

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-01 16:57:49 首次发布

本文链接：https://blog.csdn.net/y17757773039/article/details/126642774

版权

一、什么是vue
答：Vue是一套用于构建用户界面的渐进式Javascript框架。
(渐进式：自底向上逐层应用，应用：小巧的核心库，各式各样的Vue插件)

特点：1、组件化（把页面某个模块扣下来做成.vue文件，比如页面新闻模块封装成news.vue文件其中包含h5片段、css、js，这样一来再写别的页面时我可以随时牛头人过来，提高代码复用率）
在这里插入图片描述

2、声明式编码（命令式编码：纯js写列表渲染，先要遍历数组，将数组的数据写成html格式，亲自操作DOM，获取元素.innerHTML方法修改内容，而声名式编码则是使用v-for="item in items"一笔带过，无需直接操作DOM）
在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法，尽量复用Dom节点（过程：数据->虚拟DOM->DOM，相较于直接修改DOM区别：数据修改后，在虚拟DOM会通过diff计算，将相同数据直接复用在DOM上，不同数据一条一条重新放入DOM，不会像tableHtml.innerHTML=html全部直接将全部数据一条一条重新替换）

二、优势
轻量级（要求少，轻便）、支持数据绑定（基于MVVM思想将数据与视图绑定）、指令（自定义属性）、Vue可扩展性枪（支持插件扩展）

三、Vue开发环境
Visual Studio Code下载地址
https://code.visualstudio.com/Download 请添加图片描述
安装插件：Open in Bowser
在这里插入图片描述
四、Vue实例（牛刀小试）
点击文件->新建文本文件，随后点击选择语言（使用html），最后输入‘！’（快捷写入html代码）
最后再随便写点vue,写完后【ALT+B】查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 
        1、引入Vue.js
        2、定义一个div
        3、实例化Vue
        4、页面展示 [alt+b]
    -->
    
    <!-- 定义div（提供Vue模板），id是唯一的，此处被el选中为容器，显示Vue数据-->
    <div id="app">{{name}}<span v-html="message"></span></div>
    
    <!-- 实例化Vue -->
    <script>
        var vm=new Vue({
            //vue控制页面区域
            //el:元素选择器，作用：指定哪个作为Vue实例的容器
           	//‘#’表示选择id名称，‘.’表示选择class名
            el: '#app',
            //vue控制页面数据
            //data用于存储数据
            //data属性值里name填写完后，可以再el选中的标签中使用,使用方法：{{name}}
            //message填写后，可以再el选中的标签中使用，v-html=“message”，其中的值会覆盖该元素
            data: {
                name:'mhy',
                message: '<h1 style="color:red;">原神</h1>'
            }
        })

    </script>
</body>
</html>