02. Vue.js 基础---Hello World

最新推荐文章于 2024-02-14 16:53:09 发布

Jeremy-th

最新推荐文章于 2024-02-14 16:53:09 发布

阅读量241

点赞数 1

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44719763/article/details/109346301

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写的不好、写错的地方，欢迎大家给我纠正，给我留言，给我私信。

1. Hello World

下面我们通过几个小例子来体会一下Vue。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

<div id="app">
	<!-- 1. -->
	<div>{{message}}</div>
	<hr>
	
	<!-- 2. -->
	<div>
		输入框内容：{{inputValue}}<br>
		<input v-model="inputValue">
	</div>
	<hr>

	<!-- 3. -->
	<h3>当前计数：{{count}}</h3>
	<button v-on:click="add">+</button>
	<button v-on:click="sub">-</button>

</div>

<!-- 1. 引入vue.js -->
<script src="js/vue.js"></script>
<script>

  // 2. 创建vue实例 	const vm = new Vue({}） vm名称随便取
  const vm = new Vue({
    el: '#app',		// 3. 绑定页面id为app的div 在此div区域使用我们vue实例 <div id="app"> 
    data: {
      message: "Hello World Vue",
      inputValue: "",
      count:0
    },
    methods: {
      add() {
        this.count++
      },
      sub() {
        this.count--
      }
    }
  })

</script>
</body>
</html>

例一
```

<div>{{message}}</div>
```

可以看见双大括号里面的内容被data里面message给替换了，这是Vue的声明式渲染，是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统中，并且是响应式的，我们可以打开浏览器的 JavaScript 控制台，输入 vm.message = ‘hello world’ ,可以看见上面显示的内容改变了。

在这里插入图片描述
这是当一个 Vue 实例被创建时，它将 data 属性中的所有的 property 加入到 Vue 的响应式系统中。当这些属性的值在发生改变时，视图也随知产生“响应”，改变为新值。

例二
```

<div>
	输入框内容：{{inputValue}}<br>
	<input v-model="inputValue">
</div>
```
可以看见，在输入框里输入内容，实时的显示在了上面。这是通过Vue一个强大的 v-model 指令，让数据双向绑定在inputValue属性上。
例三
```

<h3>当前计数：{{count}}</h3>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
```
Vue提供了 v-on 指令，来处理事件绑定，类似JavaScript 的 onclick、onchange等事件，但写法比JS更加方便了。这些事件处理的函数都写在Vue实例的 methods 属性里面，直接通过函数名调用即可。

通过上面三个小例子，是不是感觉Vue挺好完，用起来也很方便。这算就是正式入门了，下面我们了解Vue实例的结构是怎样的。

2. Vue的结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

<div id="app">
	<h3>{{message}}</h3>	
</div>

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

  const vm = new Vue({
    el: '#app',
    data: {
      message: "Hello World Vue"
    },
    methods: {}
    
  })

</script>
</body>
</html>

首先我们要使用Vue，第一步就是要导入vue.js，然后在创建一个vue实例
vue实例中 el 属性就是你要绑定页面哪个区域内容，决定之后Vue实例管理哪一个DOM，随之下面data属性，methods属性里内容也就作用在你 el 绑定的元素里
data 属性就是需要用到的一些数据都放在这，实例对应的数据对象，通过上面几个例子大家也应该有所了解了
methods 定义属于Vue的一些方法，在哪个地方被调用，在哪些指令中使用。大家可以把它理解成JS中的方法
其实Vue实例中还有很多的属性如计算属性 computed: {}、组件 components: {}、钩子 created:{} 等等，这些等我们后面遇到了在细讲，这里大家混个眼熟即可。

3. Vue的生命周期

在这里插入图片描述

上面几张图展示了Vue实例的生命周期，现在不需要立马弄明白所有的东西，随着我们的不断学习和使用，会对它有更深的理解，然后我们在回过头来看看这几张图。

创作不易，点个赞吧

Jeremy-th

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02. Vue.js 基础---Hello World

哪里有写的不好、写错的地方，欢迎大家给我纠正，给我留言，给我私信。目录1. Hello World2. Vue的结构3. Vue的生命周期1. Hello World下面我们通过几个小例子来体会一下Vue。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&g.
复制链接

扫一扫