前端知识-Vue.js入门

作者: Summer2077 | 来源:发表于2020-11-16 17:28 被阅读0次

一、介绍

1、Vue.js 是什么

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。

Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

官方网站：https://cn.vuejs.org

2、初识Vue.js

创建文件夹vuejs，将vue.min.js引入文件夹

CDN引入方式：

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

<body>

    <!-- id标识vue作用的范围 -->
    <div id="app">
        <!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
        {{ message }}
    </div>

    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            //绑定vue作用的范围
            el: '#app',
            //定义页面中显示的模型数据
            data: {
                 message: 'Hello Vue!'
            }
        })
    </script>

</body>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

data: {
    message: 'Hello Vue!'
}

也可以写成

data() {
    return {
        message: 'Hello Vue!'
    }
}

二、基本语法

1、基本数据渲染和指令 v-on (:)

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'Helen'
        }
    })
</script>

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

<div id="app">
    <!-- 数据绑定在html属性中，使用 v-bind 指令 -->
    <h1 v-bind:title="name">{{name}}</h1>

    <!-- v-bind 指令的简写形式： 冒号（:） -->
    <h1 :title="name">{{name}}</h1>
</div>

2、双向数据绑定 v-model

<script src="vue.min.js"></script>
<script>
 new Vue({
     el: '#app',
     data: {
         keyword: '尚硅谷'
     }
 })
</script>

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

<div id="app">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="keyword">
    <!-- v-model 可以进行双向的数据绑定  -->
    <input type="text" v-model="keyword">

    <p>您要查询的是：{{keyword}}</p>
</div>

什么是双向数据绑定？

当数据发生变化的时候，视图也会跟着发生变化
- 数据模型发生了改变，会直接显示在页面上
当视图发生变化的时候，数据也会跟着同步变化
- 用户在页面上的修改，会自动同步到数据模型中去

3、事件 v-on (@)

创建 03-事件.html

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<div id="app">
    <button v-on:click="show()">查询</button>
</div>

<script src="vue.min.js"></script>
<script>
new Vue({
    el: '#app',
    methods: {
        show() {
            console.log(new Date())
        }
    }
})
</script>

v-on 指令的简写形式

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符 (.)

修饰符是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为

<div id="app">
    <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
    这里的 .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为 -->
    <form action="save" v-on:submit.prevent="check()">
        姓名：<input type="text" v-model="user.username">
        <button type="submit">保存</button>
    </form>
</div>

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {}
        },

        methods: {
            check(){
                console.log(this.user.username)
                if(!this.user.username){
                    alert('请输入姓名')
                    return
                }
                //ajax提交
                console.log('ajax提交')
                
            }
        }
    })
</script>

5、条件渲染 v-if v-show

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现

v-if直接删除DOM

v-show是添加一个css属性 display:none

<div id="app">
    <input type="checkbox" v-model="ok">同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-if="ok">if：协议内容.</h1>
    <h2 v-else>no</h2>

    <!-- v:show 条件指令 初始渲染开销大 -->
    <h3 v-show="ok">show：协议内容.</h3>
    <h4 v-show="!ok">no</h4>
</div>

经常发生改变的DOM最好使用v-show！！！

6、列表渲染 v-for="(item,index) in list"

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { username: 'helen', age: 18 },
                { username: 'peter', age: 28 }
            ]
        }
    })
</script>

v-for：列表循环指令

<div id="app">
    <table style="border:1">
        <!-- <tr v-for="item in userList"></tr> -->
        <tr v-for="(item, index) in userList">
            <td>{{index}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>

7、实例生命周期 created=>mounted

<div id="app">
    <h3 id="h3">{{ message }}</h3>
</div>

分析生命周期相关方法的执行时机

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '床前明月光'
        },
        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
            console.log('created')
            //可以操作 data 中的数据
            console.log(this.message)
            //可以调用methods中的方法
            this.show()
            //无法取出dom节点取数据，说明用户无法在浏览器中看见这个内容
            console.log(document.getElementById('h3').innerText)
        },
        
        // 数据已经被渲染到页面中
        mounted() { // 第四个被执行的钩子方法
            console.log('mounted')
            //可以取出dom节点取数据，说明用户已经在浏览器中看见内容
            console.log(document.getElementById('h3').innerText)
        },
        
        methods: {
            show() {
                console.log('show方法被调用')
            }
        },
    })
</script>

网友评论

本文标题：前端知识-Vue.js入门

本文链接：https://www.haomeiwen.com/subject/qxjzbktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！