vue2.0 入门

安装

1，安装完成node，node有自带的npm，可以直接在cmd中，找到nodeJs安装的路径下，进行命令行全局安装vue-cli。（npm install –global vue-cli）

2，安装后，检查是否安装成功（显示版本则安装成功）。（vue -V）

3，使用vue建一个项目名叫“my-project”。（vue init webpack my-project）

—-注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

—-webpack-simple 相对简单的，它根目录下才有个 webpack.config.js。

4，注意：项目建立过程中，有如下选择，选择NO。（该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，可以避免不必要的麻烦）

—-ESLint规范建议开启，加强代码规范

5，建立项目后，安装项目依赖npm install

6，安装成功，项目目录下多出一个node_modules文件夹

7，进入项目目录文件夹（my-project）中，就可以使用vue进行开发啦

8，使用npm run dev，便可以打开本地服务器实时查看效果（localhost:8080）

9，退出监听，可以直接Ctrl+C，选择Y。

（安装vetur）

目录结构

导入jquery和bootstrap

安装jquery

npm install jquery

配置jquery

将jquery以插件打包，需要为webpack的plugins进行插件设置。

在build/webpack.base.conf.js文件中，在整个配置对象的末尾增加plugins配置。

在webpack.base.conf.js中的配置项，可以在dev和build出来的pro版本中都有效。

下面的配置其实就是变量名的真正指向设置，这样，在页面中对jquery的各种名字的调用就会有效，否则bootstrap跑不起来。

  plugins: [    new webpack.ProvidePlugin({      $: "jquery",      jQuery: "jquery",      "windows.jQuery": "jquery"    })  ]

安装bootstrap

npm install bootstrap

引用bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用，注意这里的路径，不在是从src/assets加载，而是换成了从node_modules加载。

import 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min.js'

配置bootstrap

因为bootstrap除了js和css文件外，还有字体文件需要一并打包，默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置，所以无需修改

基础语法

文本

{{}}

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

html

使用 v-html 指令用于输出 html 代码：

<div id="app">    <div v-html="message"></div></div><script>new Vue({  el: '#app',  data: {    message: '<h1>菜鸟教程</h1>'  }})</script>

属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">  <br><br>  <div v-bind:class="{'class1': class1}">    directiva v-bind:class  </div></div><script>new Vue({    el: '#app',  data:{      class1: false  }});</script>

表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">    {{5+5}}<br>    {{ ok ? 'YES' : 'NO' }}<br>    {{ message.split('').reverse().join('') }}    <div v-bind:id="'list-' + id">菜鸟教程</div></div><script>new Vue({  el: '#app',  data: {    ok: true,    message: 'RUNOOB',    id : 1  }})</script>

条件和循环

条件语句实例

v-if

<div id="app">    <div v-if="type === 'A'">      A    </div>    <div v-else-if="type === 'B'">      B    </div>    <div v-else-if="type === 'C'">      C    </div>    <div v-else>      Not A/B/C    </div></div><script>new Vue({  el: '#app',  data: {    type: 'C'  }})</script>

循环语句实例

v-for

<template><div id="loop"><ul><li v-for='site in sites'>{{ site.name }}</li></ul></div></template><script>export default {  name: 'loop',  data () {    return {      sites: [        { name: 'Baidu' },        { name: 'Google' },        { name: 'Taobao' }      ]    }  }}</script>

若遇到“[vue-language-server] Elements in iteration expect to have ‘v-bind:key’ directives.”问题：Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。更改vetur配置 vscode->首选项->设置->搜索（vetur）

注意

1.一个组件下只能有一个并列的 div，可以这么写，所以复制官网示例的时候只要复制 div 里面的内容就好。

但是不能这样写:

2.数据要写在 return 里面而不是像文档那样子写

错误的写法:

事件

事件监听可以使用 v-on 指令：

<div id="app">  <button v-on:click="counter += 1">增加 1</button>  <p>这个按钮被点击了 {{ counter }} 次。</p></div><script>new Vue({  el: '#app',  data: {    counter: 0  }})</script>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

