1-1. Vue.js中心学问之实例简介

2024年3月20日 174次阅读 来源: 小磊哥er

Vue.js是什么

Vue.js是一套用于构建用户界面的渐进式框架。Vue.js的中心库只关注视图层，易于上手，便于与第三方库或既有项目整合。Vue.js与现代化的东西链以及种种支撑类库连系运用时，能够为庞杂的单页运用供应驱动。

运用预备

建立一个demo.html文件，并引入vue.js

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
最先进修运用vue.js了
</body>
</html>

模板衬着

Vue.js 的中心是一个许可采纳简约的模板语法来声明式地将数据衬着进 DOM 的体系：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 {{ message }}
</div>
<srcipt>
 var app = new Vue({
  el: '#app',
  data: {
   message: 'Hello Vue!'
  }
 })
</srcipt>
</body>
</html>

表单绑定

我们能够用 v-model 指令在表单 <input> 及 <textarea> 元素上建立双向数据绑定。它会依据控件范例自动拔取准确的方法来更新元素。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <!-- 你输入到input框中的内容会及时显现到p标签中 -->
 <input v-model="message">
 <p>你输入的内容是: {{ message }}</p>
</div>
<srcipt>
 var app = new Vue({
   el: '#app',
   data: {
     message: ''
   }
 })
</srcipt>
</body>
</html>

事宜处置惩罚

Vue中能够用 v-on 指令监听 DOM 事宜，并在触发时运转一些 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('嗨')">弹出'嗨'</button>
</div>
<script>
 new Vue({
  el: 'app',
  methods: {
   say: function (message) {
    alert(message)
   }
  }
 })
</script>
</body>
</html>

组件化

组件 (Component) 是 Vue.js 最壮大的功用之一。组件能够扩大 HTML 元素，封装可重用的代码。

<!--全局注册-->
<template>
 <div id="app">
   <my-component></my-component>
 </div>
</template>

<script>
 // 全局注册组件
 Vue.component('my-component', {
   template: '<div>我的组件</div>'
 })

 // 建立根实例
 new Vue({
   el: '#app'
 })
</script>

<!--衬着后的HTML-->
<div id="app">
 <div>我的组件</div>
</div>

总结

本节进修 vue.js 的中心知识点莫过于模板衬着、表单绑定、事宜处置惩罚、组件化这几点了，下面我们针对每个知识点细细进修。

    原文作者：小磊哥er
    原文地址: https://segmentfault.com/a/1190000019413720
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