Vue.js快速入门-CSDN博客

如果本篇文章帮到了你，兄台何不留个言再走？什么！不想留言？不想留言也要点个赞吗，也算是缘分一场......什么！赞都不想点？管理员拿我的三十米大刀来！【左侧点击关注按钮，精彩好文不容错过】

本文链接：https://blog.csdn.net/qq_23994787/article/details/79236933

Vue.js简单教程

1.Vue.js简介

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.Vue.js 安装

1.在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 http://vuejs.org/js/vue.min.js

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

2. 使用 CDN 方法
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg： https://unpkg.com/vue/dist/vue.js , 会保持和 npm 发布的最新的版本一致。

3.简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue.js入门</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Vue 测试</h1>
            
            <div id="app">
                <div>{{message}}</div>
                <input type="text" v-model="message">
            </div> 

        </div>
    </div>
</body>
<!--下边引入-->

<script type="text/javascript">
       //创建实例   利用{{message}}取值    
       new Vue({ 
	    el:'#app',
	    data: {
	        message:'Luo Chen xi'
	    }
	});
 </script>
</html>

html是view层，app.js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。

改变其中的任何一层，另外一层都会改变。

通过{{value}}的形式就能取到value的值，并与value进行绑定。

改变input中的值时相应也改变了app.js中的message，从而{{message}}也得到改变。

4.常用的指令

1.v-model (v-model可用于一些表单元素,常见的input,checkbox,radio,select)

<select v-model="selected" multiple>
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

2.v-for (使用v-for这个指令就能完成数据渲染)

<tr v-for="book in books ">
   <td>{{book.id}}</td>
   <td>{{book.name}}</td>
   <td>{{book.author}}</td>
   <td>{{book.price}}</td>
</tr>

//在data里我们设置了两个数据book和book[] books
new Vue({
        el: '#app',
        data: {
            book: {
                id: 0,
                author: '',
                name: '',
                price: ''
            },
            books: [{
                id: 1,
                author: '曹雪芹',
                name: '红楼梦',
                price: 32.0
            }, {
                id: 2,
                author: '施耐庵',
                name: '水浒传',
                price: 30.0
            }, {
                id: '3',
                author: '罗贯中',
                name: '三国演义',
                price: 24.0
            }, {
                id: 4,
                author: '吴承恩',
                name: '西游记',
                price: 20.0
            }]
        }
 })

在数据还未加载完时是会有闪烁的情况出现，解决方法也很简单，使用v-cloak,然后定义css

[v-cloak] { display: none }

3.v-on (通过v-on完成事件处理与绑定)

为一个button绑定click事件

<button v-on:click="doSomething">doSomething</button>

//或者简写

<button @click="doSomething">doSomething</button>

为v-on传入事件参数,然后在vue的实例中声明doSomething这个方法就可以调用了

new Vue({
  el: '#app',
  methods: {
    doSomething: function () {
      /...../
    }
  }
})

用v-model绑定form

<div id="add-book">
     <legend>添加书籍</legend>
     <div class="form-group">
           <label for="">书名</label>
           <input type="text" class="form-control" v-model="book.name">
     </div>
     <div class="form-group">
            <label for="">作者</label>
            <input type="text" class="form-control" v-model="book.author">
     </div>
     <div class="form-group">
              <label for="">价格</label>
              <input type="text" class="form-control" v-model="book.price">
      </div>
      <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
 </div>

app.js中增加我们的addBook方法

methods: {
        addBook: function() {
            //计算书的id
            this.book.id = this.books.length + 1;
            this.books.push(this.book);
            //将input中的数据重置
            this.book = '';
        }
}

增加一个删除按钮

<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>

delBook方法

delBook:function(book){
       this.books.$remove(book);
}

vue.js为数组扩展了$remove方法，查找并删除我们作为参数传递过去的book

4.v-if/v-else/v-show （v-if用于条件判断，和v-else是一对）

<template v-if="book.id%2==0">
      <td class="text-right">
      ......
         <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
      .....
       </td>
  </template>
  <template v-else>
          .....
        <td class="text-right">
           <button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
          </td>
          ....
   </template>

