侧边栏壁纸
博主头像
soulballad博主等级

技术文章记录及总结

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录
Vue

1.Vue初识

soulballad
2022-01-17 / 0 评论 / 0 点赞 / 47 阅读 / 1,198 字
温馨提示:
本文最后更新于 2022-05-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 认识Vuejs

1.1 简单认识Vuejs

  • Vue (读音 /vju:/,类似于view),不要读错。
  • Vue是一个渐进式的框架,什么是渐进式的呢?
    • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
    • 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
    • 比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
  • Vue有很多特点和Web开发中常见的高级功能
    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

2. Vuejs安装方式

2.1 CDN引入

可以选择引入开发环境版本还是生产环境版本

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

2.2 下载和引入

2.3 NPM安装管理

$ npm install vue

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>
    <h1>{{name}}</h1>
</div>

<script src="../../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: 'Hello Vuejs',
            name: 'soulballad'
        }
    })

    // 原始js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性
    // 2.定义一个变量叫message
    // 3.将message变量放在前面的div元素中显示
    // 4.修改message的数据: 今天天气不错!
    // 5.将修改后的数据再次替换到div元素
</script>

</body>
</html>

3.2 Vue列表展示

<div id="app">
    <ul>
        <!-- 使用v-for进行遍历 -->
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            movies: ['星际穿越', '流浪地球', '火星救援', '阿凡达']
        }
    })
</script>

3.3 案例:计数器

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <!--<button v-on:click="counter++">+</button>-->
    <!--<button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!-- 语法糖写法 -->
    <!--<button @click="add">+</button>-->
</div>

<script src="../../js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                this.counter++;
            },
            sub: function () {
                this.counter--;
            }
        }
    })
</script>

4. Vuejs的MVVM

image-20220116112129721

  • View层:

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

    • Ø数据层
    • Ø数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
    • Ø在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
  • VueModel层:

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

5. Vue生命周期

5.1 Vue实例options

穿件Vue对象时,可以传入一个 options 对象,这个options可以包含以下选项

API — Vue.js (vuejs.org)

目前掌握这些选项:

  • el:

    • 类型:string | HTMLElement
    • 作用:决定之后Vue实例会管理哪一个DOM。
  • data:

    • 类型:Object | Function (组件当中data必须是一个函数)
    • 作用:Vue实例对应的数据对象。
  • methods:

    • 类型:{ [key: string]: Function }
    • 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

5.2 Vue生命周期

image-20220116120346512

image-20220116120402813

0

评论区