01：初识Vuejs

三思原创大约 5 分钟

本文介绍了Vuejs的基础知识，包括Vuejs的简单认识、安装方式、初体验以及通过实例展示Hello Vuejs、Vue列表显示和计数器功能。

Vue自学笔记1：初识Vuejs

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。

一、初识Vuejs

1、认识Vuejs

1.1 简单认识一下Vuejs

Vue (读音 /vjuː/，类似于 view)，不要读错。
Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
从零学习Vue开发，并不需要你具备其他类似于Angular、React，甚至是jQuery的经验。
但是你需要具备一定的HTML、CSS、JavaScript基础。

2、Vuejs安装方式

2.1 CDN引入

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

 <body>
     <div id="app">
         <h1>{{message}}</h1>
         <h2>我的名 字叫做{{name}}</h2>
     </div>
   
  
     <!-- 1、引用vue -->
     <!-- 1.1、引入npm中的vue.js -->
     <!-- <script src="../../node_modules/vue/dist/vue.global.js"></script> -->
     <!-- 1.2、CDN的引入 -->
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         //vue的做法（编程范式：声明式）
         const app = new Vue({
             el: '#app',      //用于挂载要管理的元素
             data: {          //定义数据
                 message: '你好啊，小火鸡！',
                 name:'doubleup'
             }
         })
 
         //原生js的做法（编程规范：命令式）
         //1.创建div元素，设置id属性
         //2.定义一个变量message
         //3.将message变量放在前面的div元素中显示
     </script>
 </body>

总结：

3.2、Vue列表显示

 <body>
     <div id="app">
         {{message}}
 
         <!-- <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>  
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app=new Vue({
             el:'#app',
             data:{
                 message:'你好啊',
                 movies:['星际穿越','盗梦空间','信条','蝙蝠侠']
             }
         })
     </script>
 </body>

3.3、Vue案例：计数器

 <body>
     <div id="app">
         <h2>当前计数：{{counter}}</h2>
         <!-- 1、直接在v-on里自增counter -->
         <!-- <button v-on:click="counter++">+</button> -->
         <!-- <button v-on:click="counter--">-</button> -->
     
         <!-- 2.1、调用函数自增counter -->
         <button v-on:click="add">+</button>
         <button v-on:click="sub">-</button>
         <!-- 2.2、语法糖写法 -->
         <button @click="add">+</button>
         <button @click="sub">-</button>
     
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el:'#app',
             data:{
                 counter:0
             },
             methods:{
                 add:function(){
                     // console.log('add被执行');
                     //注意不能直接用counter，因为直接用回去找全局的counter变量，所以要用this.counter
                     this.counter++      
                 },
                 sub:function(){
                     // console.log('sub被执行');
                     this.counter--
                 }
             }
          })
     </script>
 </body>

总结：

4、Vuejs的MVVM

什么是MVVM呢？

全称：Model View ViewModel

通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科) https://open in new windowzh.wikipedia.org/wiki/Mopen in new windowVVMopen in new window 我们直接来看Vue的MVVM

View层：

视图层在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。

VueModel层：

视图模型层视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。