Vue入门到实践-1

最新推荐文章于 2024-07-25 09:36:58 发布

南絮朝颜

最新推荐文章于 2024-07-25 09:36:58 发布

阅读量175

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mengtongxch/article/details/104357377

版权

1、认识vue

vue是一套用于构件用户界面的渐进式框架，它被设计为可以自底向上逐层应用。vue核心库只关注视图层，不仅容易上手，而且也便于和第三方库或项目整合，另一方面可以与现代化工具链以及各种支持类库结合使用，vue也完全可以为复杂的单页应用提供驱动。

官网：

官网： https://cn.vuejs.org/

参考： https://cn.vuejs.org/v2/guide/

Git地址：https://cn.vuejs.org/

2.安装vue

安装vue主要有三种方式：

下载安装：下载地址：https://cn.vuejs.org/ ，下载解压，在dist可以得到vue.js文件
使用CDN（内容分发网络）服务：

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


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

3. npm安装（推荐）：例如在idea里面代开命令行控制台，输入npm init -y(对项目进行初始化），接着输入npm install vue --save(或者S)，接着会在项目目录里面出现node_modules目录，并且下面还有vue目录

3.vue实例
- 首先引入包
- 通过new Vue创建实例
构造函数接收对象，对象中包含一些属性：el:通过id选中要渲染的页面元素；data数据是一个对象，里面包含很多对象，都可以渲染到视图当中去

实例：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<div id="app">
    <h2>{{name}}非常酷！</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"小黑"
        }
    });
</script>
</body>
</html>
```
实现双向绑定，利用v-model实现和num的双向绑定，实例如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div双向绑定</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}},hello!
        有{{num}}个炫酷学科！
    </h2>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"olivia",
            num:1
        }
    });
</script>
</body>
</html>
```
实现的效果就是输入框里面的data中num变化，同时导致页面输出也跟着变化

事件处理，利用v-on来实现事件的绑定，具体实例如下所示:
```
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    
    <input type="text" v-model="num">
    
    <button v-on:click="num++">点我</button>
    <h2>
        {{name}},wawawa!
        有{{num}}个炫酷学科
    </h2>
</div>
<script>
    // 每个vue对象都要关联一段html模板，vue会基于此模板进行渲染
    var vp=new Vue({
        el:"#app",
        data:{
            name:"张三",
            num:1
        }
    })
</script>
</body>
</html>
```
4.Vue实例

4.1、创建vue实例，每个vue应用都是通过vue函数创建一个新的vue实例开始的：

例如：var vm=new Vue({ 选项 })

4.2、模板或者元素

每个vue实例都需要关联一段html模板，vue会基于此模板进行视图渲染，通过el属性来指定

例如：<div id="#app"> </div>,然后关联这个div var VM=new Vue({ el:"#app")}

4.3、数据

当vue实例被创建的时候，他会尝试获取data中定义的所有属性，用于视图渲染，并且监视data中的属性，当data数据发生改变的时候，所有的相关视图都会被重新渲染，这就是响应式系统。

4.4、方法

vue实例中除了可以定义data属性，也可以定义方法，并且在vue作用范围之内使用

5.生命周期钩子

生命周期：

new Vue（）----beforeCreate（）在实例初始化之后，数据观测（data/observer）和event/watcher事件配置之前被调用---created()在实例创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调，然而挂载阶段还没开始，$el属性不可见----beforeMount()在挂载开始之前被调用，相关的render函数首次被调用------mounted()，el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内-----beforeDestory()，实例销毁之前调用，在这一步，实例任然完全可以使用-----destroyed()，vue实例销毁后调用，调用后，vue实例指示的所有东西都会绑定，所有的监听事件都会被移除，所有子例也会被销毁。

钩子函数实例：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试--created函数</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
    {{msg}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        created(){
            this.msg="hello,vue.created"
            console.log(this)
        }
    })
</script>
</body>
</html>
```
总结：this就是当前的vue实例，在vue对象内部，必须使用this才能够访问到vue里面的data属性，方法等

南絮朝颜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到实践-1

1、认识vuevue是一套用于构件用户界面的渐进式框架，它被设计为可以自底向上逐层应用。vue核心库只关注视图层，不仅容易上手，而且也便于和第三方库或项目整合，另一方面可以与现代化工具链以及各种支持类库结合使用，vue也完全可以为复杂的单页应用提供驱动。官网：官网：https://cn.vuejs.org/ 参考：https://cn.vuejs.org/v2/guide/ G...
复制链接

扫一扫