Vue.js学习笔记

一、安装 Vue.js

1. 安装node.js下载相应版本的 node.js，下载地址：https://nodejs.org/en/download/。
2. 安装完成后，cmd调出命令面板，输入 node -v回车，显示相应版本则安装成功，node环境已经安装完成。
3. 安装cnpm，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以还需要npm的国内镜像---cnpm。在命令行中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org，大约需要3分钟。
4. 安装全局vue-cli脚手架，用于帮助搭建所需的模板框架。输入命令：cnpm install vue-cli -g回车等待完成。 
5. 创建项目，先选定目录，然后在命令行中转到选定目录，如把项目新建在e盘下的vue文件夹中，则输入 e:，然后输入cd vue，再输入命令 vue init webpack+项目文件夹名称，接着会让用户输入几个基本的选项，如项目名称，描述等信息，不想填就回车默认。
6. 安装项目依赖包，先输入 cd+项目名，然后输入 cnpm install 等待安装，安装完成之后，项目文件夹中下会多出一个node_modules文件夹，也就是项目需要的依赖包资源。
7. 测试环境搭建完成后，在cmd里输入 cnpm run dev (在localhost启动测试服务器)，项目运行成功后，浏览器打开 http://localhost:8080/，就可以成功出现界面。【cnpm run build 生成上线目录（部署）】

二、Vue.js 的语法

src文件夹是开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

• assets: 放置一些图片，如logo等。
• components: 目录里面放了一个组件文件，可以不用。
• App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
• main.js: 项目的核心文件

1. 插值

• 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：      
• 使用 v-html 指令用于输出 html 代码。   

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

       2. 指令

       （1）条件

• v-if 
• v-else 
• v-else-if

<div id="app">
    <div v-if="number === '1'">
      1
    </div>
    <div v-else-if="number === '2'">
      2
    </div>
    <div v-else-if="number === '3'">
      3
    </div>
    <div v-else>
      Not 1/2/3
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    number: 'C'
  }
})
</script>

（2）循环

用v-for来绑定数据到数组，以渲染一个列表

<div id="app">
  <ol>
    <li v-for="item in items">
      {{ item.week }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { week: 'Monday' },
      { week: 'Tuesday' },
      { week: 'Wednesday' }
    ]
  }
})
</script>

v-for 还可以通过一个对象的属性来迭代数据，此时可以向v-for传入三个参数，第一个参数为键值，第二个参数为键名，第三个参数为索引。如下

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

（3）绑定样式

用v-bind来设置样式属性

1. 在 v-bind:class 设置样式

• 绑定一个对象，如根据判断 isActive 的布尔值来显示class。（在样式表中写 .active）

<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

<div class="static" v-bind:class="{ 'class1': isActive, 'class2': hasError }"> <!- -动态选择样式 -->
</div>

• 直接绑定数据里的一个对象

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      'class1': true,
      'class2': true
    }
  }
})
</script>

• 把一个数组传给 v-bind:class

<div id="app">
	<div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'class1',
    errorClass: 'class2'
  }
})
</script>

2. 在 v-bind:style 直接设置样式

• 直接绑定样式

<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>

• 直接绑定数据里的一个对象

<div id="app">
  <div v-bind:style="class1">Vue教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    class1: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

• 把一个数组传给 v-bind:style

<div id="app">
  <div v-bind:style="[class1, class2]">Vue教程</div>
</div>

（4）绑定事件

用v-on指令来绑定事件，在方法中写入事件。

<div id="app">
  <button v-on:click="greet">Greet</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function (event) {
      alert('Hello ' + this.name + '!')
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
</script>

（5）绑定表单

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: 'Vue菜鸟教程'
  }
})
</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>

此外我们还可以给v-model添加修饰符

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<!-- 自动将用户的输入值转为 Number 类型 -->
<input v-model.number="age" type="number">

<!-- 自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg"