文档

前端

Vue.js基础

学习Vue.js

安装Vue.js

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

el 挂载点

vue实例作用范围 el选中的元素及其内部的子元素
vue 有 id class tag选择器实际建议 id选择器

data数据对象

数据定义在data对象中
data可以写复杂类型的数据
渲染复杂数据对象遵守js语法

v-text 指令

作用:设置标签的内容(设置时会替换标签中所有文本)
使用差值表达式{{}} 替换指定内容

v-html 指令

作用 :设置元素的innerHtml( 将内容中的html文本解析为html)
内容中存在html结构会被解析为html

v-on 指令

    <div id="app-on">
        <button v-on:click="clickit">点击事件</button>
        <button @click="clickit">点击事件(简写)</button>
        <button v-on:mouseenter="mouseenter">鼠标移入事件</button>
        <button v-on:dblclick="doubleClick">鼠标双击事件</button>
    </div>

    var app = new Vue({
        el:"#app-on",
        methods:{
            clickit:function(){
                console.log("点击事件");
            },
            mouseenter:function(){
                console.log("鼠标移入事件");
            },
            doubleClick:function(){
                console.log("鼠标双击事件");
            }
        }
    })

作用:为元素绑定事件
指令可以简写 v-on: = @
事件名不需要写on

案例计数器

    <div id="num">
        <button @click="remove">-</button>
        <span>{{number}}</span>
        <button @click="add">+</button>
    </div>

    var app = new Vue({
        el: "#num",
        data: {
            number: 1
        },
        methods: {
            remove: function () {
                this.number <= 0 ? console.log("最小了") : this.number--
            },
            add: function () {
                this.number >= 10 ? console.log("最大了") : this.number++
            }
        }
    })

v-show 指令

    <div id="show">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1590621146,4288392830&fm=26&gp=0.jpg" alt="" v-show="isShow">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605360679510&di=7d0146ef88d75ae1648a0e20cf3e82f2&imgtype=0&src=http%3A%2F%2Fwow.tgbus.com%2FUploadFiles_2396%2F201205%2F2012050222252283.jpg" alt="妹子" v-show="age>18">
        <button @click="changeAge">我已经20了</button>
        <button @click="changeShow">测试显示</button>
    </div>

 var app = new Vue({
        el:"#show",
        data:{
            isShow:false,
            age:18
        },
        methods:{
            changeAge:function(){
                this.age=20
            },changeShow:function(){
                this.isShow=true
            }
        }
    })

作用:根据真假切换元素显示状态
原理修改元素的dispaly
指令后的内容最终会解析为boolean值

v-if 指令

    <div id="fi">
        <p v-if="isShow">I'm SuperMan</p>
        <p v-if="age>18">I'm SuperMan</p>
        <button @click="changeShow">点击显示</button>
    </div>

    var app = new Vue({
        el:"#fi",
        data:{
            isShow:false,
            age:16
        },
        methods:{
            changeShow:function(){
                this.isShow=true
                this.age=20
            }
        }
    })

作用根据元素的真假切换显示状态

本质是操作元素的dom来切换显示状态

表达式为true 元素存在dom中表达式为false 从dom中移除

v-bind 指令

    <div id="binds">
        <img v-bind:src="imgSrc" alt="">
        <span :class="isActive?'active':''">测试(v-bind简写为:)</span>
        <span :class="{active:isActive}">测试(三目运算符简写)</span>
        <button @click="changeSrc">切换图片源</button>
    </div>

    var app =new Vue({
        el:"#binds",
        data:{
            imgSrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3012731007,141163027&fm=26&gp=0.jpg",
            isActive:false
        },
        methods:{
            changeSrc:function(){
                this.imgSrc="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1921071081,1860041636&fm=26&gp=0.jpg"
                this.isActive=true
            }
        }
    })

作用为元素绑定属性
完整写法 v-bind:元素名
简写写法省略v-bind 直接写:元素名

实例相册


<!DOCTYPE html>

