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

印迹发布于:2019-3-24 1121

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.virplus.com/thread-228.htm
转载请注明:2019-3-24 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回