小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
Vue.js简单使用及个人心得
  • 首页 > 前端 > Vue
  • 作者:小昱
  • 2017年6月21日 16:07 星期三
  • 浏览:186
  • 字号:
  • 评论:0
  • 一、引入vue.js

    可以下载使用,也可以引入对应的CDN,如:

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    或者

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    或者

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

     

    二、基础概念

    2.1 模板语法 {{ }}

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

    eg:

    <div id="app">
      <p>{{ message }}</p>
    </div>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })

    2.2 绑定到元素内容 v-html

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

    <div id="app">
        <div v-html="message"></div>
    </div>
    new Vue({
      el: '#app',
      data: {
        message: '<h1>hello</h1>'
      }
    })

    2.3 属性绑定 v-bind

    HTML 属性中的值应使用 v-bind 指令。

    以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类

    <div id="app">
      <div v-bind:class="{'class1': class1}">
        directiva v-bind:class
      </div>
    </div>
    .class1{
      background: #444;
      color: #eee;
    }
    new Vue({
      el: '#app',
      data:{
        class1: false
      }
    });

    2.4 表达式

    Vue.js 都提供了完全的 JavaScript 表达式支持。

    <div id="app">
      {{5+5}}<br>
      {{ ok ? 'YES' : 'NO' }}<br>
      {{ message.split('').reverse().join('') }}
      <div v-bind:id="'list-' + id">Hello</div>
    </div>
    new Vue({
      el: '#app',
      data: {
        ok: true,
        message: 'hello',
        id : 1
      }
    })

    2.5 指令 v-xxx

    指令是带有 v- 前缀的特殊属性。

    指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
          <h1>hallo</h1>
        </template>
    </div>
    new Vue({
      el: '#app',
      data: {
        seen: true,
        ok: true
      }
    })

    2.6 处理用户输入 v-model

    在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

    <div id="app">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello!'
      }
    })

    2.7 参数 v-bind:xxx

    参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性

    <div id="app">
        <pre><a v-bind:href="url">Hello</a></pre>
    </div>
    new Vue({
      el: '#app',
      data: {
        url: 'http://www.xiaoyulive.top'
      }
    })

    2.8 事件 v-on:xxx

    按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。

    以下实例在用户点击按钮后对字符串进行反转操作

    <div id="app">
        <p>{{ message }}</p>
        <!-- <button v-on:click="reverseMessage">反转字符串</button> -->
        <button :click="reverseMessage">反转字符串</button>
    </div>
    new Vue({
      el: '#app',
      data: {
        message: 'Test!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

    2.9 过滤器 filters  |

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。

    1 由"管道符" | 指示

    2 过滤器函数接受表达式的值作为第一个参数。

    3 过滤器可以串联

    <div id="app">
      {{ message | capitalize | addprefix('(^_^)') }}
    </div>
    new Vue({
      el: '#app',
      data: {
        message: 'quanzaiyu'
      },
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        },
        addprefix: function(value, arg){
          arg = arg ? arg : '^_^'
          return "Hello " + value + arg + " !"
        }
      }
    })

    2.10 属性与方法

    var data = { a: 1 }
    var vm = new Vue({
      el: '#app',
      data: data
    })
    
    var flag = vm.a === data.a
    console.log("vm.a === data.a :\t" + flag)  // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    console.log("vm.a :\t" + vm.a)
    console.log("data.a :\t" + data.a)
    
    console.log("==========================");
    data.a = 3
    console.log("vm.a :\t" + vm.a)
    console.log("data.a :\t" + data.a)
    
    console.log("==========================");
    flag = vm.$data === data
    console.log("vm.$data === data :\t" + flag)  // -> true
    console.log("vm.$data.a :\t" + vm.$data.a);
    
    console.log("==========================");
    flag = vm.$el === document.getElementById('app')
    console.log("vm.$el === document.getElementById('example') :\t" + flag)  // -> true
    
    // $watch 是一个实例方法
    vm.$watch('a', function (newVal, oldVal) {
      // 这个回调将在 `vm.a`  改变后调用
      console.log("vm.a改变了")
    })

    三、语句

    3.1 条件语句

    v-if...v-else-if...v-else

    v-show

    例1

    <div id="app">
      <div v-if="type === 'A'">
        A
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else-if="type === 'C'">
        C
      </div>
      <div v-else>
        Not A/B/C
      </div>
    </div>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })

    例2

    <div id="app">
        <h1 v-show="ok">Hello!</h1>
    </div>
    new Vue({
      el: '#app',
      data: {
        ok: true
      }
    })

    3.2 循环语句 v-for

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

    1 第一个参数为value

    2 第二个参数为key(可省略)

    3 第三个参数为index(可省略)

    例1 遍历数组

    <div id="app">
      <ol>
        <li v-for="site in sites">
          {{ site.name }}
        </li>
      </ol>
    </div>
    new Vue({
      el: '#app',
      data: {
        sites: [
          { name: 'Runoob' },
          { name: 'Google' },
          { name: 'Taobao' }
        ]
      }
    })

    例2 迭代对象

    <div id="app">
      <ul>
    <!--
        <li v-for="value in object">
          {{ value }}
        </li> 
    -->
    <!--     
        <li v-for="(value, key) in object">
          {{ key }} : {{ value }}
        </li> 
    -->
        <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }} : {{ value }}
        </li>
      </ul>
    </div>
    new Vue({
      el: '#app',
      data: {
        object: {
          name: 'Hello',
          url: 'http://www.baidu.com',
          slogan: '你好!'
        }
      }
    })

    例3 迭代整数

    <div id="app">
      <ul>
        <li v-for="n in 10">
         {{ n }}
        </li>
      </ul>
    </div>
    new Vue({
      el: '#app'
    })

     

    四、计算属性

    使用computed指定

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })

    我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
      <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
    </div>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedMessage2: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })

    computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter 

    <div id="app">
      <p>{{ site }}</p>
    </div>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function () {
            return this.name + ' ' + this.url
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 调用 setter, vm.name 和 vm.url 也会被对应更新
    vm.site = '小昱之家 http://www.xiaoyulive.top';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    
     

    五、样式绑定

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

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

    例1 数据形式

    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    .text-danger {
      background: red;
    }
    <div id="app">
      <div class="static"
         v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
      </div>
      <!-- 或者 -->
      <!-- 注意,若果有-必须使用引号,如果没有-则不用加引号,大写不会转换为- -->
      <div class="static"
         v-bind:class="{ active: isActive, textDanger: hasError }">
      </div>
    </div>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: true
      }
    })

    例2 对象形式

    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    .text-danger {
      background: red;
    }
    <div id="app">
      <div v-bind:class="classObject"></div>
    </div>
    new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          'text-danger': true
        }
      }
    })

    例3 计算属性形式

    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    .text-danger {
      background: red;
    }
    <div id="app">
      <div v-bind:class="classObject"></div>
    </div>
    new Vue({
      el: '#app',
      data: {
      isActive: true,
      error: null
      },
      computed: {
        classObject: function () {
          return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal',
          }
        }
      }
    })

    例4 数组形式

    .text-danger {
      width: 100px;
      height: 100px;
      background: red;
    }
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    <div id="app">
      <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
    </div>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })

    例5 三元表达式

    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    .text-danger {
      background: red;
    }
    
    <div id="app">
      <div v-bind:class="[activeClass, errorClass]"></div>
    </div>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })

    例6 内联样式

    <div id="app">
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello</div>
    </div>
    new Vue({
      el: '#app',
      data: {
        activeColor: 'green',
        fontSize: 30
      }
    })

    例7 内联样式 - 对象形式

    <div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]">Hello</div>
    </div>
    // 当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。
    new Vue({
      el: '#app',
      data: {
        baseStyles: {
          color: 'green',
          fontSize: '30px'
        },
        overridingStyles: {
          'font-weight': 'bold',
          transform: 'rotate(90deg)',
          backgroundColor: 'red'
        }
      }
    })

     

    六、事件处理

    例1 简单的事件处理

    <div id="app">
      <button v-on:click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
    </div>
    new Vue({
      el: '#app',
      data: {
        counter: 0
      }
    })

    例2 绑定事件处理函数

    <div id="app">
       <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // `this` 在方法里指当前 Vue 实例
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    // 也可以用 JavaScript 直接调用方法
    app.greet() // -> 'Hello Vue.js!'

    例3 带参数

    <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#app',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })

    例4 修饰符

    <div id="app">
      <!-- 事件修饰符 -->
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件至少触发一次,2.1.4版本新增 -->
      <a v-on:click.once="doThis"></a>
      <!-- 
        .stop
        .prevent
        .capture
        .self
        .once
      -->
    
      <!-- 按键修饰符 -->
      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit" value="按下回车试试">
      <!-- 同上 -->
      <input v-on:keyup.enter="submit" value="按下回车试试">
      <!-- 缩写语法 -->
      <input @keyup.enter="submit" value="按下回车试试">
      <input @keyup.ctrl.67="clear" @keyup.alt.67="undo" value="按下ctrl+C试试">
      <!-- 
        .enter
        .tab
        .delete (捕获 "删除" 和 "退格" 键)
        .esc
        .space
        .up
        .down
        .left
        .right
        .ctrl
        .alt
        .shift
        .meta
      -->
    </div>
    new Vue({
      el: '#app',
      data: {
        content: ""
      },
      methods: {
        say: function (message) {
          alert(message)
        },
        submit: function(){
          alert("提交成功")
        },
        clear: function(e){
          content = e.target.value
          e.target.value = "按下alt+C试试"
        },
        undo: function(e){
          e.target.value = content
        }
      }
    })

     

    七、生命周期及钩子函数

    生命周期示意图

    生命周期钩子函数表

     

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: Vue.js简单使用及个人心得
    本文地址:http://www.xiaoyulive.top/?post=92
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号