"[图片] 关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架 vue-cli 开发时需要注意的事项， Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的 API（中英文都有提供），vue-router 以及 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 27 浏览 • 4 个月前

Vue.js 快速入门

关于前阵子的文章错误有点多所以从新修改了并添加了一些在官方脚手架 vue-cli 开发时需要注意的事项， Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的 API（中英文都有提供），vue-router 以及组件间的通信请使劲的敲这里：敲敲敲

Vue 快速入门

准备：

Vue.js 地址：http://cn.vuejs.org/
Bootstrap.js 地址：http://v3.bootcss.com/getting-started/#download

没错就只需要这两个就可以开发了 vue 是核心文件，bootstrap 在这里只是为了提高开发效率而引用的，是可选的。现在建个 html 文件引入刚下载好的两个文件这里我们只需要引用 bootstrap 的 css 样式文件即可，现在是这样的：

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Vue demo</h1>
            <div id="app">
            .......
            </div>
        </div>
    </div>
<script src="./public/image/vue.js"></script>
</body>
</html>

现在我们来先看段代码：

<div id="app">
    <div>{{message}}</div>
</div>
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});

这个例子在浏览器解析时会输出 hello vue.js。

我们先不管为什么，我们先理解他的逻辑。在这个例子里我们的

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

就是视图层，而

new Vue({
    el:'#app',
    data: {
        message:'hello vue.js.'
    }
});

就是数据层，在使用 Vue.js 之前，我们都需要先像这样实例化一个 Vue 对象。里面有四个常用的属性，el、data、methods、components。

el: 声明 vuejs 管理的边界，类似于 angular 的 ng-app，把数据绑定给谁。上面的例子中将数据绑定给了 #app。
data: 专门存储一些数据的属性，数据一定是对象格式。上面的例子中给 message 赋值 hello vue.js!
methods: 专门放置我们的事件的方法
components: 创建组件

回到上面的例子 el 指定了 #app，data 存放了数据 message，然后利用表达式 {{}} 将数据显示到页面。

接下来再看个例子：

<div id="app">
  <p>{{message}}</p>
  <input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

这里用到了新的指令 v-model，其作用就是接收用户输入的一些数据，直接就可以将这些数据挂载到 data 属性里面，使得实现双向数据绑定更加容易。

接下来介绍一些常用的指令：

v-if: 通过判断加载内容，若为真加载，为假时删除元素

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>
new Vue({
el: '#app',
data: {
seen: true
}
})

v-for: 控制 html 元素的循环，实现数据列表

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})

v-show: 元素会始终渲染并保持在 dom 中，并且安全性没有 v-if 高，因为 v-show 用法和 v-if 相同，只是 v-show 将元素 display 设置成 none，并不是将元素直接移除
v-else: 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

<div v-if="a"></div>
<div v-else></div>

v-bind: 给页面中 html 属性进行绑定，拥有缩写“:”，也推荐使用缩写

<img v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:'red',fontSize:'30px'}
}

可以缩写成这样

<img :src="img" />
<div :style="styles">style</div>

v-on: 对页面中的事件进行绑定, 使用方法 v-on:click="函数名称", 函数就是存放在 methods 属性里的方法名，例如

<button v-on:click="oclick()">点击</button>
methods:{
oclick:function(){
alert(1);
}
}

也有缩写“@”

<button @click="oclick()">点击</button>

效果是一样的

$event: 事件对象，如同我们原声 js 中的 event

<div @click="show($event)">点我</div>
methods:{
show:function(ev){
alert(ev.clientX)
}
}

结果：

stop: 阻止事件冒泡

// 原声:ev.cancelBubble=true;
@click.stop="show()"

prevent: 阻止默认事件

//原声:ev.preventDefault();
@click.prevent="show()"

self: 当事件在该元素本身触发时触发回调

@click.felf="show()"

capture: 添加事件侦听器时使用事件捕获模式

@click.capture="show()"

键盘事件:

