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 代码。   

    
{{ message1 }}
    


    

       2. 指令

       （1）条件

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

    

      1
    
    

      2
    
    

      3
    
    

      Not 1/2/3
    

    

（2）循环

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

  

    

      {{ item.week }}
    
  

 

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

     {{ index }}. {{ key }} : {{ value }}

（3）绑定样式

用v-bind来设置样式属性

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

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

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

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

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

• 直接绑定样式

	
菜鸟教程

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

  
Vue教程

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

  
Vue教程

（4）绑定事件

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

  Greet

 

（5）绑定表单

v-model 会根据控件类型自动选取正确的方法来更新元素。

• 输入框

  
input 元素：
  
  
消息是: {{ message }}
    
  
textarea 元素：
  
{{ message2 }}
  

 

• 复选框

  
单个复选框：
  
  {{ checked }}
    
  
多个复选框：
  
  Runoob
  
  Google
  
  taobao
  

  选择的值为: {{ checkedNames }}

 

• 单选按钮

  
  Runoob
  

  
  Google
  

  选中值为: {{ picked }}

 

• select列表

  
    选择一个网站
    Runoob
    Google
  
 
  

      选择的网站是: {{selected}}
  

 

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