Vue-学习笔记-01 Vue.js 入门与MVVM

文章目录一、vue.js安装1.1 直接CDN方式引入1.2 下载1.3 NPM安装二、Hello Vue.js2.1 Hello Vue.js2.2一、vue.js安装1.1 直接CDN方式引入对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

优雅哥cc

8222人浏览 · 2020-07-23 19:52:14

优雅哥cc · 2020-07-23 19:52:14 发布

文章目录

一、vue.js安装
二、Hello Vue.js
- 2.1 Hello Vue.js
- 2.2 展示列表
三、小案例计数器
- 3.1 v-on 监听事件简写为@
四、Vue中的 MVVM
五、创建Vue实例传入的options

一、vue.js安装

1.1 直接CDN方式引入

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

1.2 下载

开发环境在官网的开发版本按钮上右击，选择链接另存为即可直接下载。

    https://vuejs.org/js/vue.js

在这里插入图片描述

生成环境下载方式同上

    https://vuejs.org/js/vue.min.js

1.3 NPM安装

在项目中大多使用该方式,在学习了Vue.js的脚手架之后会使用该方式

    # 最新稳定版
    npm install vue

二、Hello Vue.js

2.1 Hello Vue.js

<body>
    <div id="app">
        <div>{{name}}</div>
    </div>    
</body>
<script src="../vue.js"></script>
<script>
    // 编程范式(声明式编程)
    // 好处数据与界面完全分离
    let vm = new Vue({
        el:"#app",
        data:{
            name:"Hello Vue.js"
        }
    })
</script>

效果：
在这里插入图片描述

2.2 展示列表

<body>
    <div id="app">
        {{message}}
        <br>
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new  Vue({
        el:"#app",
        data:{
            message:"你好啊",
            movies:['海贼王','钢铁侠','星际穿越','大话西游']
        }
    })
</script>

在这里插入图片描述
这种方法还支持响应式：

蠢方法：

<body>
    <div id="app">
        {{message}}
        <br>
        <ul>
            <li>{{movies[0]}}</li>
            <li>{{movies[1]}}</li>
            <li>{{movies[2]}}</li>
            <li>{{movies[3]}}</li>
        </ul>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new  Vue({
        el:"#app",
        data:{
            message:"你好啊",
            movies:['海贼王','钢铁侠','星际穿越','大话西游']
        }
    })
</script>

效果：
在这里插入图片描述

三、小案例计数器

3.1 v-on 监听事件简写为@

<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        
        <button v-on:click="add">+</button>
        <button v-on:click="subtraction">-</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods: {
                add:function(){
                    this.counter++
                },
                // 减法的意思
                subtraction:function(){
                    this.counter--
                }
            },
        })
    </script>
</body>

效果：
在这里插入图片描述

四、Vue中的 MVVM

MVVM（Model–View–ViewModel）是一种软件架构模式。
维基百科 MVVM

在这里插入图片描述

计数器的MVVM
在这里插入图片描述
更清晰的MVVM 计数器案例

<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <button v-on:click="add">+</button>
        <button v-on:click="subtraction">-</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const obj={
            counter:0
        }
        
        let vm = new Vue({
            el:"#app",
            data:obj,
            methods: {
                add:function(){
                    this.counter++
                },
                // 减法的意思
                subtraction:function(){
                    this.counter--
                }
            },
        })
    </script>
</body>

在这里插入图片描述

五、创建Vue实例传入的options

5.1 el:

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

5.2 data:

类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

5.3 methods:

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

这里区分以下什么是方法什么是函数：

一般直接写在script里边的叫做函数

<script>
	function(){
		...
	}
</script>

写在一个类里边的我们叫做方法，因为它是和一个实例挂钩的。

六、生命周期

生命周期：从诞生到消亡的一个过程。
在这里插入图片描述

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^