Vue的介绍和简单使用_vue详细介绍及使用-csdn博客-优快云博客

本文链接：https://blog.youkuaiyun.com/yy8623977/article/details/131586945

1. vue简介

一套用于构建用户界面的渐进式JavaScript框架。渐进式就是可以自底向上逐层的应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件

特点：

采用组件化模式，提高代码复用率，且让代码更好维护------一个页面模块就是一个vue文件，里面集成了html、css、js
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点------例如之前遍历3条数据到内存中的虚拟DOM，再渲染到页面的真实DOM，现在多了一条数据，用内存中新的4条数据的虚拟DOM，和之前的虚拟DOM用Diff算法对比，发现只多了一条数据，则只需将这一条数据渲染到页面的真实DOM

2. 学习Vue的Javascript基础

ES6语法规范------结构赋值，模板字符，箭头函数
ES6模块化------默认暴露，统一暴露，分别暴露，import，export
包管理器------npm，yarn，cpm会一个就行
原型、原型链
数组常用方法。例如过滤数组，加工数组，筛选最值
axios
promise

3. vue.js文件的使用

从vue官网下载vue.js文件到vueTest/js目录下。然后在html文件中引用

从github选择谷歌浏览器插件，进入到chrome应用商店，将插件添加到浏览器即可

将一个图片重命名为favicon.ico，然后放到根路径vueTest目录下

使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 会引入一个Vue函数 -->
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<!-- 准备好一个容器 -->
<div id="demo">
    <!-- 使用vue模板, 里面可以使用js表达式 -->
    <h1>Hello，{{name.toUpperCase()}}，{{address}}，{{Date.now()}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示。但是浏览器使用ctrl + F5强制刷新还是会有提示

    // 创建Vue实例。要和容器一一对应。里面的data发现变化，容器会重新渲染
    new Vue({
        // el用于指定当前Vue实例为哪个容器服务，值还可以是document.getElementById("demo")
        el: '#demo',
        data: { //data中用于存储数据，数据供el所指定的容器去使用
            name: 'jim',
            address: '北京'
        }
    })

</script>

</body>
</html>