1.vue基础语法
目录
- 1. vue的特点
- 1.0 什么是MVC,什么是MVVM
- 1.1 三大前端框架
- 1.2 vue的优势
- 1.3 官网地址
- 2. vue的下载和使用
- 2.1 直接用<script> 引入
- 2.2 使用CDN
- 2.3 使用npm安装
- 3. 挂载点配置
- 3.1 vue的模板
- 3.2 vue的实例化
- 3.3 编程范式【了解】
课程目标
- 了解vue的特点
- 理解vue的运行机制
- 掌握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):
函数式编程和声明式编程是有所关联的,因为他们思想是一致的:即只关注做什么而不是怎么做。但函数式编程不仅仅局限于声明式编程