<template>标签，用于包含多个元素，当元素只有一个时，直接在元素上用v-if即可

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持<template>标签。

5.过滤器（与Linux中的管道类似，vue.js使用的是 | ）

{{message | uppercase}}

输出message的大写了,过滤器也能串联在一起使用:

{{message | reverse | uppercase}}

这里reverse并不是内建的过滤器，我们可以用Vue.filter自定义:

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

过滤器支持接收参数，比较常用的是orderBy [param]和filterBy [param],现在我们为表格增加自定义排序的功能，为表头绑定click事件:

<th class="text-right" @click="sortBy('id')">序号</th>
 <th class="text-right" @click="sortBy('name')">书名</th>
 <th class="text-right" @click="sortBy('author')">作者</th>
 <th class="text-right" @click="sortBy('price')">价格</th>

想sortBy传递列的参数,定义sortBy和data:

data: {
    sortparam: ''
 },
methods:{
sortBy: function(sortparam) {
        this.sortparam = sortparam;
     }
}

添加过滤器:

 <tr v-for="book in books | orderBy sortparam">

6.计算属性

计算属性可以帮助我们完成一些复杂的逻辑计算，比如我们需要添加一个书的总价，在vue实例中添加computed:

new Vue({
    /.../
    computed: {
            sum: function() {
                var result = 0;
                for (var i = 0; i < this.books.length; i++) {
                    result = Number(this.books[i].price) + result;
                };
                return result;
            }
        },
     /.../
})

在app.html中使用插值表达式

{{sum}}

vue-resource

vue-resource作为vue插件的形式存在，通过 XMLHttpRequest 或 JSONP 发起请求并处理响应。在开发中也非常常见，现在我们用vue-resource来请求books:

var Vue = require('vue');
Vue.use(require('vue-resource'));

get
在vue中新增ready对象，当页面加载完成时就去请求:

new Vue({
    el: '#app',
    ready: function() {
        this.$http.get('book.json', function(data) {
            this.$set('books', data);
        }).error(function(data, status, request) {
            console.log('fail' + status + "," + request);
        })
    },
    data: {
        ....
        books:''
    }
});

这里将json格式的数据保存在book.json中,这段数据你可以直接使用JSON.stringify()得到：

[{"id":1,"author":"曹雪芹","name":"红楼梦","price":32},{"id":2,"author":"施耐庵","name":"水浒传","price":30},{"id":"3","author":"罗贯中","name":"三国演义","price":24},{"id":4,"author":"吴承恩","name":"西游记","price":20}]

接下来你需要将app.html中运行在一个服务器中，否则由于浏览器安全的限制，是无法直接读取的，如果你嫌麻烦可以用这个参数启动chrome。

.\chrome.exe --allow-file-access-from-files

如果你使用了npm，想要启动一个服务器就太简单了:

npm install http-server -g
//在当前目录
http-server
//然后访问localhost:8080/app.html

post

this.$http.post(url,postdata,function callback）

$http请求和jquery的ajax还是有点区别，这里的post的data默认不是以form data的形式，而是request payload。

解决起来也很简单：在vue实例中添加headers字段.

http: {
           headers: {'Content-Type': 'application/x-www-form-urlencoded'}
       }

另一种

Vue.http.options.emulateJSON = true;

Github 地址： https://github.com/pagekit/vue-resource

官网文档： https://cn.vuejs.org/v2/guide/

Vue.js简单教程

Vue.js简单教程

1.Vue.js简介

2.Vue.js 安装

3.简单使用

4.常用的指令

1.v-model (v-model可用于一些表单元素,常见的input,checkbox,radio,select)

2.v-for (使用v-for这个指令就能完成数据渲染)

3.v-on (通过v-on完成事件处理与绑定)

4.v-if/v-else/v-show （v-if用于条件判断，和v-else是一对）

5.过滤器 （与Linux中的管道类似，vue.js使用的是 | ）

6.计算属性

vue-resource

post

5.过滤器（与Linux中的管道类似，vue.js使用的是 | ）