Vue.js 入门基础

Vue.js是什么

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

Vue.js的引用

创建一个 .html 文件，然后通过如下方式引入 Vue：

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

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

或 进入Vue官方文档下载开发/生产版本。

Vue.js在JavaScript中一般的写法

参考代码

new Vue({
    el: '#id',
    data: {
        message1: '字符串',
        message2: ['数组1', '数组2'],
        message3: {}
    },
    methods: {
        show: function() {
            // 事件
        }
    }
})

el挂载点：一般为元素的id名称；
data数据对象：内部可自定义类型，也可以看做是变量，可自定义名称（如参考代码所示“message1”与“message2”为变量名称）；
methods：写方法，也可以自定义名称（如参考代码所示，“show”为方法名称）；

v-text与v-html指令（声明式渲染）

例如要利用Vue将一个id为"app"的div元素中的内容更改为"Hello Vue!"，我们通常可以采用以下方法。

  • 方式一
<div id="app">
    {{ message }}
</div>

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
  • 方式二
<div id="app" v-text="message"></div>

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
  • 方式三
<div id="app" v-html="message"></div>

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

以上三种方式最终所呈现的效果是一样的，都是在div标签内添加“Hello Vue!”。
但值得注意的是：
v-text是用于操作纯文本，其中：v-text可以简写为{{ }}（参考方式一代码）。
v-html用于输出html。
二者之间的区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

拓展：Vue 绑定父容器后，可直接对其子元素标签进行操作，而不需要再绑定其子元素标签。
注意：Vue不可以绑定html和body标签。
参考代码如下

<div id="app">
    <div v-text="message1"></div>
    <div v-text="message2"></div>
</div>

new Vue({
    el: '#app',
    data: {
        message1: 'Hello',
        message2: 'Vue'
    }
})

v-once指令

v-once这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。
参考代码

<div id="app">
    <div v-once>{{ msg }}</div>
    <div>{{ msg }}</div>
    <button @click="addOne">加一</button>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 0
    },
    methods: {
        addOne: function () {
            this.msg++;
        }
    }
})

由于v-once指令定义的元素只渲染一次，所以无论“msg”的值是否发生变化，<div v-once>内的值都不会再改变。

v-on指令

作用：为元素绑定事件。
例如 点击button标签弹出提示框，参考代码如下：

<button id="btn" v-on:click="show">按钮</button>

new Vue({
    el: '#btn',
    methods: {
        show: function() {
            alert('你点击了按钮。');
        }
    }
})

v-on: 也可简写为 @
简写后html代码如下

<button id="btn" @click="show">按钮</button>

v-on还可绑定其它事件，如mouseenter、keydown、keyup等，就不一一举例。

v-model指令

作用：实现数据与表单元素的双向绑定。
当表单元素（如：input）内的值被更改时，绑定的data数据也会同时被更改；
相反，当data数据被更改时，对应表单元素也会随之更改。
参考代码如下

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

new Vue({
    el: '#app',
    data: {
        message: '123'
    }
})

最常用于表单提交（如：注册/登录功能），参考代码如下

<section id="app">
    账号：
    <input type="text" v-model="id"><br>
    密码：
    <input type="password" v-model="password"><br>
    <button @click="submit">登录</button>
</section>

new Vue({
    el: '#app',
    data: {
        id: '',
        password: ''
    },
    methods: {
        submit: function() {
            // 表单提交代码
            alert('账号：' + this.id + '  密码：' + this.password);
        }
    }
})

v-show与v-if指令（条件渲染）

作用：操作标签的可见性。

  • v-if 参考代码
<div id="app" v-if="isShow">这是一个div元素</div>

new Vue({
    el: '#app',
    data: {
        isShow: true
    }
})

当data数据内的"isShow"属性为true时div可见；反之属性为false时，div将不可见。

  • 拓展：v-else 参考代码
<div id="app">
    <div v-if="isShow">这是div1</div>
    <div v-else>这是div2</div>
</div>

new Vue({
    el: '#app',
    data: {
        isShow: true
    }
})

运行结果：当isShow=true时，显示“这是div1”，反之将显示“这是div2”。

  • 拓展：v-else-if 参考代码
<div id="app">
    <div v-if="type == 'A'">这是div1</div>
    <div v-else-if="type == 'B'">这是div2</div>
    <div v-else>这是div3</div>
</div>

new Vue({
    el: '#app',
    data: {
        type: 'B'
    }
})

运行结果：
当type为'A'时显示“这是div1”；
当type为'B'时显示“这是div2”；
否则显示“这是div3”。

  • v-show 参考代码
<div id="app" v-show="isShow">这是一个div元素</div>

new Vue({
    el: '#app',
    data: {
        isShow: true
    }
})

运行效果从表面上看，和v-if一样：当data数据内的"isShow"属性为true时div可见；反之属性为false时，div将不可见。

  • v-if 与v-show 的区别
    • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    • v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
    • 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
    • 通俗的说，v-if渲染条件为假时，在网页源代码上将找不到对应标签；而v-show渲染条件为假时，在网页源代码上可以找得到对应标签，但标签的display属性为false。

v-bind 指令

作用：设置元素的属性。（如：src、title、class等）
参考代码如下

<div id="app">
    <img v-bind:src="imgSrc" alt="">
</div>

new Vue({
    el: '#app',
    data: {
        imgSrc: '图片地址'
    }
})

v-bind: 也可简写为 :
简写后html代码如下

