vue 入门小结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层。

1、引入方式：直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

 初学者可以使用script标签 的方式引入，开发的时候是不使用的。

最好在</head>之前引入，为了防止出现抖屏的现象。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


2、其他方式参照官网  https://cn.vuejs.org/v2/guide/installation.html。


创建一个 Vue 实例

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

var vm = new Vue({
  // 选项
})


1、挂载点： 

el 对象通过选择器来选中dom 节点。即为该实例的挂载点，与页面的选中的dom节点进行绑定。

data 代表实例里的数据。

tamplate 代表模板，当没有定义模板时，挂载点下的所有dom节点为该实例的模板。

methods  自定义的事件都可以写在methods对象里。

computed  计算属性写在computed对象中。

watch  侦听器，将侦听的对象写在侦听器里，当检测到变化使根据定义的逻辑进行处理数据。

如下简单的实例： new vue 即为vue的入口


2、属性绑定

1）属性的单向绑定 v-bind 简写为冒号

单向属性绑定： 数据决定页面显示


2）、双向绑定 v-model="" (等号后面为数据）

双向属性绑定： 页面数据影响实例数据值，实例数据值也影响页面。


3、事件 v-on： + 事件名缩写 @ + 事件名


组件与实例的关系

每个组件也是一个实例，实例也是组件

1、全局组件及模板

注意 父组件通过属性传递给子组件   自检用props接收属性值


2、局部组件

通过var 一个对象  


父组件要接收子组件，在内部注册一下


以上是 vue 入门小结 的全部内容， 来源链接： utcz.com/z/376419.html

回到顶部