VisYang's Studio.

Vue简单使用

Vue
2016/12/13

Vue简单使用

  • Vue简单介绍
    • Vue.js 是一套构建用户界面的渐进式框架。它产生的主要目的是为了开发大型单页面应用。
    • 它还支持组件化，也就是可以将页面封装成若干个组件，采用积木式进行编程，这样使页面复用性达到最高（支持组件化）。
  • MVVM框架设计结构
    • M:Model负责数据存储
    • V:View负责页面展示
    • VM:View Model负责业务逻辑处理，对数据处理后交给视图层展示

  • 下载

  • 首先引入vue模块

    1
    import Vue from 'vue'

  • 创建Vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
let vm = new Vue({
  // Vue作用域
  el: '#app',
  // 数据
  data: {},
  // 局部方法
  methods: {},
  // 局部过滤器
  filters: {},
  // 钩子函数，当生命周期达到某一阶段时自动执行之内的函数
  // beforeCreate 组件创建之前,此时无法访问vm中的
  // created 组件创建之后
  created: function(){
    console.log('created')
  },
  // beforeMount 组件插入到页面之前
  // mounted 组件插入到页面之后
  // beforeUpdate 页面数据改变之前
  // updated 页面数据改变之后
  // beforeDestroy 销毁数据之前
  // destroyed 数据销毁之后
  // 局部自定义指令
  // Vue不推荐直接进行DOM操作，如果需要操作，可以在自定义指令中完成
  directives: {
    // 设置指令的名字，需要操作DOM，值应该是一个方法，但绑定DOM需要确认DOM是否加载完成，此时需要使用钩子函数，所以要根据钩子函数的状态设置绑定数据，所以值是一个对象，当处于什么钩子函数状态下绑定这个方法
    'focus': {
      // 钩子函数 inserted 被绑定元素插入父节点时调用
      // 钩子函数的参数：el自定义属性所在的元素，binding自定义指令传的值 vnode oldVnode
      inserted: function(el, binding, vnode, oldVnode){
        console.log(el)
        console.log(binding)
      }
    }
  },
  // 计算属性:处理复杂逻辑数据运算
  // computed中的方法可以监视data中的值，当data中的值改变时自动调用使用该值的方法
  // 计算属性会缓存计算的结果，下次使用就不用从新计算了
  computed: {
    // 属性是名字，处理逻辑是在做一件事情，所以值是一个方法，并有一个返回值
    'reverse': function(){
      return this.msg.split('').reverse().join('')
    }
  },
  // 组件
  components: {},
  // 监听器 vue实例的属性
  watch: {
    // 监听data中的msg属性，参数是新值和旧值
    'msg': function (newValue, oldValue) {
      console.log(a);
      console.log(b);
      // 监听data中的msg
    }
  }
})
  • 全局组件
    有局部组件，自然有全局组件，以全局组件为例，看下全局设置方法
    1
    2
    3
    4
    <div v-app="app">
      <!-- 父组件给子组件传值，绑定在一个属性上 -->
      <my-button :title="abc"></my-button>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue.component('myButton', {
  template: '<button @click="btnClick">{{title}}{{count}}</button>',
  // 当组件需要获取数据时，需要一个props属性
  props:['title']
  // 每个组件都需要维护自己的作用域，所以data的值是一个函数返回值
  data: function(){
    return{
      count: 0
    }
  },
  methods:{
    btnClick: function(){
      this.count++
    }
  }
})

Vue指令

  • 什么是Vue指令？
    在html标签内部以v-形式表示的就是Vue指令

  • 三种展现数据的方式

    • 插值表达式
      插值表达式中除了null和undefined都可以展现在页面上，但是所有内容都是以字符串形式输出,插值表达式中可以进行简单的运算和使用一些不改变原数据的方法，js中的关键字不能再插值运算符中使用
1
2
3
4
<body v-app="#app">
  <!-- 从Vue实例中的data中提取数据 -->
  {{a}}
</body>

