Vue.js 入门

最新推荐文章于 2024-07-20 05:46:23 发布

Micah_A

最新推荐文章于 2024-07-20 05:46:23 发布

阅读量850

点赞数

分类专栏： Vue.js 文章标签： vue-js

本文链接：https://blog.csdn.net/lvchenqiang_/article/details/78650781

版权

Vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue简介

Vue官网:https://cn.vuejs.org/
Vue.js是是一套构建用户界面的渐进式框架,它让你通过简单灵活的API创建有数据驱动的UI组件。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js是一款轻量级的以数据驱动构建web界面的前端JS框架，他在架构设计上采用了MVVM模式，其中ViewModel是Vue.js的核心。它是一个Vue的实例，作用于页面的某个HTML元素。

Vue的快速入门

起步

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

<script src="https://unpkg.com/vue"></script>

声明式渲染

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

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

<script>
    <!--创建vue 的实例 ViewModel -->
    var app = new Vue({
        el: '#app', //把viewmodel 实例加载到#app
        data: { //Vue 的model -> 数据
            message: 'Hello Vue!'
        }
    })

</script>

</body>
</html>

在上面的实例中，我们通过new Vue创建了一个Vue的实例。
在实例化Vue 时，我们需要传入一个选项对象。它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data）我们可以操作数据改变视图。

数据绑定

Vue.js 中数据和 DOM 已经被绑定在一起，所有的元素都是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>


<script>
    <!--创建vue 的实例 ViewModel -->
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })

</script>

</body>
</html>

这里的V-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它们会在渲染的 DOM 上应用特殊的响应式行为。

Vue 的指令（Directives）

带特殊前缀的HTML特性，可以让Vue.js对一个DOM 元素做各种处理。主要指令有：
v-once
v-if
v-show
v-else
v-for
v-on
v-bind

v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->
<div id="app">
    <span>能够改变:{{message}}</span>
    <p v-once>不能够改变:{{message}}</p>
</div>


<script>

   var app = new Vue({
       el:'#app',
       data:{
           message:'你好 Vue'
       }
   })

</script>

</body>
</html>

这里写图片描述
执行一次性插值，当数据改变的时候插值处的内容不会更新。

v-if

条件渲染指令，根据表达式的真机来添加或删除元素。其语法结构是：v-if=”expression” 其中expression是一个返回bool值的表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>


<script>

    var app = new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

</body>
</html>

app.seen=false

v-show

条件渲染指令，不同的是v-show的元素会始终渲染并保持在DOM中。和v-if指令不同的在于 v-show是根据表达式之真假值切换元素的display CSS属性，当条件变化时该指令触发过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

<div id="app">
    <p v-show="show">显示!</p>

    <p v-show="hide">不显示</p>

    <p v-show="height >= 1.5">身高是:{{height}}米</p>
    <p v-show="name == 'vue'">名称是:{{name}}</p>
</div>


<script>

    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            hide:false,
            height:1.70,
            name:'vue'
        }
    })
</script>

</body>
</html>

这里写图片描述
v-if 是真实条件渲染因为它会确保条件在切换过程中适当的销毁与重建条件内事件监听器和子组件 v-show 则只是简单的基于CSS切换
v-if有更高的切换消耗而v-show有更高的初始渲染消耗。如果频繁的切换使用v-show比较好如果在运行的过程中不大可能改变则使用v-if.

v-else

可以使用v-else指令为v-if或v-show添加一个else块。注意：V-else前一兄弟元素必须有v-if或v-else-if.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

<div id="app">
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不不不及格</p>

</div>


<script>

    var app = new Vue({
        el: '#app',
        data: {
            score: 10
        }
    })
</script>

</body>
</html>

v-for

基于数据渲染一个列表，类似于js中的遍历。其数据类型可以使Array|Object|number|string.
该指令之值，必须使用特定的语法 (item,index) in items

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>


<script>

    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' }
            ]
        }
    })


</script>

</body>
</html>

运行效果图：
这里写图片描述

