一.`Vue`基本概念

1.1 什么是`Vue`

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

渐进式 : 简单理解就是先学核心，后面可根据需求再慢慢进行功能与插件的学习增强。
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API - - - 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。

1.2 `Vue`的特点

轻量:Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定:对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令:内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化:Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化:组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1.3 `Vue`历史

Vue是比较新的技术，版本 1.0 是在 2014 年发布的, Vue作者是前Google 的员工尤雨溪, 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。 Vue对比其他框架 : cn.vuejs.org/v2/guide/co…

二.`Hello,Vue`

注 : 代码开始前需要先引入vue在当前项目。创建项目与引入vue的请参考 JAVA程序员学Vue系列之一 - 前端发展&npm安装

引入vue的js文件
准备被挂载的元素
js完成挂载功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--①.引入vue的框架代码：有vue的功能支持-->
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--②.准备一个div元素，用于和vue产生关系-->
    <div id="app">
        {{msg}}
    </div>

    <!--③.完成代码,让vue与与准备好的元素产生关系 -->
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
              msg:"年轻人不讲武德"
            }
        })
    </script>

</body>
</html>

三.`Vue`三大属性

3.1 `el`:指定挂载元素

el是用于挂载指定的dom节点
挂载可以使用id,class,标签
- 不管使用哪些方式，都只能挂载一个
- 建议使用id进行挂载、
只要挂载成功的元素，才能使用vue的功能(表达式等)

3.2 `data`：数据

data是准备好的数据
获取数据有两种方式
- 直接在js中获取/设计
- 在表达式中来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}  === {{sex}} <br>
    {{employee}} ===  {{employee.name}}=== {{employee.age}} <br>
    {{hobbys}} === {{hobbys[0]}}
</div>


<script>
    var vue = new Vue({
        el:"#app",
        //data:代表相应的数据
        data:{
            msg:"我是个东西",
            sex:true,
            employee:{
                name:"张扬",
                age:18
            },
            hobbys:["打篮球","写代码","看别写代码"]
        }
    })

    alert(0);
    //当数据发生变化后,表达式中的数据也会同时变化
    // vue.msg = "我其实不是个东西";
    vue.msg = "haha"

</script>
</body>
</html>

3.3 `methods`:方法属性

指的是咱们的方法元素

调用方法可以在js中直接调用，也可以在挂载元素中通过表达式调用
可以直接使用this获取到data中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!--调用方式一：在挂载元素中调用-->
        {{hello01()}} --  {{hello02()}}
    </div>


    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
                name:"年轻人",
                age:"45",
                msg:"耗汁尾汁"
            },
            //准备相应的方法
            methods:{
                hello01(){
                    return "你好！";
                },
                hello02(){
                    return "好个催子";
                },
                hello03(){
                    //可以直接通过this拿到data中的值
                    alert(this.name+"  "+this.msg);
                },
            }
        })

        // 调用方式二:在js代码中中调用
        vue.hello03();
    </script>
</body>

四.`Vue`表达式

Vue的表达式中写代码和js是一样的

4.1 基本四则混合运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!--表达式中可以做相应的运算-->
        {{num1}}+{{num2}}={{num1+num2}} <br />
        {{num1}}-{{num2}}={{num1-num2}} <br />
        {{num1}}*{{num2}}={{num1*num2}} <br />
        {{num1}}/{{num2}}={{num1/num2}}
    </div>

    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
                num1:20,
                num2:10,
            },
        })
    </script>

</body>

4.2 三目运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!-- JS中:null,"",NaN,undefined,0,false代表假 -->
        {{sex?"男":"女"}}
    </div>

    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
               sex:true
            },
        })
    </script>

</body>

4.3 字符串,对象,数组都可以直接操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!--拿到字符串属性-->
        {{msg.length}}
        <!--执行字符串方法-->
        {{msg.toUpperCase()}} <br />
        {{msg.substring(2,3)}} <br />
        <!--拿到对象属性值-->
        {{employee.name}}=={{employee.age}}<br />
        <!--拿到数组值-->
        {{hobbys[0]}}=={{hobbys[1]}}=={{hobbys[2]}}
    </div>

    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
               msg:"itsource",
               employee:{
                   name:"年轻人",
                   age:34
               },
                hobbys:["怼天","怼地","怼空气"]
            }
        })
    </script>

</body>

