(一)Vue.js介绍

最新推荐文章于 2022-10-12 13:32:50 发布

lyj_010

最新推荐文章于 2022-10-12 13:32:50 发布

阅读量306

点赞数

分类专栏： Vue.js学习文章标签： Vue.js

本文链接：https://blog.csdn.net/lyj_010/article/details/102655639

版权

Vue.js学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

　　在过去的十年，我们的网页变得更加动态化和强大了，多亏了JavaScript，我们已经把很多传统的服务端代码放到了浏览器中。这样就产生了成千上万行的JavaScript代码，它们连接了各式各样的HTML和CSS文件，但缺乏正规的组织形式，于是各种JavaScript框架——Angular.js、Vue.js、React.js应运而生。

　　VUE是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库，它是一套用于构建用户界面的渐进式框架（VUE可以作为现成的服务端应用的一部分嵌入其中，也可以将服务端应用中更多的业务逻辑放到前端来实现），与其它大型框架不同的是：

Vue 被设计为可以自底向上逐层应用；
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合；
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动；

1、引入VUE

（1）引入 Vue.js 文件的网站链接：

开发环境版本：

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本：

	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

（2）下载 Vue.js 文件后，本地导入:

官网下载地址：vue.min.js

	<script src="./vue.min.js"></script>

2、第一个VUE 程序

Vue 构造器的语法格式：

	var vm = new Vue({
	  // 选项
	})

　　Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，每个 Vue 应用都需要通过实例化 Vue 来实现。

Vue 构造器的参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ sayHello() }}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                sayHello: function(){
                    return this.message;
                }
            }
        })
    </script>
</body>
</html>