初识Vue3

最新推荐文章于 2024-05-22 10:31:30 发布

ytllll

最新推荐文章于 2024-05-22 10:31:30 发布

阅读量82

点赞数

分类专栏： Vue3 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43350210/article/details/117908740

版权

Vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.Vue.js安装

方式一：直接CDN引入

<script src="https://unpkg.com/vue@next"></script>

方式二：下载和引入
下载Vue的源码，可以直接打开CDN的链接：
通过script标签，引入刚才的文件：

 <script src="../js/vue.js"></script>

2.Vue3的简单使用

<body>
  
  <div id="app"></div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `<h2>你好啊, 李银河</h2>`
    }).mount("#app");
  </script>

创建一个div添加id=app
通过.mount("#app")来将Vue对象挂载到元素上
template属性：表示的是Vue需要帮助我们渲染的模板信息：
- 目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的
  innerHTML；
- 但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。
- Vue提供了两种方式：
  - 方式一：使用script标签，并且标记它的类型为 x-template；
  - 方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id；
- template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使
  用JavaScript实例化；

data属性是传入一个函数，并且该函数需要返回一个对象：
- 在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
- 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
- 所以我们修改counter的值时，template中的 {{counter}}也会发生改变；
methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
- 这些方法可以被绑定到 template 模板中；
- 在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；
注意：

3.Vue中的MVVM

View层：
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

4.Vue的生命周期

ytllll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue3

1.Vue.js安装方式一：直接CDN引入<script src="https://unpkg.com/vue@next"></script>方式二：下载和引入下载Vue的源码，可以直接打开CDN的链接：通过script标签，引入刚才的文件： <script src="../js/vue.js"></script>2.Vue3的简单使用<body> <div id="app"></div&gt
复制链接

扫一扫

专栏目录