vuejs学习一：简介（mvvm 生命周期简介）

最新推荐文章于 2021-10-28 19:36:44 发布

Roselia❀

最新推荐文章于 2021-10-28 19:36:44 发布

阅读量162

点赞数

分类专栏： vuejs学习笔记

本文链接：https://blog.csdn.net/qq_28471889/article/details/104186454

版权

vuejs学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

简介、mvvm、传入实例的options、生命周期

1 简介与安装

vuejs是一个渐进式，什么叫渐进式框架？就是我们可以用vuejs对部分项目进行重构，一点一点的将项目进行完全重构

全家桶：core+Vue-router+Vuex

常见的高级技术:

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

1.1 安装

方式1 cdn引入就是script引入

方式2 下载并引入

方式3 npm

1.2 简单示例

<body>
<div id="app">{{message}}</div>
</body>
<script>
   let app= new Vue({
        el:"#app",//用于挂载要管理的元素
       data:{
            message:'你好吗'
       }
    })
</script>

如果用jq实现的话就要先找到id为app的div元素，然后把创建好的message变量赋给div元素
这种一步一步操作的编程范式叫做命令式编程
而vue的编程范式是声明式范式，跳过命令直接声明因为命令在vue后台写好了

数据和页面实现分离

当数据变化时页面上对应的地方也会变化，这个叫做响应式页面

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
</body>
<script>
const app=new Vue({
    el:"#app",
    data:{
        message:"你好",
        movies:['海王','星际穿越','大话西游','喜洋洋与灰太狼','bad apple']
    }
})
</script>

示例计数器

<body>
<div id="num">
    <h2>当前计数：{{counter}}</h2>
    <br>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>
</body>
<script>
    const app=new Vue({
        el:"#num",
        data:{
            counter:0
        }
    })
</script>

注意：

v-on:click 表示点击事件的触发
两个button必须在id为num的div里面 vue对象才找得到

methods简单使用：

    <button v-on:click="increment">+</button>
    <button @click="sub">-</button> //v-on 简写为@
</div>
</body>
<script>
    const app=new Vue({
        el:"#num",
        data:{
            counter:0
        },
        methods:{
            increment:function () {
                this.counter++;
                console.log(this.counter)
            },
            sub:function () {
                this.counter--
                console.log(this.counter)
            }
        }
    })
</script>

2 Vue中的MVVM

MVVM为MVC思想的进一步，Model View ViewModel

简单理解 Model是数据 view是页面 ViewModel是沟通数据和页面之间的桥梁

Alt

vue中的vm主要实现的是：

数据绑定：将model的改变实时反映到view中
DOM监听：当DOM发生一些事件(点击滚动等) 监听并改变对应的数据

3 创建Vue实例传入的options

https://cn.vuejs.org/v2/api/#选项-数据

常用的：

el：类型string|htmlElement 决定vue之后会管理哪一个dom

data：Object|Function（组件中data必须是个函数）实例对应的数据对象

methods：{key:Functiong} 定义属于vue的方法，可以在其他地方调用，可以在指令中使用

4 Vue的生命周期

Alt

注意：前端规范缩进一般是2个空格而不是4个空格

Roselia❀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs学习一：简介（mvvm 生命周期简介）

简介、mvvm、传入实例的options、生命周期1 简介与安装vuejs是一个渐进式，什么叫渐进式框架？就是我们可以用vuejs对部分项目进行重构，一点一点的将项目进行完全重构全家桶：core+Vue-router+Vuex常见的高级技术:解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM1.1 安装方式1 cdn引入就是script引入方式2 下...
复制链接

扫一扫