前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令

简介：

Vue是：

复制代码

1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动

第一个Vue程序

bash 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>

<body>
    
  <div id="app">
    {{ message }}
    <!-- 双大括号是Vue框架中的插值语法，可以实现Vue对象将自己内部的message填充进入内部数据 -->
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "你好 小黑！"
      }
    })
  </script>
</body>

</html>

el挂载点类似超链接，可以跳转到所控制的字段，#是id选择器，会识别此id

el挂载点：

作用范围 ：

只要是id标记的模块都可以，会给模块内部所有的与data内部同名的属性赋值。

选择器：

复制代码

1.如果是id，就使用id选择器，符号为#。例如el:"#app"
2.如果是class，就使用类选择器，符号为.。例如el:".app"
3.如果是标签本身，就直接使用标签选择器，直接填入标签名。例如el:"div"

可设置的对象 ：

1.只支持双标签不支持单标签

2.不支持body和head标签

data：数据对象

Vue中的数据被封装在data对象中

data可以写复杂类型的数据，例如数组等

Vue指令：

1. v-text指令：

示例：

前两行的"深圳"两字不会被显示，而只有第三行的"深圳"会被显示

2.v-html指令：

输出单纯的文本，则与v-text没有什么区别，但如果内容里的是html文件里面的特定标签，则会按照那个标签的形式输出，例如：

则在网页上输出的结果是：

并且这个链接是可以点进去的

v-on指令：

控制按钮被点下后的行为，如果到时候需要绑定多个行为，则可以以@符号代替v-on:。@右边要写事件，例如点击，双次点击，滑动。然后等号右边对应的就是方法名，这个方法名放在Vue对象的method方法内部

Vue框架不使用Dom操作对象的一个关键原因就是this的出现，通过this可以直接获得本Vue对象中data的数据并进行修改，示例：

v-show：

可以理解为java里面的setVisible()方法，是用来决定是否显示图片的：

v-if：

也是用来控制元素是否显示的：

示例：

v-bind:

这个指令是给变量名设置属性的，例如src,title,class这样的。

复制代码

v-bind不是很有写的价值啊，即使不写v-bind，Vue对象届时也会通过el挂载点找到里面对应的属性并赋值啊？
答：不是这样的，src这样的路径变量，如果不给他设置上v-bind，到时候会把等式右边的内容当作纯文本去识别。所以要想把右边内容当作变量去识别，就必须要带上v-bind。

将v-bind简写成":"

总结：