一、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>

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

六、生命周期

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

在这里插入图片描述

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