<head>
    <title>相册</title>
    <style>
        #content {
            width: 920px;
            height: 520px;
            /* border: 1px solid #333333; */
            margin: 0 auto;
        }

        img {
            width: 900px;
            height: 500px;
            border: 1px solid #686868;
            border-radius: 5px;
        }

        button {
            width: 100px;
            height: 30px;
            background-color: #ffffff00;
            border: 1px solid #333;
            border-radius: 3px;
        }

        #control {
            width: 230px;
            height: 40px;
            margin: 0 auto;
        }
    </style>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="content">
        <span>{{ msg }}</span>
        <img :src="list[index].src" :alt="list[index].alt">
        <div id="control">
            <button @click="last">上一张</button>
            <button @click="next">下一张</button>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#content",
        data: {
            list: [
                { alt: "妹子1", src: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1189783510,191538863&fm=15&gp=0.jpg" },
                { alt: "妹子2", src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605364623290&di=ff4515c981476d0f1278639171e6faac&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007ygn1Cgy1gkhnjidbkfj30p00dwq3u.jpg" },
                { alt: "妹子3", src: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1367745256,4242790065&fm=15&gp=0.jpg" },
                { alt: "妹子4", src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605364623288&di=cd7a3ddd627ae1ded339ead41e98e87f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181211%2F3f62cb4470df451b84063a65b655beb8.jpeg" },
                { alt: "妹子5", src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605364623271&di=8084402cb17b91962a89ca815e07b6da&imgtype=0&src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F05%2F09%2FFgy3iR8pwawQMlOwoWdGDVRCxX2R.jpg" },
                { alt: "妹子6", src: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2732596737,971132492&fm=11&gp=0.jpg" },
                { alt: "妹子7", src: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605364623316&di=8f73fc0fe6889d2408021f9f471e44ed&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2018%2F0530%2FAC913325E70B16FE315DA73DD1FC772A17BCBEF1B_size99_w900_h500.jpeg" },
                { alt: "妹子8", src: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3584458244,671365264&fm=26&gp=0.jpg" },
            ],
            index: 0,
            msg: '-'
        },
        methods: {
            last: function () {
                this.index <= 0 ? this.msg = "前面已经没有妹子了" : this.index--
                this.index <= 0 ? this.msg = "前面已经没有妹子了" : this.msg = ""
            }, next: function () {
                this.index >= this.list.length - 1 ? this.msg = "后面已经没有妹子了" : this.index++
                this.index >= this.list.length - 1 ? this.msg = "后面已经没有妹子了" : this.msg = ""
            }
        }
    })
</script>

</html>

v-for

<div id="rof">
    <ul>
        <li v-for="item in array">
            hello {{item}}
        </li>
    </ul>
    <ul>
        <li v-for="(item,index) in array">
            {{index}} .hello {{item}}
        </li>
    </ul>
</div>

var app = new Vue({
    el:"#rof",
    data:{
        array:[1,2,3,4,5,6,7,8,9]
    }
})

作用: 根据数据生成列表结构
数组经常跟v-for使用
语法 (item,index) in data

v-on 补充

传参事件修饰符

    <div id="ontest">
        <button @click="test('123','456')">传参按钮</button>
        <input type="text" @keyup.enter="funEnter" />
    </div>

    var app = new Vue({
        el: '#ontest',
        methods: {
            test: function (p1, p2) {
                console.log(p1 + p2)
            },
            funEnter: function () {
                alert("输入完成")
            }
        }
    })

v-model 指令

    <div id="app" >
        <button @click="setM">修改</button>
        <input type="text" v-model="msg" @keyup.enter="getM"/>
        <span>{{msg}}</span>
    </div>

    var app = new Vue({
        el: '#app',
        data:{
            msg:'hello'
        },methods:{
            getM:function(){
                alert(this.msg)
            },
            setM:function(){
                this.msg="ojbk"
            }
        }
    })

便捷的设置/获取表单元素的值绑定的数据会跟表单的值相关连

记事本

<!DOCTYPE html>

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

<body>
    <div id="app" >
        <input type="text" v-model="tagert" @keyup.enter="addItem"/>
        <ul>
            <li v-for="(item,index) in targetList"  >
                {{item}} <button @click="remove(index)" >del</button>
            </li>
        </ul>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            tagert:'',
            targetList:["demo1","demo2"]
        },methods:{
            addItem:function(){
                this.targetList.push(this.tagert)
            },
            remove:function(index){
                this.targetList.splice(index,1)
            }
        }
    })
</script>

</html>

Thymeleaf 原生 Javascript实现 Ajax