<div id="app">
    <img :src="imgSrc" alt="">
</div>

v-for 指令

作用：根据数据生成列表结构。

  • 参考代码一
<div id="menu">
    <ul>
        <li v-for="item in items">
            {{ item }}
        </li>
    </ul>
</div>

new Vue({
    el: '#menu',
    data: {
        items: ['鸡腿饭套餐', '牛肉饭套餐', '鸭腿饭套餐']
    }
})

运行结果：

  • 鸡腿饭套餐
  • 牛肉饭套餐
  • 鸭腿饭套餐
  • 参考代码二
<div id="menu">
    <ul>
        <li v-for="(item, name) in items">
            {{ name }}：{{ item }}
        </li>
    </ul>
</div>

new Vue({
    el: '#menu',
    data: {
        items: {
            食物: '汉堡',
            饮料: '可乐'
        }
    }
})

运行结果：

  • 食物：汉堡
  • 饮料：可乐
  • 参考代码三
<div id="menu">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }}.{{ item }}
        </li>
    </ul>
</div>

new Vue({
    el: '#menu',
    data: {
        items: ['蛋炒饭', '西红柿炒蛋', '牛肉面']
    }
})

运行结果：

  • 0.蛋炒饭
  • 1.西红柿炒蛋
  • 2.牛肉面

computed（计算属性）

当其依赖的属性的值发生变化时，计算属性会重新计算；反之，则使用缓存中的属性值。
例如做一个简易加法计算器，参考代码如下

<div id="app">
    <input type="text" v-model="num1">
    +
    <input type="text" v-model="num2">
    =
    <span>{{ msg }}</span>
</div>

new Vue({
    el: '#app',
    data: {
        num1: 0,
        num2: 0
    },
    computed: {
        msg: function () {
            return parseFloat(this.input1) + parseFloat(this.input2);
        }
    }
})

运行后计算结果会随着输入的改变而改变。

axios（GET/POST请求）

功能强大的网络请求库。
引入axios：

<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET请求格式

  • 格式一
axios.get("url地址").then(
    function(res) {
        // 请求成功
    },
    function(err) {
        // 请求失败
    }
)
  • 格式二
axios.get("url地址")
.then(function(res) {
    // 请求成功
})
.catch(function(err) {
    // 请求失败
})

补充说明
通过url传参

axios.get('url?key1=value1&key2=value2').then...

通过params传参

axiox.get('url', {
    params: {
        key1: value1,
        key2: value2
    }
}).then...

POST请求格式

  • 格式一
axios.post("url地址", "参数对象").then(
    function(res) {
        // 请求成功
    },
    function(err) {
        // 请求失败
    }
)
  • 格式二
axios.post("url地址", "参数对象")
.then(function(res) {
    // 请求成功
})
.catch(function(err) {
    // 请求失败
})

补充说明
以表单形式提交POST请求

var data = new URLSearchParams();
data.append('key1', 'value1');
data.append('key2', 'value2');

axios.post('url地址', data)
.then(function (res) {
    // 请求成功
})
.catch(function (err) {
    // 请求失败
});

通过URLSearchParams可将传入的参数转换为如下字符串形式后再添加进axios的POST参数。

"key1=value1&key2=value2"

如果接口要求的POST请求的参数为JSON形式，可以采用以下格式。

axios.post(url, { key1: value1, key2: value2 }).then...

总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

例子：利用GET请求获取一个笑话
接口信息

参数名 参数说明 类型 备注
num 笑话条数 整型 非空 且 大于0

参考代码

<div id="app">
    <button @click="getJokes(3)">获取笑话</button>
    <ol>
        <li v-for="joke in jokes">
            {{ joke }}
        </li>
    </ol>
</div>

new Vue({
    el: '#app',
    data: {
        jokes: []
    },
    methods: {
        getJokes: function (num = 1) {
            var that = this;
            axios.get("https://autumnfish.cn/api/joke/list?num=" + num).then(
                function (res) {
                    // 请求成功
                    console.log(res.data.msg);
                    that.jokes = res.data.jokes;
                },
                function (err) {
                    // 请求失败
                    console.log(err);
                }
            )
        }
    }
})

总结

Vue.js 框架相比 jQuery，特别是对html标签操作方面，要方便太多太多。
最明显的感觉是不需要像原生 JavaScript 或 jQuery 那样操作控件时需要“不停的”获取 document 。这样很大的提高了开发者的开发效率。
Vue.js 学起来相对也比较容易。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
禁止转载，如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • Vue.js基础入门
    今天，给大家分享下Vue.js基础入门，我主要由了解Vue.js、开始起步、语法三个部分简单的写了基础入门知识，希...
    一文插画阅读 7,633评论 13赞 184
  • vue.js基础入门
    该文章只是我对vue基础知识的一点总结，详细vue知识请看Vue官方文档。 一、什么是vue.js 是一个轻量级M...
    二熊不是熊二阅读 293评论 0赞 0
  • Vue基础-快速入门
    一、Vue简介 Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动...
    雪妮爸爸阅读 1,120评论 0赞 1
  • Web App开发--vue.js入门与实践
    1. Vue是什么 vue.js官方文档有中文版，有例子实践，非常容易入门。vue官方对vue.js的定义是： V...
    henry技术探索记录员阅读 400评论 0赞 1
  • Vue.js基础手册
    Vue.js是什么 Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其...
    鱼鱼吃猫猫阅读 3,297评论 1赞 12