• Vue(一)--邂逅vue


    一、Vue安装

    1.1、CDN引入

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

    1.2、下载和引入

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

    1.3、NPM安装

    后续通过webpack和CLI的使用

    二、Vue初体验

    2.1、Hello  Vuejs

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{name}}</h2>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        // let(变量)/const(常量)
        // 编程范式: 声明式编程
        const app = new Vue({
            el: "#app",  // 用于挂载要管理的元素
            data: {  // 定义数据
                message: "Hello Vuejs",
                name: "lawrence"
            }
        })
    </script>
    </body>
    </html>

    image

    2.2、Vue列表显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vuejs',
                movies: ['星际穿越','大话西游','少年派','盗梦空间']
            }
        })
    </script>
    </body>
    </html>

    image

    2.3、计数器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h2>当前计数: {{counter}}</h2>
        <!--1.表达式-->
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
        <!--2.函数-->
        <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button>
        <!--语法糖写法-->
        <button @click="increment">+</button>
        <button @click="decrement">+</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            },
            methods:{
                increment: function () {
                    this.counter++
                },
                decrement: function () {
                    this.counter--
                }
            }
        })
    </script>
    </body>
    </html>

    三、Vue中的MVVM

    image

    1)view层

    • 视图层,通常就是DOM层。
    • 主要的作用是给用户展示各种信息

    2)Model层

    • 数据层
    • 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。

    3)VueModel层

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

    四、创建Vue实例传入的options

    创建Vue实例的时候,传入了一个对象options。

    这个options中可以包含哪些选项呢?
    详细解析: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

    image

    五、Vue的生命周期

    图片1

    图片2

  • 相关阅读:
    记录「十一月做题记录」
    题解「GMOJ6898 【2020.11.27提高组模拟】第二题」
    题解「CFGYM102331B Bitwise Xor」
    题解「Japan Alumni Group Summer Camp 2018 Day 2J AB Sort」
    题解「AGC048B Bracket Score」
    题解「中位数之中位数 median」
    记录「十月做题记录」
    测试「2020牛客NOIP赛前集训营-提高组(第五场)」
    测试「20201028测试总结」
    定时提醒助手
  • 原文地址:https://www.cnblogs.com/hujinzhong/p/13586395.html
Copyright © 2020-2023  润新知