Vue.js学习

前言

很荣幸的,能够在实习阶段接触到Vue.js相关的内容,指导人让我先熟悉一下Vue的基本实现。在今天的学习过程,写下一点内容方便以后阅读。

安装

Vue.js的引入类似于其他框架的引入方法,只需将Vue.js文件下载之后,在HTML的头标签里引入就行。例如:

<script type="text/javascript" src="vue.js">script>

概述

Vue的模型可以参照下图:

Vue.js学习_第1张图片

这张图说明了Vue的作用,它扮演的角色是监听DOM操作,对数据进行绑定,能够将DOM操作和js数据很好地进行同步操作。当页面上的元素有交互引起数据变化时,Vue也能够很迅速的将变化体现在页面上。
看一个例子:


<html>
<head>
    <meta charset="utf-8">
<title>Exampletitle>

<script type="text/javascript" src="vue.js">script>
head>
<body>
    <div id="app">
        <input v-model="newTip" v-on:keyup.enter="addTip">
        <div v-for="item in tip">
            <span>{{ item.text }}span>
            <button v-on:click="delTip($index)">Xbutton>
        div>
    div>
<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data:{
        newTip:'',
        tip:[
        {text:'请关注该用户'},
        {text:'请多多指教'}
        ]
    },
    methods:{
        addTip:function(){
            var nT = this.newTip.trim();
            this.newTip='';
            if(nT){
                this.tip.push({text:nT});
            }
        },
        delTip:function(index){
            this.tip.splice(index,1);
        }
    }
});
script>
body>
html>

代码显示一个tip队列,在文本框内输入文字后敲击回车键提交后,会在下方队列中显示新添加的队列。而点击行数据的右侧按钮,会删除该行。

从代码中可以看出,HTML代码中绑定了id,并且在之后的代码中对js对象数据进行遍历输出,而输入框提交数据引起的数组变化,在页面上能够立即体现。而不需要人工书写DOM操作来实现页面数据刷新。同样,在页面监听事件之后,数组的添加删除同样直接引起了页面的变化,更加迅速便捷。

实例解析

HTML部分:

就拿前一个例子来说,HTML使用js数据时,在出现表达式的位置使用{{ 表达式 }}就行,需要注意的是,{{}}里面只能使用表达式,而不能是其他语句等,如果要实现判断语句则使用三元表达式。
HTML中有一些Vue特性属性,例如前面所见的以“v-”开头的特定属性。常见的一般有v-if(用于判断渲染),v-for(用于循环渲染),v-model(用于声明元素的模式),v-on(用于绑定事件)等。

v-if的用法如下:

<div v-if="bool">aaadiv>//在bool为true是才会显示“aaa”

`v-for`的用法如下:
<div v-for="item in tip">//循环显示提示信息和按钮
    {{ item.text }}
    

v-model的用法如下:

"newTip" v-on:keyup.enter="addTip">

v-on的用法如下:

Js部分:

还是按照之前的例子,代码中新声明一个Vue对象,其中el为HTML中所声明的对象,其表示整个模式所绑定的DOM元素是哪个。而data表示默认的数据内容,从页面渲染开始到数据修改等,都可以对其进行操作。methods则是对一些方法进行声明,如例子中声明addTip()delTip()函数等。

为了区别Vue特殊变量和js原生变量,Vue通过使用$来区别。例如代码中使用$index表示下标并传递给delTip()作为参数。

而代码中的this则是指向该模块,例如:

addTip:function(){
    var nT = this.newTip.trim();
    this.newTip='';
    console.log(this);
    //返回的是Vue对象
    //Vue {$el: div#app, $parent: undefined, $root: Vue, $children: Array[0], $refs: Object…}
    //正如上一段所说,Vue对象属性区别于普通js变量,用$el、$parent等表示
    if(nT){
        this.tip.push({text:nT});
    }
}

总结

学的还是浅薄之处,我还在学习中,慢慢再进行总结。希望各位大神多多指教!谢谢!

你可能感兴趣的:(JavaScript,vue,框架,vue,JavaScript)