Vue.js入门与MVVM

甫子美

已于 2022-07-20 21:18:13 修改

阅读量466

点赞数

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

于 2022-07-20 21:15:59 首次发布

本文链接：https://blog.csdn.net/qq_45896852/article/details/125899925

版权

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

1 篇文章 0 订阅

订阅专栏

笔记目录

一、vue.js安装
二、Hello Vue.js
- 2.1 Hello Vue.js
- 2.2 展示列表
三、模板语法
四、Vue中的 MVVM
五、创建Vue实例传入的options
六、生命周期

一、vue.js安装

1.1 直接CDN方式引入

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

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

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

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

1.2 下载

开发环境在官网的开发版本按钮上右击，点击链接即可直接下载文件。

在这里插入图片描述

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>

运行结果如下：
在这里插入图片描述

三、模板语法

在这里插入图片描述

 <!-- 准备好一个容器-->
    <div id="root">
      <h1>插值语法</h1>
      <h3>你好，{{name}}</h3>
      <hr />
      <h1>指令语法</h1>
      <a v-bind:href="school.url.toUpperCase()" x="hello"
        >点我去{{school.name}}学习1</a
      >
      <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

    new Vue({
      el: "#root",
      data: {
        name: "jack",
        school: {
          name: "尚硅谷",
          url: "http://www.atguigu.com",
        },
      },
    });
  </script>

四、Vue中的 MVVM

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

在这里插入图片描述

MVVM模型
	1. M：模型(Model) ：data中的数据
	2. V：视图(View) ：模板代码
	3. VM：视图模型(ViewModel)：Vue实例
观察发现：
	1.data中所有的属性，最后都出现在了vm身上。
	2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

五、创建Vue实例传入的options

5.1 el:

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

5.2 data:

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

5.3 methods:

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

六、生命周期

在这里插入图片描述


生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。

甫子美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js入门与MVVM

vue入门级
复制链接

扫一扫

专栏目录