Vue学习（一）- 邂逅Vuejs

零、视频链接
一、邂逅Vuejs
- 1.认识Vuejs
- - 1.1 为什么学习Vuejs
  - 1.2 简单认识一下Vuejs
- 2.Vuejs安装方式
- - 2.1 CDN引入
  - 2.2 下载和引入
  - 2.3 NPM安装管理
- 3. Vuejs初体验
- - 3.1 Hello Vuejs
  - 3.2 Vue列表展示
  - 3.3 案例：计数器
- 4. Vuejs的MVVM
- - 4.1 Vue中的MVVM
- 5. 创建Vue时, options可以放那些东西

零、视频链接

最全最新Vue、Vuejs教程，从入门到精通

一、邂逅Vuejs

1.认识Vuejs

1.1 为什么学习Vuejs

Vuejs在前端需求中最多，找前端工作必备技能。

1.2 简单认识一下Vuejs

vue是一个渐进式框架：可以将Vue作为应用的一部分嵌入，慢慢修改整个项目。
可以不需要具备其他类似Angular、React，甚至jQuery的经验。（但需要一定HTML、CSS、JavaScript基础）
Vue有很多特点和web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM

2.Vuejs安装方式

2.1 CDN引入

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

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

2.2 下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

2.3 NPM安装管理

后续通过webpack和CLI的使用，使用该方式

3. Vuejs初体验

3.1 Hello Vuejs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--定义一个容器-->
<div id="app"><h2>{{message}}</h2><h3>{{name}}</h3>
</div><!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//let(变量)、const(常量)// 编程范式:声明式编程const app = new Vue({el: '#app',      //用于挂在vue需要管理的对象data:{ //定义数据message: 'Hello Vuejs',name: 'ZYH'}})//原生js做法(编程范式:命令式编程)//1.创建div元素，设置id属性//2.定义一个变量叫message//3.将message变量放在前面的div元素中显示
</script>
</body>
</html>

3.2 Vue列表展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><ul><li>{{movies[0]}}</li><li>{{movies[1]}}</li><li>{{movies[2]}}</li><li>{{movies[3]}}</li></ul><ul><li v-for="item in movies">{{item}}</li></ul></div><!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el:'#app',data:{message : '你好啊',movies : ['星际穿越','大话西游','盗梦空间','少年派']}})
</script></body>
</html>

3.3 案例：计数器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><h2>当前计数: {{counter}}</h2><!-- v-on监听click事件，当监听到了就计数++或自减-->
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter--;">-</button>--><button v-on:click="add">+</button><button v-on:click="sub">-</button>
</div><!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el:'#app',data:{counter : 0},methods:{add: function () {this.counter++;  //用来找到本对象中的counter，如果直接用counter会找全局变量的counterconsole.log('add被执行');},sub: function () {this.counter--;console.log('sub被执行');}}})
</script>
</body>
</html>

4. Vuejs的MVVM

4.1 Vue中的MVVM

MVVM : Model ViewModel View
view层
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
Model层
- 数据层
- 数据可能是我们固定死的数据，更多是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器案例中们就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(带年纪、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

5. 创建Vue时, options可以放那些东西

el:
- 类型：string| HTMLElement
- 作用：决定之后Vue实例会管理哪个DOM
data:
- 类型：Object | Function（组件中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
methods:
- 类型：{[key:string]:Function}
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期函数

Vue学习(一)-邂逅Vuejs相关推荐

[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
Vue学习笔记（4）（Vue-router）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili Vue-router 0. 认识路由什么是路由? 路由是一个网络工 ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
Vue学习笔记（四）—— 前端路由
介绍本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录一 vue获取原生DOM的方式二 DIY脚手架三 vue-cli脚手架的使用四 webpac ...
Vue学习之认识到应用（三）
上一篇文章Vue学习之认识到应用(二)因为字太多页面反应不过来,卡了.重新写了一部分,难受. 目录 13.Vue-Router前端路由 13.1.路由的发展阶段 13.1.1.后端路由阶段 13.1. ...
vue学习实现待办事项功能
下载vue.js的网址为:https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入代码实现 <!DOCTYPE h ...
2w多字总结的VUE学习文档
VUE学习文档文章目录 VUE学习文档回顾: 总结 0 目标 1.前言 2.认识Vue 3.快速入门 3.1.创建工程 3.2.安装vue 3.2.1.下载安装 3.2.2.使用CDN 3.3.v ...

Vue学习(一)-邂逅Vuejs

Vue学习（一）- 邂逅Vuejs

零、视频链接

一、邂逅Vuejs

1.认识Vuejs

1.1 为什么学习Vuejs

1.2 简单认识一下Vuejs

2.Vuejs安装方式

2.1 CDN引入

2.2 下载和引入

2.3 NPM安装管理

3. Vuejs初体验

3.1 Hello Vuejs

3.2 Vue列表展示

3.3 案例：计数器

4. Vuejs的MVVM

4.1 Vue中的MVVM

5. 创建Vue时, options可以放那些东西

Vue学习(一)-邂逅Vuejs相关推荐

最新文章

热门文章