Vue入门1：基础语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
  {
  
  {msg}}
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      msg: 'Hello World!'
    }
  })
</script>
</body>
</html>

效果：Hello World!

等同于

var dom = document.getElementById("root") 
dom.innerHTML = "Hello World!"

由此可见Vue更偏向数据的操作，Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM

一、Vue属性

前面用到了new Vue()对象，以及属性el、data，这里简单叙述下

1、el：指令绑定到的元素，这可以用于直接操作 DOM

2、data：用于保存设置的数据或请求的数据

3、method：需要调用的方法，用于处理用户交互、‌数据计算等逻辑

4、template：可以替换一些页面的元素

5、computed：计算属性，可以执行更复杂的逻辑计算

6、watch：监听器，用于在数据更改时调用的侦听回调

7、props：用于组件的传值，接收摆布数据

8、render：渲染器，可以创建虚拟的DOM

二、Vue指令

Vue的指令是一种特殊的属性，以v-为前缀，用于在HTML元素上添加特殊的行为。这些指令允许开发者在Vue应用中动态地绑定数据、处理用户输入、控制元素的显示与隐藏

1、v-text

更新元素的textContent

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{
  
  {msg}}</span>

2、v-html

更新元素的innerHTML，会将msg内容进行转义

<div id="root">
  <h1 v-html="msg"> </h1>
</div>
<script>
  new Vue({
    el: '#root',
    data: {
      msg: "<h1>Hello Vue!</h1>"
    }
  })
</script>

效果：Hello Vue!