五.`Vue` 常用指令

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

指令名称	指令作用	备注
v-html	显示与解析HTML代码
v-text	原封不动的展示
v-for	遍历与循环功能	遍历数字，字符串,对象,数组
v-bind	绑定属性	简单形式 :属性名="值"
v-model	双向绑定	只支持input,select,textarea
v-show	显示与隐藏	隐藏只是样式:style="display=none"
v-if	判断	v-if/v-else-if/v-else
v-on	绑定事件	简写 @事件名=方法名()

5.1 `v-text`与`v-html`:展示文本

html会去识别与编译咱们的html标签
text 会把加上的内容原样输出(不会当作html标签进行识别与编译)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">
    <span id="myspan">{{msg}}</span>
    <!--
        使用指令写法来设置数据
        注:指令中获取数据，不需要写表达式{{}}
    -->
    <span v-html="msg"></span>
    <span v-text="msg"></span>
</div>

<!--
    指令:vue设计的一种特殊的标签，v-指令名称
-->
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"<h1>喔为...</h1>"
        }
    })
</script>
</body>
</html>

5.2 `v-if` : 判断

语法：<标签 v-if="条件">...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <span v-if="age<20">年青人，不讲武德</span>
        <span v-else-if="age>=20 && age<60">都是打工人</span>
        <span v-else>老神仙驾到</span>
    </div>

    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
              age:30
            }
        })
    </script>

</body>

5.3 `v-bind` : 绑定属性

bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
bind有一种简写形式 <标签 :属性名="属性值">
如果直接把整个对象进行属性绑定 <标签 v-bind="对象">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <!--原生方式-->
        <img src="img/1.jpg" width="200" height="200" title="真是一张好图">
        <!--绑定方式一:完整写法:单个属性绑定-->
        <img v-bind:src="imgUrl" v-bind:width="width" v-bind:height="height" v-bind:title="title">
        <!--绑定方式二:简写形式:单个属性绑定(直接使用:的话，前面会自动加v-bind)-->
        <img :src="imgUrl":width="width" :height="height" :title="title">
        <!--绑定方式三:直接对象绑定-->
        <img v-bind="imgattr">

    </div>

    <script type="text/javascript">
        let vue = new Vue({
            el:"#app",
            data:{
                imgUrl:"img/1.jpg",
                width:200,
                height:200,
                title:"真是一张好图",
                imgattr:{
                    src:"img/1.jpg",
                    width:300,
                    height:300,
                    title:"真是一张好图",
                }
            }
        })
    </script>

</body>

5.4 `v-for` : 遍历功能

遍历咱们的数据(数字,字符串,对象,集合)
数字就是普通的循环 for(var i=1;i<=数字;i++)
字符串是拿到每一个字母
对象循环 <span v-for="(v,k,i) in 对象"></span>
- v:代表对象的属性值
- k:代表对象的属性名
- i:代表索引
数组循环 <span v-for="(v,i) in 数组"></span>
- v:代表对象的属性值
- i:代表索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">

    <!--遍历数字 for(var i=1;i<=5;i++)-->
    <ul>
        <li v-for="v in num">{{v}}</li>
    </ul>
    <!--遍历字符串:拿到字符串中的每一个值-->
    <ul>
        <li v-for="v in name">{{v}}</li>
    </ul>
    <!--
        遍历对象
            (v) 如果只写一个值,只获取value的值
            (v,k) v:是value的值，k:是key(属性)
            (v,k,i) v:是value的值，k:是key(属性) ,i：索引
    -->
    <ul>
        <li v-for="(v,k,i) in smalltxt">{{k}} - {{v}} -{{i}}</li>
    </ul>

    <!--遍历数组
        (v,i) ： v:当前的数据值  i:当前遍历索引
    -->
    <ul>
        <li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
    </ul>
</div>

<script>

    /**
     * v-for:进行相应的循环(数字,字符串,对象,数组)
     */
    new Vue({
        el:"#app",
        data:{
            num:5,
            name:"zhang",
            smalltxt:{
                name:"斗罗大罗",
                author:"杨哥",
                sn:"34325Nfe"
            },
            hobbys:["吃饭","睡觉","打豆豆","垃圾"]
        }
    })

</script>

</body>
</html>

5.5 `v-on` : 事件绑定

