渐进式框架 Vue.js

最新推荐文章于 2024-06-02 21:34:19 发布

菇毒

最新推荐文章于 2024-06-02 21:34:19 发布

阅读量2.6k

点赞数 1

分类专栏： web 前端学习文章标签： vue.js javascript 前端渐进式框架 Vue.js

本文链接：https://blog.csdn.net/weixin_43960383/article/details/123193727

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

渐进式框架 Vue.js

1. Vue.js 概述
2 快速创建、部署、运行和打包一个 Vue.js 项目
3. Vue 组件
4. 前端路由配置

1. Vue.js 概述

Vue 是一套用于构建用户界面的渐进式框架；Vue 被设计为能自底向上逐层应用；
Vue 的核心库只关注视图层，易于上手，便于与第三方库或既有的姓名整合；
当现代化的工具链和各种支持库结合使用时，Vue 也能够为复杂的单页应用提供驱动；
在 MVC 模型里，Model 不依赖于 View，但 View 依赖于 Model；MVVM 模式在概念上是真正地将页面和数据逻辑分离它把数据绑定工作放到一个 JS 中去实现，这个 JS 文件的主要功能是完成数据的绑定，就是把 Model 绑定到 UI 元素上；
访问 https://cn.vuejs.org，能获得更多的介绍和帮助文档；
例子：使用 Vue.js 的示例

<!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>
</head>
<body>
    <div id="app">
        <p v-text="message"></p>
        <p>双向绑定：<input v-model="message"></p>
        <button v-on:click="reverseMessage">逆转消息</button>
        <button v-on:click="getApi">调用ajax接口改变message</button>
        <p v-bind:title="title">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
        <p v-if="seen">现在你看到我了</p>
        <ol>
            <li v-for="todo in todos" >
            {{todo.text}}
            </li>
        </ol>
    </div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>  <!--加载Vue.js-->
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!',
			title: '悬浮提示信息',
			seen: true,
			todos: [
				{ text: '学习 JavaScript' },
				{ text: '学习 Vue' },
				{ text: '整个牛项目' }
			]
		},
		methods: {
			reverseMessage: function () {
				this.message = this.message.split('').reverse().join('')
			},
			getApi:function() {
				var $this = this
				$.ajax({   //使用Ajax方法实现异步刷新
					url:'api.php',
					method:'get',
					success:function(data){
						$this.message = data
					},
					error:function(err){
						$this.message = '调用接口失败'
					}
				})
			}
		}
	})
</script>

2 快速创建、部署、运行和打包一个 Vue.js 项目

2.1. 创建项目

在 VS Code 的终端命令行，安装 Vue.js 的脚手架，命令如下：

cnpm install-global vue-cil

执行以下命令，创建名为 TestVue 的项目：

cnpm install webpackk-g        //全局安装webpack
vue init webpack TestVue

注意： 在创建项目的对话中，需啊哟输入小写的项目名 testvue
进入项目文件夹，能看到帮助文档 README.md，它提示了后续的两个操作步骤：安装依赖（cnpm install）和部署项目（cnpm run dev）；

2.2. 安装依赖

用 Node.js 访问 MySQL 数据库前，要先安装 MySQL 数据库服务器软件；
20220119

2.3. 项目部署和访问

执行部署项目命令如下所示：
20220119

Ctrl + C ，再输入 ‘Y’，结束运行；
20220119

2.4. 打包 Vue 项目

window 环境下，打包已经生成的 Vue.js 项目，要先修改 config/index.js 中的配置信息；
20220119

打包命令如下所示：

npm run build

20220119

项目打包完成后，项目的根目录中会生成 dist 文件夹，将 dist 文件夹复制到任意的 Web 服务器后，即可访问；
2000219

3. Vue 组件

Vue 是一套用于构建用户界面的渐进式框架；与其他大型框架不同的是，Vue 被设计为能自底而上逐层；
Vue 的核心库只关心图层，易于上手，便于与第三方库或既有的项目整合；当与现代化的工具链和各种支持的库结合使用时，Vue 完全嫩挂钩为复杂的单页应用提供驱动；
使用 Vue 组件的项目结构；
20220119