Vue.js快速入门+项目实战（源码）

Vue.js电影网站项目 github 链接（如果觉得有用记得start哦~）: 项目源代码链接

 

目录

前言

安装

Vue.js

1.Vue.js主要特性

2.Vue.js实例

3.Vue.js路由

4.Vue.js模板

5.条件渲染

6.列表渲染

7.事件处理

ES6常用语法

使用Babel进行ES6的转化

WebPack

构建第一个Vue.js项目

Vue.js电影网站项目

---

前言

开发模式对比

• MVC模式（JavaEE中的SSH框架，ASP.NET中的ASP.NET MVC框架）
• MVP模式（ASP.NET中的Web Forms）
• MVVM模式（Vue.js，WPF，AngularJS）

---

安装

1.vue.js

• 下载js文件，
  • 注册全局组件：

   2）模板

  vue.js使用基于HTML的模板语法，允许开发者将DOM元素与底层vue.js实例中的数据相绑定。

  3）响应式设计

  响应式网络设计是为了给移动设备提供更好的体验，整合从桌面到手机的各种屏幕尺寸和分辨率，使网页适应不同分辨率的屏幕。响应式界面的四个层次：

  • 同一页面在不同大小和比例上看起来都应该是舒适的；
  • 同一页面在不同分辨率上看起来都应该是合理的；
  • 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
  • 同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

  4）过渡效果

  vue.js的过渡效果可以让我们的页面元素在出现和消失时实现过渡。vue.js在插入、更新或移除DOM时，提供了多种方式的应用过渡效果，包括：

  • 在CSS过渡和动画中自动应用CSS
  • 配合使用第三方CSS动画库，如Animate.css
  • 在过渡钩子函数中使用JavaScript之间操作DOM
  • 配合使用第三方JavaScript动画库，如Velocity.js

  vue.js提供了transition的封装组件，在下列情形中可以给任何元素和组件添加entering/leaving过渡：

  • 条件渲染（使用v-if）
  • 条件展示（使用v-show）
  • 动态组件
  • 组件根节点

  简单而言就是，你可以使用vue的组件，结合css的动画(animation),过渡(transition),或者javascript操作DOM来让你的元素或者组件动起来。而在引用css和javascript中，你可以自己写，也可以利用现成的css或者javascript的第三方库。

  页面交互举例，当单击按钮后，hello Vue会渐变地消失，再次单击后又会渐变地显示：

      
      
  
          
              click
          
          
              
  hello Vue
          
      
      

  5）单文件组件

  为了更好适应复杂的项目，vue.js支持以.vue为扩展名的文件来定义一个完整组件，用以替代使用Vue.component注册组件的方式。

  2.Vue.js实例

  1）构造器

  对于Vue.js项目来说，每个应用的起步都需要使用Vue.js的构造函数创建一个根实例，如下：

  // 建立Vue实例
  var vm = new Vue({
      // 选项
  })

  2）实例的属性和方法

  每个Vue.js实例在被创建之前都要经过一系列的初始化过程，在初始化过程中加入一些data属性，即表示此实例的一些响应事件或数据属性等，如：

  var data = { a:1 }
  var vm = new Vue({
      el: "#example",
      data: data
  })
  
  vm.$data === data;    // true
  
  vm.$watch('a', function(newValue, oldValue){
      // 这个回调将在 vm.a 改变后调用
  })

  3）生命周期、钩子函数

  钩子函数主要对于某个实例事件发生后需要响应已经预设好的代码。钩子的this指向调用它的Vue.js实例

  3.Vue.js路由

  通过对不同路由路径的定义，可以将Vue.js中可供访问的路径标明。一般采用一个路径对应一个功能的形式来定义页面

  1）安装vue-router（提供了Vue.js的路由控制和管理）

  • 直接引入CDN

          

  • npm安装

          npm install vue-router

  2）动态路由匹配 

  动态路由匹配经常需要把某种模式匹配到的所有路由全都映射到同一个组件上。例如，所有ID不同的用户都要使用User组件来渲染：

  export default new Router({
      routes:[
      {
          path: '/user/:id',
          component: User
      }
      ]
  })

   一个路径的定义参数使用冒号进行连接，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件中使用

  3）嵌套路由

  export default new Router({
      routes:[
      {
          path: '/user/:id',
          component: User,
          children: [
              {
               path: 'vip',
               component: VIP
              }
          ]
      }
      ]
  })

  • 访问 /user/xxx/ 时，页面不会渲染任何东西，因为没有匹配到合适的子路由
  • 访问 /user/xx/vip 时，则会正常渲染

  4）编程式导航

         支持用户在具有路由功能的应用中（单击）导航，通过to属性指定目标地址，默认渲染成标签

  • router.push(location, onComplete?, onAbort?)

         这个方法会向history栈添加一个新的记录，当点击“后退”按钮时，则回到之前的URL 

  router.push('home')    // 参数：字符串路径
  router.push({ path: 'home' })    // 参数：对象
  router.push({ name: 'user', params: { userId: 123 }})    // 参数：命名的路由
  router.push({ path: 'register', query: { plan: 'private'}})    // 带查询参数：/register?plan=private
  router.push({ path: 'user', params: { userId } })    // 如果提供了path参数，params传递的参数会被忽略：/user

  •  router.replace(location, onComplete?, onAbort?)

         此方法和router.push()很像，唯一不同的是，它不会向history添加新纪录，而是替换掉当前的history记录

  •  router.go(n)

          n是一个整数，表示在history记录中向前或后退多少步，类似window.history.go(n)

  router.go(1)    // 在浏览器记录中前进一步，等同于 history.forward()
  router.go(-1)   // 在浏览器记录中后退一步，等同于 history.back()
  router.go(100)   // 如果记录不够用，则自动失效

  5）命名视图

  一个工程可能需要同时（同级）展示多个视图，页面不复杂时，可以用视图的别名

      // 未指定名称，为默认组件
  
  
  

   6）重定向和别名

  •  重定向

  const router = new VueRouter({
      routes: [
          { path: "/a", redirect: "/b" }            
      ]
  })
  
  const router = new VueRouter({
      routes: [
          { path: "/a", redirect: { name: 'foo' } }            
      ]
  })
  
  // 动态返回重定向目标
  const router = new VueRouter({
      routes: [
          { path: "/a", redirect: to => {
              // return 重定向的字符串路径/路径对象
          }}            
      ]
  })

  • 别名

        例如, /a的别名是/b，意味着用户访问/b时，URL会保持会/b，但路由匹配则为/a：

  const router = new VueRouter({
      routes: [
          { path: "/a", component: A, alias: "/b" }            
      ]
  })

  7）路由组件传递参数

  // UserProps.vue
  
  
  
  
  //index.js
  {
      path: '/UserProps/:id',
      component: UserProps,
      props: true
  }

  8）history模式

  const router = new VueRouter({
      mode: history,
      routes: [...]
  })

  4.Vue.js模板

  1）文本

  // 无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
  Message: {{ msg }}
  // 一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定
  这个将不会改变: {{ msg }}    

  2）HTML

  // 为了输出真正的 HTML，你需要使用 v-html 指令：
  Using v-html directive: 

  你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 

  3） JavaScript 表达式

  {{ number + 1 }}
  {{ ok ? 'YES' : 'NO' }}
  {{ message.split('').reverse().join('') }}
  
  // 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
  
  
  {{ var a = 1 }}
  
  {{ if (ok) { return message } }}

  模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。 

  4）指令

  指令 (Directives) 是带有 v- 前缀的特殊特性。

  现在你看到我了
  // 这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 
   元素。

  5）参数

  一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

  ...
  // 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
  
  ...
  // 在这里参数是监听的事件名。

  5.条件渲染

  1）v-if, v-else-if, v-else

   A 
   B 
   C 
   Not A/B/C 

  用 key 管理可复用的元素 

  2） v-show

  Hello!

  不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 

  注意：v-show 不支持