Vue学习第二天|柠零的博客中心

第一节：小型案例分析

起初创立这个文件和任何html模板没有任何区别

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
      
  </body>
</html>

案例搭建步骤：

引入vue.js文件，编写全局配置
准备一个容器
书写有关vue的代码，在全局配置之后
- 创建一个Vue实例，并传入参数

步骤一：引入vue.js文件，编写全局配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <title>你好啊！</title>
        <!-- 引入vue.js文件 -->
        <script type="text/javascript" src="../JS/vue.js"></script>
  </head>
  <body>
        <script type="text/javascript">
            Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
        </script>
  </body>
</html>

步骤二：准备容器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <title>你好啊！</title>
        <!-- 引入vue.js文件 -->
        <script type="text/javascript" src="../JS/vue.js"></script>
  </head>
  <body>
        <div>
            <h1>你好，柠</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
        </script>
  </body>
</html>

步骤三：在全局配置之后书写有关vue的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <title>你好啊！</title>
        <!-- 引入vue.js文件 -->
        <script type="text/javascript" src="../JS/vue.js"></script>
  </head>
  <body>
        <div>
            <h1 id="root">你好，柠</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
            new Vue({
              el:"#root"
              //el为element的简写，后面的#root是CSS的id选择器
              //或者写成如下：el:document.getElementById('root') 这里亲自找到元素给它配置到el中
            })
        </script>
  </body>
</html>

new Vue()：创建一个Vue实例，传入的参数：一个配置对象

如果没有实例之中的el，那么实例和容器将互不可见

el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串

变化的实例交给Vue保管（感觉有点像Spring的控制反转IOC）

最终的状态：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>你好啊！</title>
        <!-- 引入vue.js文件 -->
        <script type="text/javascript" src="../JS/vue.js"></script>
    </head>
    <body>
        <div>
            <h1 id="root">你好,{{name}}</h1>
            <!-- 注意：这两个花括号的作用仅是分隔符，不代表对象 -->
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
            new Vue({
                el:"#root",
                data:{
                    name:"柠"
                }
            })
        </script>
    </body>
</html>

配置对象当中的data，将在容器中进行搜索，然后查看哪里使用到了name，就将name赋值到那个位置

当前显示的是：你好，柠

当把name后面的改变之后，显示的内容也会发生对应改变

小提示：一个实例仅能对应一个容器，一对多和多对一是不被允许的，多出来的那个无法被渲染到页面上

在两个花括号中，存放的不仅仅可以是实例中定义的变量，也可以是JS当中的表达式

例子：Hello, my name is {{name}},现在时间是{{Date.now()}}, 人都有{{1+1}}只手

JS表达式和JS语句的区别：表达式能得到返回值，而语句不行（例子：Date.now()为表达式，而for/if就不是表达式）

总结：

想让vue工作，就必须创建一个vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
root容器里的代码被称为vue模板
容器的作用，为Vue提供模板，让Vue的工作成果知道往哪里放
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data当中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

第二节模板语法

模板语法分为插值语法和指令语法

插值语法就像上面表达的一样，就是在两层花括号里面填上实例中定义的变量，JS表达式等等

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>你好啊！</title>
        <script type="text/javascript" src="../JS/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr/>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;
            new Vue({
                el:"#root",
                data:{
                    name:"柠",
                }
            })
        </script>
    </body>
</html>

而指令语法往往作用于标签属性，如下代码的v-bind使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>你好啊！</title>

        <script type="text/javascript" src="../JS/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>指令语法</h1>
            <a v-bind:href="url">点击前往百度</a>
            <a v-bind:href="ClassName.url">点击前往CSDN</a>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip=false;
            new Vue({
                el:"#root",
                data:{
                    url:"https://baidu.com",
                    ClassName:{
                      url:"https://www.csdn.net"
                    }
                }
            })
        </script>
    </body>
</html>

vue里面的指令，v-开头，指令语法里面放上的是v-bind，加上v-bind之后，vue会将href后面的字符串取出当JS表达式进行使用

v-bind可以将标签里的任何一个标签属性动态的绑定值

其中，v-bind:可以简写为:,没错，就是一个冒号，当然，仅有v-bind:可以这样使用

总结：

Vue模板语法：插值语法和指令语法两大类

1，插值语法：

功能：用于解析标签体内容

用法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性

2，指令语法：

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件...）

举例：v-bind:href="xxx"或简写为：:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性

注：Vue中有很多的指令，且形式都为v-???