v-for默认行为不改变整体，而是替换元素。迫使其重新排序的元素，您需要提供一个key的特殊属性。

<div v-for="item in items":key="item.id">

    {{item.text}}

</div>

v-bind

动态的绑定一个或者多个特性,或一个组件prop到表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .active{
            background-color: orange;
            color: #ffffff;
        }

    </style>

</head>
<body>

<!--视图层-->

<div id="app-4">
    <p v-for="(todo,index) in todos" :class="index === avtivePage ? 'active': ''"> {{todo.text}}</p>
</div>



<script>

    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' },
                {text:'整个牛工具'}
            ],
            avtivePage:2
        }
    })



</script>

</body>
</html>

这里写图片描述

v-on

动态的绑定一个或者多个特性。如果作用于普通元素上只能监听原生DOM事件。但是如果作用于在自定义元素组件上时，可以监听子组件触发时的自定义事件。
常用的修饰符包括:
.stop 调用 event.stopPropagation()；停止冒泡
.prevent 调用 event.preventDefault(); 停止监听原生事件
.capture 添加事件侦听器时使用 capture 模式
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时才触发回调
.once - 触发一次

使用手法：


<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<!--视图层-->

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>





<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

</script>

</body>
</html>

这里写图片描述

通过methods这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例

Demo练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 起步</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .active{
            background-color: orange;
            color: #ffffff;
        }
        .tableContent{
            text-align: center;
        }
    </style>

</head>
<body>

<!--视图层-->
<div id="app">
    <fieldset>
        <legend> 指纹录入系统 </legend>
        <div>
            <span>姓名:</span>
            <input type="text" placeholder="请输入名称" v-model="newPerson.name">

        </div>
        <div>
            <span>年龄:</span>
            <input type="text" placeholder='18' v-model="newPerson.age">
        </div>

        <div>
            <span>性别:</span>
            <select v-model="newPerson.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>


        <div>
            <span>手机:</span>
            <input type="text" placeholder="请输入手机号" v-model="newPerson.phone">
        </div>


       <div>
           <button @click="createPerson" class="active">创建新用户</button>
       </div>

    </fieldset>



    <!--表格区域-->
<table>
    <thead>
       <tr>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
           <th>手机</th>
           <th>删除</th>
       </tr>
    </thead>

    <tbody>
    <tr v-for="(p,index) in persons">
        <td class="tableContent">{{p.name}}</td>
        <td class="tableContent">{{p.age}}</td>
        <td>{{p.sex}}</td>
        <td>{{p.phone}}</td>
        <td><button @click="delPerson(index)" class="active">删除</button></td>


    </tr>


    </tbody>



</table>





</div>



<script>


    var app = new Vue({
        el:"#app",
        data:{
            persons:[
                {name:"张三",age:18,sex:"男",phone:"17011111111"},
                {name:"李四",age:20,sex:"女",phone:"17011111121"},
                {name:"王二",age:38,sex:"男",phone:"17011111331"},
                {name:"刘五",age:70,sex:"女",phone:"17011111231"},
                {name:"流一",age:50,sex:"男",phone:"17011111451"},
            ],
            newPerson:{
                name:"",
                age:18,
                sex:"男",
                phone:"17134567890"
            }

        },
        methods:{
            createPerson:function () {
                 //验证
                if(this.newPerson.name == ""){
                    alert('姓名不能为空')
                    return
                }

                //添加数据
                this.persons.push(this.newPerson)

                //清空数据
                this.newPerson = {
                    name:"",
                    age:18,
                    sex:"男",
                    phone:"17134567890"
                }



            },
            delPerson:function (index) {
                this.persons.splice(index,1);
            }


        }

    })


</script>

</body>
</html>

这里写图片描述

Micah_A

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 入门

Vue简介Vue官网:https://cn.vuejs.org/ Vue.js是是一套构建用户界面的渐进式框架,它让你通过简单灵活的API创建有数据驱动的UI组件。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js是一款轻量级的以数据驱动构建web界面的前端JS框架，他在架构设计上采用了MV
复制链接

扫一扫

专栏目录