<div id="app">   <!-- `greet` 是在下面定义的方法名 -->  <button v-on:click="greet">Greet</button></div><script>var app = new Vue({  el: '#app',  data: {    name: 'Vue.js'  },  // 在 `methods` 对象中定义方法  methods: {    greet: function (event) {      // `this` 在方法里指当前 Vue 实例      alert('Hello ' + this.name + '!')      // `event` 是原生 DOM 事件      if (event) {          alert(event.target.tagName)      }    }  }})// 也可以用 JavaScript 直接调用方法app.greet() // -> 'Hello Vue.js!'</script>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="app">  <button v-on:click="say('hi')">Say hi</button>  <button v-on:click="say('what')">Say what</button></div><script>new Vue({  el: '#app',  methods: {    say: function (message) {      alert(message)    }  }})</script>

表单

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

<div id="app">  <p>input 元素：</p>  <input v-model="message" placeholder="编辑我……">  <p>消息是: {{ message }}</p>  <p>textarea 元素：</p>  <p style="white-space: pre">{{ message2 }}</p>  <textarea v-model="message2" placeholder="多行文本输入……"></textarea></div><script>new Vue({  el: '#app',  data: {    message: 'Runoob',    message2: '菜鸟教程\r\nhttp://www.runoob.com'  }})</script>

复选框

<div id="app">  <p>单个复选框：</p>  <input type="checkbox" id="checkbox" v-model="checked">  <label for="checkbox">{{ checked }}</label>  <p>多个复选框：</p>  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">  <label for="runoob">Runoob</label>  <input type="checkbox" id="google" value="Google" v-model="checkedNames">  <label for="google">Google</label>  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">  <label for="taobao">taobao</label>  <br>  <span>选择的值为: {{ checkedNames }}</span></div><script>new Vue({  el: '#app',  data: {    checked : false,    checkedNames: []  }})</script>

单选框

<div id="app">  <input type="radio" id="runoob" value="Runoob" v-model="picked">  <label for="runoob">Runoob</label>  <br>  <input type="radio" id="google" value="Google" v-model="picked">  <label for="google">Google</label>  <br>  <span>选中值为: {{ picked }}</span></div><script>new Vue({  el: '#app',  data: {    picked : 'Runoob'  }})</script>

select列表

<div id="app">  <select v-model="selected" name="fruit">    <option value="">选择一个网站</option>    <option value="www.runoob.com">Runoob</option>    <option value="www.google.com">Google</option>  </select>  <div id="output">      选择的网站是: {{selected}}  </div></div><script>new Vue({  el: '#app',  data: {    selected: ''   }})</script>

组件

在/src/components文件夹下创建一个新的组件，例如：Loop.vue

<template><div id="loop"><ul><li v-for='site in sites'>{{ site.name }}</li></ul></div></template><script>export default {  name: 'loop',  data () {    return {      sites: [        { name: 'Baidu' },        { name: 'Google' },        { name: 'Taobao' }      ]    }  }}</script>

使用组件：
S1:引入。在<script></script>标签内的第一行写

import Loop from ‘@/components/Loop’

S2:注册。在<script></script>标签内的 data 代码块后面加上 components: { firstcomponent }。

export default {  data () {    return {      msg: 'Hello Vue!'    }  },  components: { Loop }}

S3:使用。在<template></template>内加上<loop></loop>

ajax

vue-resource是Vue提供的体格http请求插件，如同jQuery里的$.ajax，用来和后端交互数据的。
在使用时，首先需要安装vue-resource插件

1.在项目跟目录上安装：

npm install vue-resource  

2.引入resource插件

import VueResource from 'vue-resource';  Vue.use(VueResource)  

3.发送请求：

this.$http.get("http://www.vrserver.applinzi.com/aixianfeng/apihome.php").then(function(res){          console.log(res)      })  

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])head(url, [options])delete(url, [options])jsonp(url, [options])post(url, [body], [options])put(url, [body], [options])patch(url, [body], [options])

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;