Vue基础--介绍、指令

一、Vue简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、开始

1、需要先引入vue.js环境。
2、设置el挂载点及data数据对象。（挂载点一般选择ID选择器）

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这里就生成了一个vue程序

三、vue指令

1、v-text指令

在标签里面加入v-text=""即可，或者简写{{ }}
例如：

   <div id="app">
        <h2 v-text="message+'4'"></h2>
        <h2>{{ message + '4' }}</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "v-text",
                info: "前端"
            }
        })
    </script>

上面两个h2标签效果相同。

2、v-html指令

在内容都是文本类型时，v-text与v-html效果相同，但是v-html可以解析标签。
例如：

    <div id="app">
        <!-- //v-html可以解析标签 -->
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.baidu.com'>itheima</a>",
            }
        })
    </script>

效果如下图：

3、v-on指令

v-on指令多用于事件绑定，在标签里面用 v-on:事件="方法"表示，也可以简写为 @事件=“方法”。
例如：

<!-- v-on与@功能相同，格式：@事件:"函数" -->

    <div id="app">
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="事件绑定" @click="doIt">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "米饭",
            },
            methods: {
                doIt: function() {
                    alert(111);
                },
            }
        })
    </script>

在点击按钮之后都会有一个弹框。

4、v-show指令

v-show指令格式如下：

v-show=“表达式”，当表达式为true时该标签内容会显示，为false时会隐藏。
注意：v-show指令是通过改变标签的样式使其显示和隐藏的。

5、v-if指令

v-if指令与v-show指令功能类似，都是显示和隐藏标签内容。但是v-if是通过操作dom来直接添加和删除标签。
v-if指令格式如下：
v-if="true"

    <div id="app">
        <input type="button" value="切换" @click="toggleIsShow">
        <p v-if="isShow">111</p>
        <p v-show="isShow">222</p>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temp: 40,
            },
            methods: {
                toggleIsShow: function() {
                    this.isShow = !this.isShow;
                },
            }
        })
    </script>

上述代码实现点击按钮显示隐藏内容：

可以看到v-if直接删除了内容，而v-show是设置标签属性为display:none

6、v-bind指令

v-bind指令是对属性进行操作，其格式为
v-bond:属性="新属性"

7、v-for指令

v-for指令将循环生成新标签，其格式为：
v-for="item in arr"
例如每一个表单元素显示一个对象数组的值：

    <div id="app">
        <ul>
            <li v-for="(item, index) in objArr">
                {{ index }}:{{ item.name }}
            </li>
        </ul>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                objArr: [{
                    name: "zhangsan"
                }, {
                    name: "lisi"
                }, {
                    name: "wangwu"
                }, ],
            },
        })

8、v-model指令

v-model指令可以双向获取和设置表单元素的值，具有关联同步的特性。

    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message }}</p>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "请输入文字",
            }
        })
    </script>

可以看到当修改表单元素的值时，在data对象定义的message也同步改变。