Vue.js快速入门教程-资讯-Savh.Cn

Vue.js快速入门教程教程 Html

savh 1384

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单。

Vue.js是一个轻巧、高性能、可组件化的MVVM库。Vue 的核心库只关注视图层，并且非常容易学习，同时拥有非常容易上手的API（中英文都有提供）

Vue快速入门

准备：

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

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

示例：

<!DOCTYPE html>
<html>
<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>
        <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。

1. el:声明vuejs管理的边界，类似于angular的ng-app，把数据绑定给谁。上面的例子中将数据绑定给了#app。

2. data:专门存储一些数据的属性，数据一定是对象格式。上面的例子中给message赋值hello vue.js!

3. methods:专门放置我们的事件的方法

4. 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属性里面，使得实现双向数据绑定更加容易。

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

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

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

2. 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' }
    ]
  }
})

1.Learn JavaScript

2.Learn Vue

3.Bulid sonething awesome

3. v-show:元素会始终渲染并保持在dom中，并且安全性没有v-if高，因为v-show 用法和v-if相同，只是v-show将元素display设置成none，并不是将元素直接移除

4. v-else:元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

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

5. 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>

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

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

也有缩写“@”

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

效果是一样的

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

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

结果：

See more
177

8. stop:阻止事件冒泡

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

9. prevent:阻止默认事件

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

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

@click.felf="show()"

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

@click.capture="show()"

12. 键盘事件:

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

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

13. 过滤器：

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

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

1.vue对象里不能有缩进，一般缩进用两个空格代替

2.冒号后面要跟一个空格

3.逗号后面也要跟一个空格

4.存放链接需要使用require

5.数据只能用单引号包着

{
    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 id="todu">
    <h1>TODOLIST</h1>
    <form role="form">
        <label for="name">名称：</label>
        <input type="text" name="name" id="name" ref="sele" placeholder="请输入名称" v-model="username">
        <br>
        <label for="sag">年龄：</label>
        <input type="text" 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">
        <tr>
            <th>#</th>
            <th>名称</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr 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">
                <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>
            <div>
                <div>
                    <h4>确定<span v-show="m">全部</span>删除吗？</h4>
                    <div>
                        <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" name="name" id="name" ref="sele" placeholder="请输入名称" v-model="username">
<br>
<label for="sag">年龄：</label>
<input type="text" 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 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>
    <h4>确定<span v-show="m">全部</span>删除吗？</h4>
    <div>
        <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就清空数组。

参考文档：

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档:
https://cn.vuejs.org/v2/guide/index.html https://cn.vuejs.org/v2/guide/syntax.html

http://www.savh.cn/thread-228.htm

转载请注明:Savh.Cn 发表

Vue.js快速入门教程教程Html