Vue.js学习(二)

本篇仅为博主学习记录,无详细讲解,但结构注释都已给出;如果有兴趣可以尝试自己修改观察其变化。
1.项目结构
Vue学习(二).png

firstVue.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>My first Vue</title>
    <%--使用cdn方式加载vue.js--%>
   <%-- <script src="https://cdn.jsdelivr.net/npm/vue"></script>--%>
    <script src="../Plugin/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../Css/firstCss.css" />
</head>
<body>
<%--todo 例一--%>
<p ><strong>vue.js入门测试,使用“{{}}”传值及“v-on”绑定事件</strong></p>
    <div id = "welcome">
        <p>{{hello}}</p>
        <p>{{first}}</p>
        <input type="button" v-on:click = "functionTest" value="点我试试" > <%--使用v-on监听事件,可简写为“:”--%>

        <%--vue.js还提供了完全的 JavaScript 表达式支持。--%>
        <p>{{hello.split('').reverse().join('')}}</p>
        <p>{{5+5}}</p>
        <a v-bind:href = "baidu">点击跳转百度</a> <%--使用v-bind绑定元素进行跳转--%>
    </div>

<%--todo 例二--%>
<p ><strong>使用v-model绑定数据和v-html解析html文本与v-bind的使用</strong></p>
    <div id = "propertyTest">
        <input type="text" v-model="String" placeholder="输入试试"><br> <%--使用v-model绑定数据--%>
        <span>观察这里:{{String}}</span><br>    <%--这里将显示v-model的作用--%>
        <p v-html="htmlText"></p> <%--使用v-html解析html格式的文本--%>

        <div v-bind:class = "{'useCss': use}">     <%--使用v-bind函数判断是否绑定useCss,可简写为“@”--%>
            <input type="button" v-on:click = "bind" value= "点击变色" v-bind:class = "{'center':use}"/>
        </div>
    </div>

<%--todo 例三--%>
<p ><strong>选择语句的使用</strong></p>
<div id = "choose">
    <input type="text" placeholder="输入数字1,2" v-model = "num">
    <p v-if = "!num">我负责获取输入</p>             <%--输入为空显示--%>
    <p v-else = "num != null">{{num}}</p>           <%--输入不为空时显示输入数字--%>
    <p v-if = "1 == num">你输入的是1</p>            <%--输入为1,显示--%>
    <p v-else-if = "2 == num">你输入的是2</p>       <%--输入为2,显示--%>
    <p v-else >其他操作这里显示</p>                 <%--输入其他,显示--%>
</div>

<%--todo 例四--%>
<p ><strong>vue.js数组的基本操作</strong></p>
    <div id = "arrTest">
        <ol>
            <li v-for = "s in arr">     <%--遍历数组--%>
                {{s}}
            </li>
        </ol>
        <input type="button" value="在最后位置添加" v-on:click = "push">   <br>
        <input type="button" value="删除最后一个元素" v-on:click = "pop">  <br>
        <input type="button" value="删除第一个元素" v-on:click = "shift">  <br>
        <input type="button" value="添加首元素" v-on:click = "unshift">  <br>
        <label for = "index">数组下标</label><input v-model = "index" id = "index"> <br>
        <label for = "howmany">删除个数</label><input v-model = "howmany" id = "howmany"> <br>
        <label for = "string">插入字符串</label><input v-model = "string" id = "string"> <br>
        <input type="button" v-on:click = "splice" value="执行操作">
        <ul>
            <li v-for = "(value,key) in map">   <%--键值对遍历--%>
                {{key}}:{{value}}
            </li>
        </ul>
    </div>

<%--todo 例五--%>
<p ><strong>vue.js过滤器的基本使用</strong></p>
<div id = "fliter">
    <input v-model = "url" placeholder="输入跳转地址">
    <a  v-bind:href="url | action">点击跳转</a>
    <p>{{url | action}}</p>
</div>
<%--过滤器
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器可以串联:

{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
--%>

<div id = "test1">
    <p>{{test}}</p>
</div>

<%--使用相对路径引用js文件--%>
<script src="../Js/firstJs.js"></script>
</body>
</html>

firstJs.js

/*todo 例一*/
var welcome = new Vue({
    el: '#welcome',
    data: {
        hello: 'Hello Vue.js!',
        first: 'My first Vue.js!',
        baidu:'https://www.baidu.com'
    },
    methods:{
        functionTest:function () {
          alert("Welcome")
        },
    },
})
/*这里获取的数据互不影响*/
/*var data = document.getElementById("welcome")
data.hello = "test"
document.write(data.hello)      //test
document.write("<br>")
document.write(welcome.hello)   //Hello Vue.js!
*/

/*todo 例二*/
var data = {String: "",test1:"test1",test2:"test2",htmlText:" <p>v-html测试</p><br>",use:false}
var propertyTest = new Vue({
    el: '#propertyTest',
    data:data,
    methods:{
        bind:function () {
            data.use = !data.use    //每次点击改变use的值
           /* alert(data.use)*/
            return data.use         //返回use的值
        }
    }
})
/*这里获取的数据会相互影响,因为使用的同一个数据源*/
/*
data.test1 = "change1"
document.write(propertyTest.test1)     //change1
document.write("<br>")
propertyTest.test2 = "change2"
document.write(data.test2)             //change2
*/
/*Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。*/
/*
document.write(propertyTest.el == document.getElementById("propertyTest"))   //false
document.write("<br>")
document.write(propertyTest.$el == document.getElementById("propertyTest"))  //true
*/

/*todo 例三*/
var choose = new Vue({
    el: "#choose",
    data:{
        num: "",
    }
})

/*todo 例四*/
var end = 5
var start = 0
var arrTest = new Vue({
    el: "#arrTest",
    data: {
        arr:[
            "arr1",
            "arr2",
            "arr3",
            "arr4"
        ],
        map:{
            key1:"value1",
            key2:"value2",
            key3:"value3",
            key4:"value4",
        },
        index:"",
        howmany:"",
        string:""
    },
    methods:{
        push:function () {
            arrTest.$data.arr.push("arr"+end)
            end ++
        },
        pop:function () {
            arrTest.$data.arr.pop()
            end --;
        },
        shift:function () {
            arrTest.$data.arr.shift("arr"+start)
            start ++
        },
        unshift:function () {
                arrTest.$data.arr.unshift("arr"+start)
                start --
        },
        splice:function () {
           /* alert(arrTest.$data.index)
            alert(arrTest.$data.howmany)
            alert(arrTest.$data.string)*/
            var index = arrTest.$data.index
            var howmany = arrTest.$data.howmany
            var string = arrTest.$data.string
            if(index && howmany){
                if(string)
                    arrTest.$data.arr.splice(index,howmany,string)  //如果字符串不为空,就插入,防止空字符串
                else
                    arrTest.$data.arr.splice(index,howmany) //否则不插入,直接删除
            }
        }
    }
})

/*todo 例五*/
/*var fliter = */new Vue({
    el: "#fliter",
    data:{
        url:""
    },
    filters:{
        action:function (url) {
            if(!url){           //没有输入时不跳转
                return '#'
            }
            url = url.toString()
            return "http://www."+url+".com" //有输入时进行跳转
        }
    }
})

new Vue({
    el: "#test1",
    data: {
        test: "testMessage"
    }
});

firstCss.css

.useCss{
    width: 500px;
    height: 400px;
    background: aqua;
}
Last modification:April 9th, 2019 at 10:48 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment