Vue的命令

Vue
简单的DOM+发送请求+路由选择

分成三个步骤：

1. 引包
开发环境版本，包含了有帮助的命令行警告，比较适合新手
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

2.创建vue对象，然后设置el目的源，以及data数据
3.模板渲染，将数据绑定在组件中

其实我们可以把html当作入口，在vue上进行操作，结果响应在绑定的dom元素上。

Vue:
el属性：是确定数据挂在哪个元素上
1.作用范围：元素内部以及后代元素的内部
2.最好使用id选择器：因为在实际开发中，id是唯一的；而标签选择器和类选择器一般都是不唯一的
3.元素不能选择html标签和body标签

data属性：它是一个数据对象
1.数据在js中有基本类型还有引用类型
2.如果是引用类型：
对象，访问对象中的属性用点
数组，访问数组元素用[]

应用：使用vue中的一些以v开头的指令来制作网页效果，不同于早期的dom操作（获取元素，操作元素）

学习的顺序：
1.内容绑定，事件绑定
2.属性绑定
3.表单元素绑定，列表循环

v-text内容绑定

<div id="app" v-text='msg+"!"'>lala</div>
 /*v-text这里会替换全部文本值，可以用双引号也可以用单引号*/
/*如果是部分替代，用差值表达式*/

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: "huangdanni",
            info: "ok"
        }
    });

</script>

v-html内容绑定

<div id="app">
    <p v-html="msg"></p>
/*设置元素的innerHTML，如果是一个单纯的文本值，与v-text没有什么区别，如果有是一个HTML结构就可以，可以解析出来*/
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: "<a href='#'>我是个标题 </a>"
        }
    });

</script>

v-on事件绑定

如果要获取到data对象中的数据，使用this关键字
如果父级也绑定事件，那么会先触发父级的事件

<div id="app">
    <input type="button" value="点我" @click='doIt'>
    <p v-on:click='beauty'>{{ msg }}</p>
    如果点击就一次，文本框的内容发生改变
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: "我是黄丹妮"
        },
        methods: {
            doIt: function () {
                console.log("我最可爱！");
            },
            beauty: function () {
                this.msg += '我最美!';
            }
        }
    });

</script>

之前在处理事件限制的时候，要进行触发事件的判断，现在是利用事件修饰符

<div id="app">
    <input type="text" @keyup.enter="sayHi('huangdanni')">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            sayHi: function (name) { 形参传递参数
                alert(name + "，你好呀！");
            }
        }
    });

</script>

## v-show显示隐藏

<div id="app">
    <input type="button" @click='change' value='切换图片显示隐藏'>
    <img src="10.png" alt="" v-show='isShow'>/*实际上操作的style里面的display*/
    <img src="10.png" alt="" v-show='age>19'>/*指令后面的值会解析成布尔值，所以可以用判断语句*/
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: true,
            age: 18
        },
        methods: {
            change: function () {
                this.isShow = !this.isShow;
            }
        }
    });

</script>

v-if

代码跟v-show基本没什么区别，都是用来操作标签的显示和隐藏
1.v-if是直接操作dom元素，true从dom树中添加，false从dom树中移除
2.v-show直接操作样式，true为display:block false为display:none
3.如果是经常切换，就使用v-show，因为v-if消耗比较大

v-bind设置属性

在实际开发中，可以操作class的添加和移除从而改变样式

<div id="app">
    <img v-bind:src="imgSrc">
    <br>
    <img :src='imgSrc' :title='imgTitle' :class='imgActive? "active":""'>/*三元表达式*/
    <img :src='imgSrc' :title='imgTitle' :class={active:imgActive}>/*用对象的属性，具体取决后面的值*/
    <input type="button" @click='change' value='切换图片框框'>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc: "10.png",
            imgTitle: "这是一只熊",
            imgActive: false
        },
        methods: {
            change: function () {
                this.imgActive = !this.imgActive;/*这里就是false 和 true转化*/

            }
        }
    });

</script>

可以用v-on v-bind v-if实现轮播图效果：
v-on 绑定事件
v-bind 切换图片路径
v-if 切换左右按钮的显示和隐藏

v-for 列表循环

根据模板以及定义数据的长度来创建列表

<div id="app">
    <h2>一周</h2>
    <ul>
        <li v-for="item in weekday">{{ item }}</li>//根据这个模板创建，其中item 可以改变，也可以跟其他命令一起使用
    </ul>
    <button @click='add'>增加水果</button>
    <button @click='remove'>减少水果</button>
    <p v-for="(it,index) in fruit">{{ index }}-----{{ it.name }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    /*data里面的数据可以是，数组，对象，字符串，数组用的比较多*/
    var app = new Vue({
        el: '#app',
        data: {
            weekday: [
                "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"],
            /*对象数组*/
            fruit: [
                { name: "orange" },
                { name: "apple" },
                { name: "banana" },
                { name: "peach" }
            ]
        },
        methods: {
            /*数组长度变化会同步更新，是响应式的*/
            add: function () {
                this.fruit.push({ name: "watermelon" });

            },
            remove: function () {
                this.fruit.shift();
            }
        }
    });

</script>

v-model

将数据中的值和表单元素的值进行双向绑定，即修改或者设置一边，会同步更新另一边 textarea这些表单控件

<div id="app">
    <input type="text" v-model="msg" @keyup.enter="sayHi()">
    <h2>{{msg}}</h2>
    <button @click="change">修改值哦哦哦</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: "黄丹妮"
        },
        methods: {
            sayHi: function () {
                alert(this.msg);
            },
            change: function () {
                this.msg = "okk"
            }
        }
    });

</script>

他的实现过程：其实是结合了v-on:input事件和v-bind
通过在框中输入值的时候，触发事件，取到事件源的value值然后进行修改

<div id="app">
    <input type="text" v-on:input='change' :value='msg'>
    <p>{{msg}}</p>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: "黄丹妮小可爱"
        },
        methods: {
            change: function (e) {
                //console.log(e.target.value);
                this.msg = e.target.value;
            }
        }
    });

</script>