Vue.js 学习笔记

vue.js学习笔记

1. 目录结构

   build	项目构建(webpack)相关代码
   config	配置目录，包括端口号等。我们初学可以使用默认的。
   node_modules	npm 加载的项目依赖模块
   src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
   static	静态资源目录，如图片、字体等。
   test	初始测试目录，可删除
   .xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
   index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
   package.json	项目配置文件。
   README.md	项目的说明文档，markdown 格式

2. 模板语法

   数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

   
   
   
   
   
   
   
   
   
     
   {{ message }}
   
   ​
   
   
   

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

    

3. 条件语句

   v-if 指令

   在元素 和 template 中使用 v-if 指令：

   
       
   现在你看到我了
       
   
       
   

   可以用 v-else 指令给 v-if 添加一个 "else" 块：

   
       
   
         Sorry
       
       
   
         Not sorry
       
   
       
   

   v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

   
       
   
         A
       
       
   
         B
       
       
   
         C
       
       
   
         Not A/B/C
       
   
       
   

    

4. 循环语句

   v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

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

   
     
   
       
   
         {{ site.name }}
       
     
   
    
   

   v-for 可以通过一个对象的属性来迭代数据：

   
     
   
       
   
       {{ value }}
       
     
   
    
   

   也可以提供两个参数或三个参数：

   //三个参数，两个参数去掉一个即可
   
     
   
       
   
        {{ index }}. {{ key }} : {{ value }}
       
     
   

    

5. 计算属性

   计算属性关键词: computed。

   计算属性在处理一些复杂逻辑时是很有用的。

   可以看下以下反转字符串的例子：

   
   
   
   
   
   
   
   
   
     {{ message.split('').reverse().join('') }}
   
   ​
   
   
   

   接下来我们看看使用了计算属性的实例：

   
     
   原始字符串: {{ message }}
     
   计算后反转字符串: {{ reversedMessage }}
   
    
   

    

6. 监听属性

   我们可以通过 watch 来响应数据的变化。

   以下实例通过使用 watch 实现计数器：

   
       
   计数器: {{ counter }}
       点我
   
   

   以下实例进行千米与米之间的换算：

   
       千米 : 
       米 : 
   
   
   

    

7. 样式绑定

   class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

   Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

   
   
   
   
   
   
   
   
   
   
     
   
   
   ​
   
   
   

    

8. 事件处理器

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

    

9. 表单

   
   
   
   
   
   
   
   
     增加 1
     
   这个按钮被点击了 {{ counter }} 次。
   
   ​
   
   
   

    

10. 组件

11. 自定义指令

12. 路由

13. 创建VUE项目报

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1npm ERR! [email protected] install: node install.js

    这个错时，原因一般是下载源被封了，我们连接淘宝的下载源下载：

    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver