Vue的基本语法和使用

本文链接： https://blog.csdn.net/geek64581/article/details/102505982

Vue.js的基本语法和使用

文章目录

Vue.js的基本语法和使用

第一章 vue.js简介
第二章 Vue.js基本概念
第三章 Vue模板语法
第四章 Class的绑定
第五章列表渲染
第六章事件处理
第七章表单绑定
第八章过滤器
第九章实例生命周期

第一章 vue.js简介

Vue.js可以作为一个 js 库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。
Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似于后台的模板语言。
Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)系统。

第二章 Vue.js基本概念

首先通过将vue.js作为一个js库来使用，来学习vue的一些基本概念，我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

2.1 vue.js的使用:

 <!--第一步:  在html页面head部分导入vue框架-->
  <script src="js/vue.min.js"></script>

每个 Vue 应用都需要创建一个新的Vue对象：

<script>
   window.onload = function(){
       // 第二部分:  创建一个vue实例化对象
        var vm = new Vue({
            el:'#app',
            data:{message:'hello world!'}
        });
    }   
</script>


<!--
    第三部分: 
    创建一个容器, 内部用于展示vue实例化对象的内容
-->
<div id="app">
    {{ message }}
</div>

其中，el属性对应一个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使用vue对象中定义的属性和方法。

2.2 vue对象中数据与方法的处理:

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#app',
            // data中存放的是vue对象中的数据部分: 
            data:{message:'hello world!'},
            // methods里面存放的是vue对象中的方法部分:
            methods:{
                fnChangeMsg:function(){
                    this.message = 'hello Vue.js!';
                }
            }
        });
    }    
</script>


<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="fnChangeMsg">改变数据和视图</button>
</div>

总结:

vue使用的时候,必须要通过 new Vue( ) 来实例化一个对象
vue实例化的对象中, 常见的参数为:
- el: 关联 HTML 部分的标签, 使 vue 中的内容能够加载到 HTML里面去
- data: 页面中需要的数据, 可以通过这个属性进行初始化, 进而赋值到 HTML 页面去
- methods: 可以给当前vue对象添加方法, 一般我们都会把方法放在这个对象里面
- computed: 后面会学到, 这个是计算属性, 我们可以给data里面的值添加一些管理,放在这里
- watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法.
vue 中一般会使用小胡子语法 (插值表达式)
vue 中添加点击事件使用的不是 onclick , 而是 v-on:click 大家先记一下, 下面会仔细讲

第三章 Vue模板语法

3.1 小胡子语法

小胡子语法也被称为差值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<!--常见写法: -->


<span> {{ msg }} </span>

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

3.2 指令
指令 (Directives) 是带有“v-”前缀的特殊属性。

常见的指令有v-bind、v-if、v-on。

<!-- 根据ok的布尔值来插入/移除 <p> 元素 -->
<p v-if="ok">是否显示这一段</p>

<!-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮</button>

<a v-bind:href="url" v-bind:title='tip'>百度网</a>

3.3 缩写
v-bind和v-on事件这两个指令会经常用，所以有简写方式：

v-bind的简写: 

<!-- 完整语法: -->
<a v-bind:href="url">...</a>

<!-- 缩写为:  -->
<a :href="url">...</a>



v-on:的简写: 
<!-- 完整语法: -->
<button v-on:click="fnChangeMsg">按钮</button>

<!-- 缩写为:  -->
<button @click="fnChangeMsg">按钮</button>

第四章 Class的绑定

使用 v-bind 指令来设置元素的 class 属性或者sytle属性，它们的属性值可以是表达式，vue.js在这一块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box{
            width:100px;
            heigh:100px;
            background-color: pink;
        }
        .divbox{
            font-size: 40px;
            color:red;
        }

    </style>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'#app',
                data:{
                    isOk:true,
                    isTrue:true

                },

            })
        }
    </script>
</head>
<body>
    <div id = 'app'>
       <!--<div class ="box divbox">开局一标签</div>-->
       <div :class ="[isOk ? 'box':'', isTrue ? 'divbox': '']">开局一标签</div>
    </div>
</body>
</html>

总结:

正常使用class: class=“box divbox”
用变量控制类名的加载与否: :class="{box: true/false, divbox}"
上面的式子我们也可以把对象赋一个名字, 调用名字: :class=“objName”,其中: objName={box: true/false}
可以使用数组来包裹类名: :class=[firstName],其中: firstName=“divbox”
也可以使用三元表达式,但是三元表达式需要放在数组中.
class 和 style 往往就是和v-bind配合使用, 来使 data 中的属性能够加载到 HTML 部分
这里用的其实和小胡子语法很像, 但是大家需要注意一个问题: 在标签的属性位置, 不能添加小胡子语法: 也就是说在标签的属性位置不能够出现两个大括号包含使用的情况.
class 和 style, 使用的是单个的对象 { }

第五章列表渲染

通过 v-for 指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in movieName">
                {{ item }}
            </li>
        </ul>

        <ul>
            <li v-for="(item,index) in movieName">
                {{ index+1 }}、{{ item }}
            </li>
        </ul>

        <ul>
            <li v-for="val in peron01">
                {{ val }}
            </li>
        </ul>

        <ul>
            <li v-for="(val,key) in peron01">
                {{ key }}:{{ val }}
            </li>
        </ul>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                movieName:['古墓丽影3','唐人街探案2','芳华','环太平洋2','大话西游5'],
                peron01:{'name':'李思','age':18,'gender':'男'}
            }
        })
    </script>
</body>

第六章事件处理

<head>
    <script src="js/vue.js"></script>   
</head>
<body>
<div id="app"  @click="isShow=false">
    <input type="button" value="弹出弹框" id="btn01" @click.stop="isShow=true">
    <div class="pop_main" id="pop" v-show="isShow">
        <!-- 弹框本身制作阻止冒泡的操作 -->
        <div class="pop_con" @click.stop>
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff" @click="isShow=false">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">                              
            </div>
        </div>
        <div class="mask"></div>
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            isShow:false
        }
    })
</script>
</body>

第七章表单绑定

可以用 v-model 指令在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

在这里插入图片描述

<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- input 用v-model绑定vue对象里面的一个数据，可以实现双向数据绑定 -->
        <input type="text" v-model="txt01">
        <div>{{ txt01 }}</div>
        <input type="button" value="改变值" @click="txt01=100">

        <select v-model="sel01">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
        <div>{{ sel01 }}</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
               txt01:'',
               sel01:0 
            }
        })
    </script>
</body>

第八章过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ prize | RMB }}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:15000
                },
                filters:{
                    money:function (value) {
                        return '¥' + value
                    },
                    howmoney:function (value) {
                        return value + '元'
                    },
                    salary:function (value) {
                        return "罗栌山月薪:" + value
                    }
                }
            })

        }
    </script>
</head>
<body>
    <div id="app">
        {{msg | money | howmoney | salary}}
    </div>

</body>
</html>

在这里插入图片描述

第九章实例生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新 DOM 等。同时在这个过程中会自动运行一些叫做生命周期钩子的函数，我们可以使用这些函数，在实例的不同阶段加上我们需要的代码，实现特定的功能。

在这里插入图片描述

DOM——document，object，model，把文档(标签)变成对象的模型
标签都是Element对象，是特殊的Element对象，由Document造出，其他的标签由Element方法造出。