Vue 框架学习 基本的Vue语法测试

今天学习了Vue的基本使用方法，但是有一点需要说明的是Vue的框架是基于javascripct语言进行集成的。

VUE语法测试

1、测试的前提是我们需要知道Vue代码写在哪里？既然Vue的语言是javascripct集成的，那么它书写的格式与位置在html文件中的位置应该与JavaScript一致。而且在我们以往使用一些基本的java开发框架时，是不是我们的都导入过这个框架的jar包？无论是在web开发还是后来的spring开发。（以下代码就是Vue的引入，我用的是本地文件，大家也可以使用官方提供的源文件网址链接也可以实现Vue的引入）

<!--引入Vue本地文件-->
<script src="/vue/vue.js"></script>

2、接下来我们进行主要的书写格式与语法基础：与JavaScript书写的格式一样，Vue书写的位置在一组<script></script>中，我们可以将Vue语法看成java语言中类似于面向对象编程思想，一个Vue对象的定义域使用，以及其中指向性标签的定义域使用，在css中，我们通常是采用类选择器与id指向性选择。

    <!--基本的容器使用与指向数据-->
    new Vue({
        el: "#root1",
        //对象式data写法
        // data: {
        //     clazz: "计算机科学与技术193班",
        //     url: 'https://www.baidu.com',
        // },
        //函数式data写法，一般都这么写
        data() {
            return {
                clazz: "计算机科学与技术193班",
                url: "https://localhost:8080"
            }
        }
    });

 我们可以先忽略里面具体的代码段，仅仅只看外壳：new Vue({......});相对于java语言的对象的实例化过程而言（如果不提及控制反转ioc），自己new出来一个实例化对象进行使用，一般这个对象的名字就是我们代码段里“ el:"#root1" ”这句代码的作用，就是将这个Vue对象命名为root1，如果想要使用这个Vue对象我们需要理解Vue的主要作用对象是html标签中的哪一类标签（当然是块级标签div，nav等具备区域级划分的标签）。

<div id="root1">
    双向绑定：<input type="text" v-model:value="clazz">{{clazz}}</p>
    单向绑定：<input type="text" v-bind:value="clazz">{{clazz}}
</div>

 注意看这里的div的id是root1那么这里的div参与试用的数据clazz就是Vue对象里的data数据变量集合里的一个元素。

3、那么下面的工作就是我们来测试一些比较常用的脚手架之外的Vue特性的探究与验证：主要是三项测试：Vue语法测试、事件处理测试、条件渲染测试、由变量的false与true决定是否显示资源测试。

（1）Vue语法测试

html块级元素div：

<h1>1.Vue语法测试</h1>
<!--这里的a:href 是Vue自带的语法，可以直接简写（如果采用 a href="{{url}}这种结合js的方式来写"）等同于a v-bind:href="url" -->
<div id="root1"><h1>{{clazz}}</h1><a :href="url">看看百度</a></div>

Vue对象：

 new Vue({
        el: "#root1",
        //对象式data写法
        // data: {
        //     clazz: "计算机科学与技术193班",
        //     url: 'https://www.baidu.com',
        // },
        //函数式data写法，一般都这么写
        data() {
            return {
                clazz: "计算机科学与技术193班",
                url: "https://localhost:8080"
            }
        }
    });

补充：数据绑定测试

html块级元素div(vue对象与上述测试的Vue对象一致): 

<h2>1.1数据绑定测试</h2>
<div id="root1">
    双向绑定：<input type="text" v-model:value="clazz">{{clazz}}</p>
    单向绑定：<input type="text" v-bind:value="clazz">{{clazz}}
</div>

 （2）事件处理测试

html块级元素div:

<h2>1.2事件处理测试</h2>
<div id="root2">
    <!--测试鼠标点击提示：Js技术是采取点击事件发生时的数据传递或者事件响应变化，这里的信息提示最简单的方式-->
    <button v-on:click="run1">点击提示信息</button>
    </p>
    <!--测试键盘键入提示，这里存在一个问题：
        对输入数据的回流检测到数据是否为null从而做出对应的回车事件的变化，
        这个静态的html文件显然做不到这个功能！这里需要进一步的学习Vue的
        数据回流特性与检测数据的方法！-->
    按下回车键提示：<input type="text" @keydown.enter="run1" v-model:value="password">{{password}}