//原声：ev.keyCode (13回车)
/*@keydown:任意键按下 @keyup:任意键抬起  
//方向键：.up:上 .down:下 .right:右 .left:左  .enter:回车 
//键码：.13:回车 
<div @keydown="get()">啦啦啦~</div>
<div @keyup.enter="get()">啦啦啦~</div>

看上面例子就注意到 vue 支持键码

过滤器：

<p>{{ jiexige|uppercase }}</p>
//uppercase 大写、 lowercase 小写、 capitalize 首字母大写、currency 参数:"￥" 钱币

以上是 vue 基本使用，接下来讲讲 vue-cli 的需要注意的格式，最后做个经典例子“TODOLIST”

vue 对象里不能有缩进，一般缩进用两个空格代替
冒号后面要跟一个空格
逗号后面也要跟一个空格
存放链接需要使用 require
数据只能用单引号包着

{
    url: require('./assets/images/img4.png'),
}

目前只注意到这些，将不定期更新，下面来做个例子：我先前做好了可以点击此处看演示TODOLIST，下面我来讲解下

我的数据层

window.onload = function(){
            new Vue({
                el: "#todu",
                data: {
                    myData: [],
                    username: "",
                    ages: "",
                    nowindex: 1,
                    m: false
                },
                methods: {
                    addData:function(){
                        if(this.$refs.sele.value==""){
                        	alert("请填满资料！")
                        }else{
                        	this.myData.push({
	                            name:this.username,
	                            age:this.ages
	                        });
	                        this.username="",
	                        this.ages=""
                        }
                    },
                    noindex:function(n){
                        if(n==-1){
                            this.myData = [];
                        }else{
                           this.myData.splice(n,1);
                        }
                    }
                }
            });
        }

视图层

<div class="container" id="todu">
    <h1 class="text-center">TODOLIST</h1>
    <form role="form">
        <label for="name">名称：</label>
        <input type="text" class="form-control" name="name" id="name" ref="sele" placeholder="请输入名称" v-model="username">
        <br>
        <label for="sag">年龄：</label>
        <input type="text" class="form-control" name="seg" id="seg" ref="sele" placeholder="请输入年龄" v-model="ages">
        <br>
        <div>
            <button type="button" class="btn btn-primary" @click="addData()" value="添加">添加</button>
            <input class="btn btn-danger" type="reset" value="重置">
        </div>
    </form>
    <hr>
    <h3 class="text-center text-muted">数据查询列表</h3>
    <table role="table" class="table">
        <tr>
            <th class="text-center">#</th>
            <th class="text-center">名称</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(list,index) in myData">
            <td>{{index+1}}</td>
            <td>{{list.name}}</td>
            <td>{{list.age}}</td>
            <td>
                <button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowindex=index,m=false">删除</button>
            </td>
        </tr>
        <tr v-show="myData.length==0">
            <td colspan="4">
                <p class="text-center text-muted">暂无数据……</p>
            </td>
        </tr>
        <tr v-show="myData.length!=0">
            <td colspan="4" class="text-right">
                <button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">删除全部</button>
            </td>
        </tr>
    </table>
    <!-- 模态框 弹出框 -->
    <div role="dialog" class="modal fade" id="layer" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">确定<span v-show="m">全部</span>删除吗？</h4>
                    <div class="text-right">
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                        <button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我做的时候引用了 bootstrap 的 js 文件，所以有些弹框效果是基于 bootstrap 的。关于 html 布局我就不说了，相信你们都是有基础的，我就从添加数据开始说。

data: {
    myData: [],
    username: "",
    ages: "",
    nowindex: 1,
    m: false
}

<label for="name">名称：</label>
<input type="text" class="form-control" name="name" id="name" ref="sele" placeholder="请输入名称" v-model="username">
<br>
<label for="sag">年龄：</label>
<input type="text" class="form-control" name="seg" id="seg" ref="sele" placeholder="请输入年龄" v-model="ages">
<br>
<div>
<button type="button" class="btn btn-primary" @click="addData()" value="添加">添加</button>

addData:function(){
if( this.$refs.sele.value==""){
	alert("请填满资料！")
}else{
      this.myData.push({
        name:this.username,
        age:this.ages
    });
    this.username="",
    this.ages=""
}
},

建两个变量 username、ages 用来存放 input 利用 v-model 传过来的名称和年龄，在通过点击添加触发 addData() 将收到值的两个变量添加到建的数组当中在清除两个变量。这样就形成了添加数据，那该如何删除添加后的数据呢？

<tr class="text-center" v-for="(list,index) in myData">
    <td>{{index+1}}</td>
    <td>{{list.name}}</td>
    <td>{{list.age}}</td>
    <td>
        <button class="btn btn-danger" data-toggle="modal" data-target="#layer" @click="nowindex=index,m=false">删除</button>
    </td>
</tr>

<div class="modal-header">
    <h4 class="modal-title">确定<span v-show="m">全部</span>删除吗？</h4>
    <div class="text-right">
        <button class="btn btn-primary" data-dismiss="modal">取消</button>
        <button class="btn btn-danger" data-dismiss="modal" @click="noindex(nowindex)">确定</button>
    </div>
</div>

data: {
    myData: [],
    username: "",
    ages: "",
    nowindex: 1,
    m: false
}

noindex:function(n){
    if(n==-1){
        this.myData = [];
    }else{
        this.myData.splice(n,1);
    }
}

其实很简单给个判断就好了，如果是删除单个的话，点击删除后将当前下标传给变量 nowindex，再将变量当参数传给 noindex（nowindex），最后 noindex 方法里面判断 nowindex 是多少，在使用 splice（n,1）删除在数组中第 n 个值。

<button class="btn btn-danger" @click="nowindex=-1,m=true" data-toggle="modal" data-target="#layer">删除全部</button>

删除全部直接将变量值赋 -1，判断如果 -1 就清空数组。

有公众号了，不定期推送热门前端技术文章！！！

Vue.js 快速入门

Vue 快速入门

以上是 vue 基本使用，接下来讲讲 vue-cli 的需要注意的格式，最后做个经典例子“TODOLIST”

相关帖子

随便看看

Vue.js 快速入门