Vue学习(一)-邂逅Vuejs-CSDN博客

本文链接：https://blog.csdn.net/qq_21449473/article/details/121144968

Vue学习（一）- 邂逅Vuejs

零、视频链接
一、邂逅Vuejs

零、视频链接

最全最新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会找全局变量的counter
            console.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。