后面事例共用下面的Vue实例，并且作用域都在body身上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let vm = new Vue({
  el:'body',
  data:{
    msg:'hello',
    abc:'按钮',
    a:'哈哈哈',
    b:<p>哈哈哈</p>,
    isRed:'red',
    classA: 'red',
    classB: 'yellow',
    styleA: {fontSize:'15px'},
    list: [1,2,3,4,5],
    ...
  },
  // 挂载路由
  router,
  methods:{
    dothis(){
      console.log('哈哈哈')
    }
  }
})

  • v-text=’a’
    同插值表达式，插值表达式是v-text的缩写形式，他们唯一的不同之处是:
    当数据传输慢时，插值闪烁问题
1
2
3
<div v-text="a"></div>
<!-- 解决闪烁问题 -->
<div v-cloak>{{a}}</div>
  • v-html
    可以使数据以html格式来展现到页面上,以此形式展现的数据会替换原有内容
    1
    <div v-html="b"></div>

  • v-on 事件绑定
    v-on:可以缩写成@: 

    1
    2
    <button v-on:click="dothis()">点点点</button>
    <button @:click="dothis()">点点点</button>

  • v-bind 绑定属性
    可以简写成 :属性 的形式

    1
    2
    3
    <input type="text" v-bind:value="a">
    <div :class="{classA, classB}" ></div>
    <div :style="[styleA, {styleB, styleC}]"></div>

  • v-model
    双向数据绑定,作用于有value的标签,当页面数据变化时data中对应数据也变化，data中对应数据变化时，页面中数据也会发生变化

    1
    <input type="text" v-model="a">

  • v-show
    控制元素显示隐藏,其值是布尔值

  • v-if v-else
    可以实现切换显示

  • v-for
    可以实现渲染列表, 还要在v-for所在标签加上:key=”唯一值”,可以提高渲染性能

    1
    2
    3
    <ul v-for="item in list" :key="index">
      <li>{{ item }}</li>
    </ul>

  • 特殊特性

    • ref
      如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，使用$refs在父组件中获取
      1
      <p ref="p">hello</p>

路由

对于大多数单页应用，都推荐使用官方支持的vue-router库

  • 安装 npm i vue-router
  • 官网=>戳我！
  • 引入import VueRouter from 'vue-router'
  • 引用组件
    • import home from '../components/Home/home.vue'

  • 创建路由对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // js
    const User = {
      props: ['id'],
      template: '<div>{{ id }}</div>'
    }
    // 创建路由对象
    let router = new VueRouter({
      // 激活样式的类名为
      linkActiveClass: 'mui-active',
      // 配置路由
      routes:[
        // 路由重定向
        {path: '/', redirect: 'home'},
        // 路由可以设置名字，路径，meta         组件
        // $router.params.id可以获取/:后面id的值
        // props设置为true时他就会把$router.params下所有的属性挂载到组建的实例上，在需要应用的实例中设置props:['xxx']获取之后就可以使用了，这就是使用props 为组件和路由解耦
        {path: '/home', meta: {title: '首页'}, component: home},
        {name: 'buyDetail', path: '/buy/:id', component: buyDetail, props: true}
      ]
    })

  • 在页面中渲染

    1
    2
    3
    4
    5
    <!-- html -->
    <!-- 跳转页面 -->
    <router-link to="/home">首页</router-link>
    <!-- 渲染位置 -->
    <router-view></router-view>

  • vue-router props解耦
    在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的url上使用，限制了其灵活性。
    使用props将组件和路由解耦：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const User = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
    }
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User, props: true }
        // 对于包含命名视图的路由，你必须分别为每个命名视图添加props选项：
        {
          path: '/user/:id',
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })

    这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。
    如果props被设置为true，route.params将会被设置为组件属性。
    当跳转页面时，params可以传递 id 值

CATALOG
  1. 1. Vue简单使用
    1. 1.1. Vue指令
    2. 1.2. 路由
Archive Tag
Total : 17
2016
2015
demo ajax cookie session Canvas git 定时器 js 插件 表单 this hexo 博客 代码风格 jQuery h5 css3 构造函数 artTemplate 跨域 Vue webpack