</div>

Vue对象：

new Vue({
        el: "#root2",
        data: {
            password: "",
        },
        methods: {
            run1(info1) {
                //这个console就是一个框架提供的内置对象，log是日志添加事件
                console.log(info1);
                //这个alert就是弹出提示信息！
                alert("兄弟你什么都没输入")
            },
        }
    });

 (3) 条件渲染测试

html块级元素div：

h2>1.3 条件渲染测试</h2>
<!--这里主要测试的内容是随着变量值的变化我们分区域显示我们的功能界面就可以很轻易的做到界面的隐藏与不隐藏，
这也是Vue组件编程的好处，不需要跳转页面就可以实现资源的展示，同时也可以实现数据的响应与交互-->
<div id="root3">
    <button v-on:click="n++">点击n自加</button>
    {{n}}
    <button v-on:click="n--">点击n自减</button>
    {{n}}
    <div v-if="n==0">
        <h4>现在n=0</h4>
    </div>
    <div v-if="n==1">
        <h4>现在n=1</h4>
    </div>
    <div v-if="n==2">
        <h4>现在n=2</h4>
    </div>
</div>

Vue对象：

 new Vue({
        el: "#root3",
        data: {
            n: 0,
        }
    });

 （4）由变量的false与true决定是否显示资源测试（对组件的显示进行控制，其实在页面里是实现的覆盖与隐藏，可以由变量进行控制，但是这种方式存在很大的冗余）

html块级元素div:

<h3>1.3拓展：由变量的false与true决定是否显示资源</h3>
<div id="root4">
    <!--这里的利用点击事件来让同一个变量改变不同值来确定相应页面的显示与不显示
    随着页面的大量投入呢？是不是这个变量的变化范围就要变大？所以采用V-model的方式是不是会好一些？-->
    <button v-on:click="n=true">点我显示表格</button>
    <button v-on:click="n=false">点我切换登录</button>
    <button v-on:click="n=null">点我查看图片</button>
    <div v-if="n==true">
        <Teable1></Teable1>
    </div>
    <div v-if="n==false">
        <login></login>
    </div>
    <div v-if="n==null">
        <img1></img1>
    </div>
</div>

 Vue对象：

  /*定义组件*/
    const Teable1 = Vue.extend({
        template: "<table class=\"table\">\n" +
            "  <caption>基本的表格布局</caption>\n" +
            "  <thead>\n" +
            "    <tr>\n" +
            "      <th>名称</th>\n" +
            "      <th>城市</th>\n" +
            "    </tr>\n" +
            "  </thead>\n" +
            "  <tbody>\n" +
            "    <tr>\n" +
            "      <td>Tanmay</td>\n" +
            "      <td>Bangalore</td>\n" +
            "    </tr>\n" +
            "    <tr>\n" +
            "      <td>{{name}}</td>\n" +
            "      <td>Mumbai</td>\n" +
            "    </tr>\n" +
            "  </tbody>\n" +
            "</table>",
        /*
        *这里需要注意采用对象式data时这个name数据不会被读到。原理可能与对象的生命周期类似，
        *这个Vue是js集成的框架，js技术也带有一定的java性质
        *对于实例的生命周期也会有一定的要求
         */
        data() {
            /*这里的数据绑定的方式可以在这个模板被加载的时候实现数据的获取，
            这个是同步的，那么如果需要嵌套后端数据的话是不是就是异步的数据交互？
            会不会产生类似数据延迟现象的出现？*/
            return {
                name: "beijing",
            }
        }
    });
    const login = Vue.extend({
        template: ' <form  action="/index" method="post">\n' +
            '            <div>用户编号：<input type="text" name="userId"></div>\n' +
            '            <div>用户密码：<input type="password" name="password"></div>\n' +
            '            <div>\n' +
            '                <button type="submit">登录</button>\n' +
            '                <button><a href="/addU">注册</a> </button>\n' +
            '            </div>\n' +
            '            <div>\n' +
            '                <button><a href="/loginM">登录管理员账户</a></button>\n' +
            '                <button><a href="/updateU">忘记用户密码？</a> </button>\n' +
            '            </div>\n' +
            '        </form>\n',
    });
    /*组件的定义即是给模板库增加元件*/
    const img1 = Vue.extend({
        template: "<img src='../static/img/hist.jpg'/>",
    });

测试结果图：