1.vue基础语法

1. vue的特点

1.0 什么是MVC，什么是MVVM

MVC：全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，是一种软件设计典范，将业务逻辑、数据、界面显示分离组织代码的形式
M：model层，主要处理数据的curd
V：view 视图层，前端页面
C：controller 控制器蹭，也被称为业务逻辑层，路由也是这里面的，最重要的是conrtol，数据的业务逻辑。例：登陆，注销

前端主要负责MVC中的V（view）着一层，主要工作就是和界面打交道，来制作前端页面效果

MVVM：是Model-View-ViewModel的简写，MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分，Model，View，VM(ViewModel)

1.1 三大前端框架

目前前端有三个非常流行的框架，非别是angularjs,reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。
vue是国人开发的，叫做尤雨溪，他也是html5版clear的打造人；
2014年2月，开源了一个前端开发库Vue.js
2016年9月，加盟阿里巴巴weex团队，尤雨溪（尤大神，背后宣传支持）称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。
任何一个创始人在语言推广初期，都会借助于大企业；比如python借助谷歌；php借助百度；vue借助阿里巴巴都是一样的；
从14年到现在仅仅六七年的时间，vue的用户使用量远远超过预期；
国外的网站：https://vuejs.org/
国内的网站使用中文版的：https://cn.vuejs.org/

1.2 vue的优势

Vue致力解决的问题与React一致，但却提供了另外一套解决方案。Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易
Vue的开发者尤雨溪是中国人，框架本身提供了大量丰富的中文文档，这也为Vue的发展和使用带来巨大的优势。
Vue框架适合于需要快速上手、上线的应用，还适用于迁移传统的多单面应用。

1.3 官网地址

https://vuejs.org/ 国外的网站
https://cn.vuejs.org/ 国内的网站使用中文版的

2. vue的下载和使用

2.1 直接用<script> 引入

2.2 使用CDN

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

2.3 使用npm安装

npm install -g @vue/cli

3. 挂载点配置

3.1 vue的模板

<div id="app"><button @click="change">改变数据</button><!-- {{}}里是js的表达式 --><h1>{{msg - 8}}</h1>
</div>

3.2 vue的实例化

创建vue实例传入option

option中主要有三个内容
el：
类型：string （#app）| HTMLElement （document.querySelector）
作用：决定之后Vue实例会管理哪一个DOM。
data：
类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。
methods：
类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

// jquery是以DOM做为驱动
// Vue是以数据做为驱动
// 编程范式：声明式
let vm = new Vue({ // 创建vue实例，实力化出来的vm就是MVVM中的调度者// 挂载点el: "#app", // element 元素data: { // data属性：存放el中需要的数据//只有注册在data当中的数据才是响应式数据，数据改变，会触发视图的重新渲染msg: 'hello world', // vue中不存在dom操作，直接通过渲染的方式显示book:[{"",""}]},// 方法methods: {change(){// this等价于vm这个vue的根实例this.msg = 'hahaha';}},// 用于计算的属性computed: {// 计算商品总价totalPrice: function () {let result = 0for (let i=0; i < this.books.length; i++) {result += this.books[i].price}return result}}    
})

3.3 编程范式【了解】

参考文档：https://blog.csdn.net/weixin_42968460/article/details/123836679
编程范式是一种方法论，用来指导你编写代码过程中的思路、规则、习惯和定式
编程范式主要有三种：命令式编程(Imperative)、声明式编程(Declarative)和函数式编程(Functional)。
命令式编程(Imperative)：命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。

声明式编程(Declarative)： 声明式编程(Declarative)： 声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。 SQL 语句就是最明显的一种声明式编程的例子。声明式编程是以数据结构的形式来表达程序执行的逻辑。它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。 SQL 语句就是最明显的一种声明式编程的例子。

函数式编程(Functional)：
函数式编程和声明式编程是有所关联的，因为他们思想是一致的：即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/61862.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！