事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">

    <!--
        这里的方法加不加括号都可以执行
        v-on:事件名="方法名()"
        @事件名="方法名()"
    -->
    <button v-on:click="say()">点我有惊喜...</button>

    <button @click="hello('风语咒')">再点我啊！！！</button>

    <button @click="age++">{{age}}</button>

</div>

<script>

    var vue = new Vue({
        el: "#app",
        data: {
            name:"小明",
            age:12
        },
        methods:{
            say(){
                alert("点啊，你个瓜娃子！")
            },
            hello(msg){
                console.debug(this.name+"出来看:"+msg);
            }
        }
    })
</script>
</body>
</html>

5.6 `v-show` : 显示与隐藏

show只是隐藏标签,它只是修改元素的样式 display="block/none"

v-show用于展示和隐藏 <标签 v-show="true/false">
案例效果 : 最后的效果是有一个按钮，点一下显示图片，再点一下隐藏图片

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">

    <button onclick="showyishow()" >点我啊</button> <br />
    <!--
        v-show:true(显示)/fales(不显示)
            注:不显示（style="display: none;"）
    -->
    <img src="imgs/1.jpg" v-show="isShow" />

</div>

<script>

    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    var vue = new Vue({
        el: "#app",
        data: {
            isShow:false
        }
    })
    
    function showyishow() {
        vue.isShow = !vue.isShow;
    }

</script>

</body>
</html>

5.7 `v-model` ：双向绑定

学习v-model之前，需要先学习分析 mvvm模式

主要是用于完成双向的绑定
只能用于:input,select,textarea

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vuejs/vue.js"></script>
</head>
<body>

<div id="app">

    名称:<input type="text" v-model="inputVal"> <br>
    {{inputVal}}
    <hr>
        爱好:
        <input v-model="checkboxVal" value="1" type="checkbox">看电影
        <input v-model="checkboxVal" value="2" type="checkbox">看小说
        <input v-model="checkboxVal" value="3" type="checkbox">看漫画
        <input v-model="checkboxVal" value="4" type="checkbox">垃圾
        <br>
        {{checkboxVal}}
    <hr>
        性别:
        <input v-model="radioVal" value="1" type="radio">男
        <input v-model="radioVal" value="2" type="radio">女
        <input v-model="radioVal" value="3" type="radio">叨客
        <br>
        {{radioVal}}
    <hr>
        <select v-model="selectVal">
            <option value="1">中国</option>
            <option value="2">日本</option>
            <option value="3">美国</option>
        </select>
        <br>
        {{selectVal}}
    <hr>
        <textarea v-model="textareaVal"></textarea>
        <br>
        {{textareaVal}}
</div>

<script>

    /**
     * v-model:只能在表单标签中使用(input,select,textarea)
     */
    new Vue({
        el: "#app",
        data: {
            inputVal:"我是杨杨我怕谁!",
            checkboxVal:["1","3"],
            radioVal:2,
            selectVal:2,
            textareaVal:"sdfsfd"
        }
    })

</script>

</body>
</html>

JAVA程序员学Vue系列之三 - Vue入门

一.Vue基本概念

1.1 什么是Vue

1.2 Vue的特点

1.3 Vue历史

二.Hello,Vue

三.Vue三大属性

3.1 el:指定挂载元素

3.2 data：数据

3.3 methods:方法属性

四.Vue表达式

4.1 基本四则混合运算

4.2 三目运算符

4.3 字符串,对象,数组都可以直接操作

五.Vue 常用指令

5.1 v-text与v-html:展示文本

5.2 v-if : 判断

5.3 v-bind : 绑定属性

5.4 v-for : 遍历功能

5.5 v-on : 事件绑定

5.6 v-show : 显示与隐藏

5.7 v-model ：双向绑定

一.`Vue`基本概念

1.1 什么是`Vue`

1.2 `Vue`的特点

1.3 `Vue`历史

二.`Hello,Vue`

三.`Vue`三大属性

3.1 `el`:指定挂载元素

3.2 `data`：数据

3.3 `methods`:方法属性

四.`Vue`表达式

五.`Vue` 常用指令

5.1 `v-text`与`v-html`:展示文本

5.2 `v-if` : 判断

5.3 `v-bind` : 绑定属性

5.4 `v-for` : 遍历功能

5.5 `v-on` : 事件绑定

5.6 `v-show` : 显示与隐藏

5.7 `v-model` ：双向绑定