vue基础教程（上篇）

是你的大头呢

已于 2022-05-30 23:13:52 修改

阅读量2.6k

点赞数 44

分类专栏： Vue基础教程文章标签： vue 前端

于 2022-04-25 21:51:34 首次发布

本文链接：https://blog.csdn.net/wjj49/article/details/124415397

版权

Vue基础教程专栏收录该内容

4 篇文章 4 订阅

订阅专栏

❤️ 目录

2、vue基础教程

2、vue基础教程

一.初识vue

1.什么是vue

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

2.安装vue

方法一(不推荐使用）：进入官网，安装Vue Devtools插件（使用Chrome浏览器）

官网网址如下：https://vuejs.bootcss.com/guide/installation.html

方法二：在 Vue.js 的官网上直接下载 vue.min.js 并用

3.MVVM的介绍

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

4.一个Hello World小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>{{name}}</h1>
    </div>
    <script type="text/javascript">
        // 创建vue实例
        var app = new Vue({
            el: '#root',
            data: {
                name: 'Hello World!'
            }
        })
    </script>
</body>

</html>

二.vue基础语法

1.指令

1.1 v-text

通过v-txet，可以替换掉了标签中的内容，但会覆盖元素内部原有的内容，在实际开发中大多使用{{}}插值表达式。

<body>
    <div id="root">
        <!-- v-text的使用 -->
        <h1 v-text="name">{{name}}</h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#root',
            data: {
                name: 'Hello World!'
            }
        })
    </script>
</body>

1.2 v-html

v-text和插值表达式只能渲染纯文本，但v-html可以把带有标签的字符串，渲染成真正的HTML内容。

<body>
    <div id="root">
        <!-- v-html的使用 -->
        <h1 v-h<!-- 准备一个容器 -->tml="info"></h1>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                info:'<h3 style="color: pink; font-weigt: bold;">一起学习vue.js</h3>'
            }
        })
    </script>
</body>

1.3 v-on

v-on是一个事件绑定指令，用来辅助程序员绑定事件监听

<body>
    <div id="root">
        <p>count的值是: {{count}}</p>
        <!-- v-on的使用 -->
        <button v-on:click="add">+1</button>
        <!-- v-on：的简写@ -->
        <button @click="add">+1</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                count: 0
            },
            methods: {
                add: function () {
                    console.log('ok')
                }
            },
        })
    </script>
</body>

1.4 v-bind

给元素的属性动态绑定属性值。

<body>
    <div id="root">
        <!-- v-bind的使用 -->
        <input type="text" v-bind:placeholder="tips">
        <!-- v-bind：的简写： -->
        <input type="text" :placeholder="tips">
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                tips: '请输入用户名'
            },

        })
    </script>
</body>

1.5 v-if/v-show

辅助开发者对元素进行显示或隐藏的操作。

<body>
    <div id="root">
        <!-- v-if的使用 -->
       <p v-if="flag">大头</p>
       <!-- v-show的使用 -->
       <p v-show="flag">是你的大头呢</p>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                flag:true
            },

        })
    </script>
</body>

1.6 v-if/v-else-if/v-else

与v-if同时使用，可以选择。

<body>
    <div id="root">
        <div v-if="type === 'A'">
            A
          </div>
          <div v-else-if="type === 'B'">
            B
          </div>
          <div v-else-if="type === 'C'">
            C
          </div>
          <div v-else>
            Not A/B/C
          </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                type:'A'
            }

        })
    </script>
</body>

1.7 v-for

用来辅助开发者用一个数组来循环渲染一个列表结构，常用于item in items形式的特殊语法。

<body>
    <div id="root">
        <table>
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <!-- v-for的使用 -->
                <tr v-for="(item,index) in list">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                list: [
                    { id: 1, name: '大头' },
                    { id: 2, name: '小头' },
                    { id: 3, name: '大腿' }
                ]
            }
        })
    </script>
</body>

是你的大头呢

关注

44
点赞
踩
41

收藏

觉得还不错? 一键收藏
77
评论
vue基础教程（上篇）

❤️ 目录2、vue基础教程一.初识vue1.什么是vue2.安装vue3.MVVM的介绍4.一个Hello World小案例二.vue基础语法1.指令1.1 v-text1.2 v-html1.3 v-on1.4 v-bind1.5 v-if/v-show1.6 v-if/v-else-if/v-else1.7 v-for2、vue基础教程一.初识vue1.什么是vueVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底
复制链接

扫一扫